vue监听div大小改变多个echart大小

1、安装插件

npm install element-resize-detector

2、引入
单页面引入：

 import elementResizeDetectorMaker from 'element-resize-detector'

main.js引入：

import ElementResizeDetectorMaker from "element-resize-detector"
Vue.prototype.$erd = ElementResizeDetectorMaker()

3、页面上使用

//chartBox4是外层盒子，我们就监控它的大小来判定是否需要重置图表
//多个的话子组件的id记得写成不同的
//就像我这样后缀1，2，3，4都可以，不然会识别出错
<div id="chartBox4"
       class="chart_box3"
       :style="{height:'300px',width:'100%'}">
       //这个chart就是我们的图表
    <div id="chart"/>
  </div>

4、methods钩子函数中加入以下两个方法

watchSize() {
        //这里获取节点，不然到方法里获取就麻烦了
      var chart = document.getElementById('chart')
      //这里this要定义一下，不然到监听里就会冲突
      const _this = this
      var erd = elementResizeDetectorMaker()
      //监听盒子的变化
      erd.listenTo(document.getElementById('chartBox4'), function (element) {
      //调用方法，重置chart大小
        _this.chartssize(chart)
      })
    },
chartssize(chart) {
//获取盒子的宽度跟高度，这里用clientWidth是为了将100%转换成px，然后赋值给chart的长宽
      chart.style.width = document.getElementById('chartBox4').clientWidth
      chart.style.height = document.getElementById('chartBox4').clientHeight
      //进行重置
      setTimeout(() => {
        this.chart.resize()
      }, 20)
    },

若是全局引用，watchSize里面的

 var erd = elementResizeDetectorMaker()
      //监听盒子的变化
      erd.listenTo(document.getElementById('chartBox4'), function (element) {
      //调用方法，重置chart大小
        _this.chartssize(chart)
      })

替换为

this.$erd.listenTo(
      document.getElementById("headquarters-analysisOperating"),
        function (element) {
          //调用方法，重置chart大小
              _this.chartssize();
         }
);

5、在mouted钩子函数中加入调用方法

mounted() {
//加入这条，不是只有这条
    this.watchSize()
  },