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