echarts大数据多图表绘制卡顿解决方案

页面卡顿原因：

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

2、数据量已经大到浏览器卡死了

解决方法：

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

1.  
   beforeDestroy(){
2.  
       this.$refs.myChart && this.$refs.myChart.clear();
3.  
   };

2、数据量已经大到浏览器卡死，其实最好从设计上优化，要么不要一个页面展示那么多图，要么让服务端把数据做一下采样，毕竟那么多的点也没法看，另外echarts也提供了大数据量（百万以上）的渲染场景，分片加载数据和增量渲染。在大数据量的场景下（例如地理数的打点），就算数据使用二进制格式，也会有几十或上百兆，在互联网环境下，往往需要分片加载。appendData 接口提供了分片加载后增量渲染的能力，渲染新加入的数据块时不会清除原有已经渲染的部分，实现代码如下：

1.  
   var loadedChunkIndex = 0;
2.  
   var chunkCount = rawData.length;//大数据被分了几组list
3.  
   function appendData() {
4.  
       if (loadedChunkIndex >= chunkCount) {
5.  
           return;
6.  
       }
7.  
       setTimeout(function () {
8.  
           chart.appendData({seriesIndex: 0, data: rawData[loadedChunkIndex]});
9.  
           loadedChunkIndex ;
10.  
    appendData();
11.  
        }, 300);
12.  
    }
13.  
    appendData();

注意事项：

1、我们现在所有图表组件中接口数据都是通过dataset参数实现的，对于巨大数据量的渲染（如百万以上的数据量），需要使用 appendData 进行增量加载，这种情况不支持使用 dataset，需要使用series.data。

2、目前并非所有的图表都支持分片加载时的增量渲染。目前支持的图有：ECharts 基础版本的 散点图（scatter） 和 线图（lines）。ECharts GL 的 散点图（scatterGL）、线图（linesGL） 和 可视化建筑群（polygons3D）。

这篇好文章是转载于：学新通技术网