问题：在Vue项目中的侧栏展开或者合并时，echart图标不能自适应屏幕
解决思路：

思路一、监听DOM变化，使用echarts自带的resize()去适配
思路二、监听DOM变化，在router-view中重新渲染页面(未尝试)

用window.onsize监听，发现只能监听窗口变化，并没有什么卵用。

百度发现使用element-resize-detector可以完美解决

1、安装

npm install element-resize-detector

2、引入

 var elementResizeDetectorMaker = require("element-resize-detector")

3、使用

<div id="test">
    <div id="eChart">
</div>

在mounted(){}中：

let that = this
var erd = elementResizeDetectorMaker()
erd.listenTo(document.getElementById("test"), function (element) {
    that.$nextTick(function () {
        that.$echarts.init(document.getElementById("eChart")).resize()
    })
})

在一个页面中如果有多个echarts，可以用ref:

self.chart = self.$echarts.init(self.$refs.Echart);
self.chart.resize();

注意：这时候可能会报init is undefined，只需引入echart即可 import echarts from 'echarts'，把that.$echarts改成echart就好了
参考：https://blog.csdn.net/csl125/article/details/89245267