一个页面上多个echart图表的自适应问题，亲测有效！！！（作者是Vue2项目）

根据echars官网，单个echar图自适应用法如下

window.onresize = () => {
    this.myChart.resize();
};

以上方法有个问题，就是在一个页面存在多个echart图，自适应的时候只会适应最后进行渲染的一个echart图。

由此引出下面这种写法，将简写的onresize更换为addEventListener。

添加事件监听器记得在离开时移除事件监听器，避免内存泄漏！

要移除事件监听器，事件的函数就需要使用具名函数！

data() {
    return {
        myChart:''
    }
}
mounted() {
    this.loadChart();
}
beforeDestroy() {
    // 离开页面必须进行移除，否则会造成内存泄漏，导致卡顿
    window.removeEventListener('resize', this.resizeFn);
}
methods： {
    // 渲染echart图
    loadChart() {
        // 获取绘图的节点，并初始化
        this.myChart = this.$echarts.init(document.getElementById('chart'));
        // 自己项目echart图的配置
        const chartOption = {...} 
        this.myChart.setOption(chartOption);
        setTimeout(() => {
            window.addEventListener('resize', this.resizeFn);
        }, 100)
    }
    // 使用具名自适应函数，用于离开页面时可以卸载监听事件使用
    resizeFn() {
        return this.myChart.resize();
    }
}

我们可以在控制台打开Element -> EventListeners ->点击下图的刷新图标。

查看我们现在的事件监听器，每个resize对应的是不同的echart图我们给绑的事件监听器。

当我们需要验证离开页面是否移除事件监听时就可以在跳转页面后，点击下图标注的刷新图标，看看事件是否移除，保证内存不泄露。

希望能帮助到需要的人，存在错误之处请指正。