Vue---监听div元素宽高改变时echart图表重新resize

一、需求描述

当点击上图的红色框时，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);}}