vue + Echarts 填坑记(Echarts数据量大,导致浏览器卡顿)
来源:互联网 发布:1-10阶乘分之一编程 编辑:程序博客网 时间:2024/04/28 09:48
最近使用vue + Echarts 实现vue项目的数据可视化功能的时候,发现随着组件的增多,组件里Echarts绘图的增多,页面操作越来越卡顿,点击数据比较大的组件时,Echarts绘图渲染页面的速度倒是挺快,但是当我点击切换其他组件统计图时,出现了让人难以忍受的卡顿,有好几次都网页直接崩溃,百度找了好多答案,最后终于得知问题出在哪以及解决方案,便写在这里让受同样问题烦恼的同学能够快速解决。
原因:
每一个图例在没有数据的时候它会创建一个定时器去渲染气泡,页面切换后,echarts图例是销毁了,但是这个echarts的实例还在内存当中,同时它的气泡渲染定时器还在运行。这就导致Echarts占用CPU高,导致浏览器卡顿,当数据量比较大时甚至浏览器崩溃。
解决方法:
在mounted()方法和destroy()方法之间加一个beforeDestroy()方法释放该页面的chart资源,我也试过使用dispose()方法,但是dispose销毁这个图例,图例是不存在了,但图例的resize()方法会启动,则会报没有resize这个方法,而clear()方法则是清空图例数据,不影响图例的resize,而且能够释放内存,切换的时候就很顺畅了
beforeDestroy () {
this.chart.clear()
},
阅读全文
0 0
- vue + Echarts 填坑记(Echarts数据量大,导致浏览器卡顿)
- Echarts 占用CPU高,导致浏览器卡顿问题。
- echarts大数据量展示的解决方案
- Vue+Echarts
- vue使用echarts
- 大数据可视化工具Echarts-(1)引入Echarts
- echarts
- Echarts
- ECharts
- echarts
- Echarts
- echarts
- echarts
- Echarts
- echarts
- ECharts
- ECharts
- ECharts
- Java笔记二——认识对象
- 数据库的四种语言
- 数据结构实验之二叉树四:(先序中序)还原二叉树
- JAVA作业
- 图
- vue + Echarts 填坑记(Echarts数据量大,导致浏览器卡顿)
- Android自定义View---画圆
- 避免使用vector<bool>
- Android --- WebView -- 混合开发(一)
- 百度Editor文本编辑器
- 12
- fresco的简介以及使用
- 我的SSM源码以及所需依赖包
- 学生成绩的分级