vue + Echarts 填坑记(Echarts数据量大,导致浏览器卡顿)

最近使用vue + Echarts 实现vue项目的数据可视化功能的时候,发现随着组件的增多,组件里Echarts绘图的增多,页面操作越来越卡顿,点击数据比较大的组件时,Echarts绘图渲染页面的速度倒是挺快,但是当我点击切换其他组件统计图时,出现了让人难以忍受的卡顿,有好几次都网页直接崩溃,百度找了好多答案,最后终于得知问题出在哪以及解决方案,便写在这里让受同样问题烦恼的同学能够快速解决。

原因:

每一个图例在没有数据的时候它会创建一个定时器去渲染气泡,页面切换后,echarts图例是销毁了,但是这个echarts的实例还在内存当中,同时它的气泡渲染定时器还在运行。这就导致Echarts占用CPU高,导致浏览器卡顿,当数据量比较大时甚至浏览器崩溃。

解决方法:

在mounted()方法和destroy()方法之间加一个beforeDestroy()方法释放该页面的chart资源,我也试过使用dispose()方法,但是dispose销毁这个图例,图例是不存在了,但图例的resize()方法会启动,则会报没有resize这个方法,而clear()方法则是清空图例数据,不影响图例的resize,而且能够释放内存,切换的时候就很顺畅了

beforeDestroy () {
this.chart.clear()
},
经过测试,加了这个方法之后不存在卡顿现象,开心~

阅读更多
博主设置当前文章不允许评论。

没有更多推荐了,返回首页