vue页面echarts卡顿问题 1.在vue中使用echarts使用setOption更新加载图形很慢

??在vue中使用echarts和绘制柱状图，图例很多，但是只有100多条，但是绘制很慢。

this.myChart.setOption(this.option)

??因为是在data中定义了myChart属性，在script中定义一个变量用来接收myChart，就可以解决这个问题,原因变量定义在data里，canvas触发了vue监听而更新，而每一次的更新，导致加载变慢

var myChart myChart.setOption(this.option) 2.点击切换其他组件统计图时，出现了让人难以忍受的卡顿，有好几次都网页直接崩溃

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

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

beforeDestroy () { myChart.clear() }, if (myChart != null) { myChart.dispose() }

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。