持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天
点击查看活动详情
一、切换其他组件统计图时，出现卡顿问题如何解决
1.原因：每一个图例在没有数据的时候它会创建一个定时器去渲染气泡，页面切换后，echarts 图例是销毁了，但是这个 echarts 的实例还在内存当中，同时它的气泡渲染定时器还在运行。这就导致 Echarts 占用 CPU 高，导致浏览器卡顿，当数据量比较大时甚至浏览器崩溃
2.解决方法：在 mounted()方法和 destroy()方法之间加一个 beforeDestroy()方法释放该页面的 chart 资源，clear()方法则是清空图例数据，不影响图例的 resize，而且能够释放内存，切换的时候就很顺畅了
beforeDestroy () {
this.chart.clear()
}
二、echarts 图表自适应 div resize 问题
echarts 官网的实例都具有响应式功能
echarts 图表本身是提供了一个 resize 的函数的。
用于当 div 发生 resize 事件的时候，让其触发 echarts 的 resize 事件，重绘 canvas。
三、echarts 和 chart 对比
1.echarts 的优点：
1）.国人开发，文档全，便于开发和阅读文档。
2）.图表丰富，可以适用各种各样的功能。
2.echarts 的缺点：
1）.移动端使用略卡，毕竟是 PC 端的东西，移植到移动端肯定多多少少有些问题。
2）.echarts 不失为一款比较适合我们这种码农使用的框架。
3).echarts 就不贴代码了。毕竟文档很全。
3.chart.js 优点：
1）.轻量级，min 版总大小 50 多 k。
2）.移动端使用比较流畅，毕竟小。
4.chart.js 缺点：
1）.功能欠缺比较多。
2）.中文文档奇缺。
