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

首先过程中最大的问题就是移除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方法

上一篇:echarts中的显示


下一篇:echarts渲染后canvas宽高为零