Vue + Echarts页面内存占用高的问题解决方案

Vue + Echarts页面内存占用高问题解决

1.问题描述

目前使用的是Vue2 + Echarts4.x的组合，页面如下所示。

就是一个类似于神策的数据看板页面，左侧是一个导航栏，右侧看板页面中包含很多个报表图片，其中报表页面中对Echarts图表进行了二次封装。点击左侧的菜单可以切换不同的看板，有些看板页面中的报表比较多，用户多次切换后页面的内存占用可以上升为GB级。严重时导致页面内存溢出，使得页面崩溃，极大影响了用户体验。

2.解决方法

参考了多篇文章，发现有可能是Echarts+Vue2中，组件销毁时，不会自动释放掉组件中持有的Echarts实例对象。因此只需要在组件销毁的时候主动销毁掉其持有的Echarts实例对象即可。

普通Vue项目可使用如下方式。

data(){
    return {
		MyEchart: null,
    }
}
initEcharts(){
   // ....
}
// ....
beforeDestroy(){
	if(this.MyEchart){
		this.MyEchart.dispose();
		this.MyEchart=null;
	}
}

Vue2 + TyepScript项目使用如下方式。

private MyEchart: any = null;
private initEcharts(): void {
    // ...
}
beforeDestroy(): void{
    if(this.MyEchart){
		this.MyEchart.dispose();
		this.MyEchart=null;
	}
}

参考文章

https://zhuanlan.zhihu.com/p/585392877 

https://blog.csdn.net/weixin_47409897/article/details/129174801

到此这篇关于Vue + Echarts页面内存占用高问题解决的文章就介绍到这了,更多相关Vue Echarts内存占用高内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！