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

vue监听div大小改变多个echart大小，使echart自适应div的大小且不冲突

我们在写echart图表时会遇到其不会根据窗口大小的变更而自适应界面的问题
第一种问题：单个echart，不会根据窗口大小的变更而变更
第二种问题：多个echart，不会根据窗口大小的变更而变更
第三种问题：多个echart，不会根据父组件的div大小的变更而变更
以下给出解决方案，三种都能解决掉，如果有优化余地请留言提醒一下
我们先通过下载element-resize-detector用来监听dom元素（如div）
在控制台输入

npm install element-resize-detector

然后在vue文件中引入它，位置在哪就不用我说了吧

import elementResizeDetectorMaker from 'element-resize-detector'

接下来，我们将eChart组件的外面套一层div，以方便监控div

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

然后我们在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)
    },

写完了别忘了在mouted钩子函数中加入调用方法

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