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()

},

经过测试，加了这个方法之后不存在卡顿现象，开心~