vue项目使用echarts（封装函数：监听dom元素尺寸变化resize echarts）

场景：如上图，页面左侧有个控制收缩的菜单面板，页面右边是一个数据大屏，有很多的echart是图表，所以需要监听右侧dom元素，当其尺寸变化的时候resize 图表。

在这里可以通过element-resize-detector监听dom元素变化：

npm install element-resize-detector

封装的函数如下：
// 封装 监听dom元素尺寸变化resize echarts

    resizeEcharts(echart, myChart) {
      const elementResizeDetectorMaker = require('element-resize-detector')// 引入监听dom变化的组件
      const erd = elementResizeDetectorMaker()
      // 监听id为echart的元素 大小变化
      erd.listenTo(echart, function(element) {
        // const width = element.offsetWidth
        // const height = element.offsetHeight
        myChart.resize()
      })
    },

这里的echart就是我们的dom元素指的是：
this.$refs.echart 或者 document.getElementById(“echart”)

这里的myChart指的是初始化的echarts实例：
const myChart = echarts.init(this.$refs.echart)

所以调用函数就是：

this.resizeEcharts(echart, myChart)

当然，具体封装参数就你的业务需求灵活而定。