vue 项目中dom元素宽度更改之后echarts之resize

前提：

        最近做一个项目，项目中存在左侧树和导航屑的收起和展开功能，发现当左侧树和导航屑收起时，如果页面存在eachrts图表的话，图表不会进行重绘，导致页面展示效果不好。

        已经给echarts写了监听事件，但是是针对window的，页面内容的缩放不会进入window的监听

window.addEventListener('resize', () => {
    myChart.resize()
})

        追根到底，是因为echarts图表的容器大小进行了变化，所以我们需要去监听dom的变化

解决方案：

        我们可以使用 element-resize-detector 插件来实现，简单粗暴。具体过程如下：

        1. 安装相关插件，npm install element-resize-detector
        2. 在main.js中引入依赖，并挂在vue原型链上：

import ElementResizeDetectorMaker from 'element-resize-detector'

Vue.prototype.$erd = ElementResizeDetectorMaker()

        3、在界面中使用_this.$erd.listenTo()去做监听，示例代码如下：

// lineChart-自定义echarts方法
const chart = this.$refs.barChart1
if (chart) {
    if (data.length > 0) {
        const myChart = this.$echarts.init(chart)
        myChart.setOption(
            lineChart(xData, dataSeries, params)
        )
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        // 监测dom元素
        this.$erd.listenTo(this.$refs.barChart1, element => {
            this.$nextTick(() => {
                myChart.resize()
            })
        })
    } else {
        this.layout.chartNoData(chart)
    }
}

        监听echarts图表 元素本身的dom元素变化，让echarts图表重新绘制就好了