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

最新推荐文章于 2025-03-05 11:07:16 发布

zhiyan1990

最新推荐文章于 2025-03-05 11:07:16 发布

阅读量2w

点赞数 10

文章标签： echarts javascript

本文链接：https://blog.csdn.net/zhiyan1990/article/details/120419264

版权

本文探讨了ECharts在页面渲染过程中可能导致卡顿的原因及解决方案，包括合理管理图表生命周期以降低CPU占用，以及针对大数据量场景采用分片加载和增量渲染等技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面卡顿原因：

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

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

解决方法：

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

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

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

var loadedChunkIndex = 0;
var chunkCount = rawData.length;//大数据被分了几组list
function appendData() {
    if (loadedChunkIndex >= chunkCount) {
        return;
    }
    setTimeout(function () {
        chart.appendData({seriesIndex: 0, data: rawData[loadedChunkIndex]});
        loadedChunkIndex++;
        appendData();
    }, 300);
}
appendData();