在国际网站做外贸需要条件,外贸公司没网站 怎么做业务,色调网站,媒体发稿网一、需求描述 当点击上图的红色框时#xff0c;echart的div元素宽会改变但是无法触发echarts图表的resize重新渲染#xff0c;对于浏览器而言#xff0c;浏览器具有window.resize方法监听浏览器窗口大小的改变#xff0c;而div元素没有监听宽高改变的方法。
二、解决方案 …
一、需求描述 当点击上图的红色框时echart的div元素宽会改变但是无法触发echarts图表的resize重新渲染对于浏览器而言浏览器具有window.resize方法监听浏览器窗口大小的改变而div元素没有监听宽高改变的方法。
二、解决方案
element-resize-detector依赖包可以监听div元素宽高的改变官方文档如下
element-resize-detector - npm
这里简单演示使用步骤具体请看官网文档
1、引入
import ElementResizeDetectorMaker from element-resize-detector;
2、初始化实例 elementResizeDetectorMaker ElementResizeDetectorMaker({strategy: scroll,});
3、mounted钩子函数监听
mounted{
let dom document.getElementById(元素id名称);if (!this.getIsNull(dom)) {this.elementResizeDetectorMaker.listenTo(dom, () {// 监听元素宽高改变触发echarts的resize方法this.testChart.resize();});}
}3、destroyed钩子函数销毁监听 destroyed() {// 销毁监听let dom document.getElementById(元素id名称);if (!this.getIsNull(dom)) {this.elementResizeDetectorMaker.uninstall(dom);}}
