解决echarts不是响应式的问题,并解决移除window.addEventListener问题

首先我在解决echarts响应式问题中遇到最大的困难是如何移除window.addEventListener？

目标一：给echarts添加响应式代码：

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

在echarts后面填上这段代码就可以实现页面响应式的改变echarts图的大小，但是这段代码是全局window的方法，使所有页面都一直加载着myChart.resize()，从而导致卡面卡顿

目标二：改造这段响应式代码：

data(){
	return {myChar1:""}  // 声明echats变量
}
mounted() { 
    this.loadLine(); // 运行echats图
    window.addEventListener("resize", this.handleResizeMyChart1); // 加载resize方法
  },
methods：{
	handleResizeMyChart1() {
    	this.myChart1.resize(); //resize方法
  	},
},
beforeDestroy() { // 页面销毁前
  console.log('销毁');
  window.removeEventListener("resize", this.handleResizeMyChart1); // 移除resize方法
},

为什么要单独写一个resize方法？不直接这样：

window.addEventListener("resize", ()=>{
	this.myChart1.resize();
});

原因是： 通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除，所以需要单独写一个resize方法！

下面是我最终的方案