根据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图我们给绑的事件监听器。
当我们需要验证离开页面是否移除事件监听时就可以在跳转页面后,点击下图标注的刷新图标,看看事件是否移除,保证内存不泄露。
希望能帮助到需要的人,存在错误之处请指正。