Vue + Echarts页面内存占用高的问题解决方案
更新时间：2024年02月28日 11:54:10 作者：小宇0926
点击左侧的菜单可以切换不同的看板,有些看板页面中的报表比较多,用户多次切换后页面的内存占用可以上升为GB级,严重时导致页面内存溢出,使得页面崩溃,极大影响了用户体验,本文给大家介绍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内存占用高内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue中关于template报错等问题的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
layer.js(mobile)是一个小巧方便的弹出层插件，在之前的apicloud项目中被大量使用，但最近对apicloud的IDE、非常不友好的文档和极低的开发效率深感厌烦，决定弃用然后转向Vue开发。这篇文章主要介绍了vue-cli脚手架引入弹出层layer插件的几种方法，需要的朋友可以参考下2019-06-06
我们在开发 Vue 项目的时候会使用一些前端组件库,例如 Element、Ant Design 等,这些组件库虽然方便,但是也有一些缺点,比如内置的图标太少,例如我们开发医疗、财务、工程等一些前端项目,内置的图标不能满足我们的需求,所以我们常常在Vue项目中引入SVG图标2024-09-09
这篇文章主要介绍了vue Nprogress进度条功能实现,NProgress是页面跳转是出现在浏览器顶部的进度条，本文通过实例代码给大家讲解，需要的朋友可以参考下2021-07-07
在Vue项目中用fullcalendar制作日程表的示例代码
这篇文章主要介绍了在Vue项目中用fullcalendar制作日程表，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要为大家介绍了Vue.js设计与实现无限递归学习总结，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要给大家介绍了关于vite配置@别名以及让vscode智能提示路经的步骤,文中通过代码示例以及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-08-08
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
这篇文章主要介绍了详解webpack打包vue项目之后生成的dist文件该怎么启动运行,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了详解Vscode中使用Eslint终极配置大全，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
在本文中,我们详细讲解了Vue路由的使用方法,我们首先安装了Vue Router,然后创建了一个Vue Router实例,并配置了路由,感兴趣的朋友一起看看吧2023-11-11
最新评论