echarts 随div变化自适应（不是随窗口大小变化）

在某些特定需求下，echarts图需要随着外层div放大缩小而自适应变化，而不是像随着窗口变化而自适应的一般需求。外层div的宽高的在变化时，echart图大小是不会实时改变的。
以下动图修改的是组件最外层div宽高，内部所有标签都是按百分比写的，而echart部分不会自适应改变。

解决办法：element-resize-detector

其中的listenTo方法可以监听指定标签dom变化，并触发回调函数。

1. 导库：

import elementResizeDetectorMaker from "element-resize-detector";

2. html中：

<div ref="agriEcoDev" style="width: 100%; height: 65%"></div>

3. 在vue中methods创建echart的方法中：

• 使用elementResizeDetectorMaker.listen()
• 监听div变化时触发resize()
  

关键代码：

//  随外层div的大小变化自适应
        const _this = this
        let erd = elementResizeDetectorMaker();
        erd.listenTo(this.$refs.监听的dom, () => {
            _this.$nextTick(() => {
                echart实例.resize();
            })
        })

效果：