eChart怎么在div盒子中自适应变化，监听div宽高度变化，vue中使用element-resize-detector

问题引出：开发中会遇到div盒子宽度发生改变，echarts图表却不能自适应，这是因为局部div宽度变化并没有触发window.onresize，如果想要监听div变化，我们可使用element-resize-detector

1.安装element-resize-detector

npm install element-resize-detector --save

2.在vue中引入，html结构

import elementResizeDetectorMaker from 'element-resize-detector'

3.初始化使用（我这里封装到methods里面）

initListenToDiv(ref){
      let erd = elementResizeDetectorMaker();
      let that = this
      erd.listenTo(ref, () => {
        that.$nextTick(function () {
          //使echarts尺寸重置
          that.myChart.resize();
          });
      })
    },

说明：这里的ref，就是你要监听的div，因为在div中，不建议用doc那原生一套获取div。myChart对象初始化时，我放到data里面了。

4.在mouted中初始化函数

this.initListenToDiv(this.$refs.mychartRef)

5.效果