当前位置：首页 > news >正文

记录一次echarts图表大数据量轮询刷新页面卡死问题的优化

news 2025/8/14 2:53:35

项目场景：

在我们的项目架构中，集成的Echarts图表组件采用了折线图，业务需求即每300毫秒自动更新图表上的数据，并且每一次的数据点数量达到了约700个，折线图刷新的很快，每300毫秒就要刷新数据

问题描述

开发过程中发现在这种数据量请求频率下，大概2个小时左右就会导致整个页面卡死，无法操作。问题很严重

原因分析：

经过详细的排查发现是echarts图表在大数据量下确实会有这种问题。我们业务虽然只有两个图标，但更新频率很快，也遇到了此问题。原因是多方面的，一个是配置不高的电脑cpu撑不住，一个echarts也有内存问题，在大数据量频繁刷新内存和cpu撑不住，直接导致页面崩溃。经过考虑采取先不降低频率，先优化图表方式。解决这个问题需要从多方面下手

解决方案：

1.解决定时轮询稳定性：

将定时轮询单独放在一个线程中，稳定定时任务运行效率
参考代码：

// worker.js   
self.addEventListener("message", function (event) {const { task } = event.data;console.log("worker", task);if (task === "getChartData") {//创建定时任务if (!self.timerThread) {self.timerThread = this.setInterval(async () => {self.postMessage({});}, 300);}}else if (task === "stop") {//清除定时任务if (self.timerThread) {this.clearInterval(self.timerThread);self.timerThread = undefined;}}
});

调用

    stopComputation(){if (this.worker != null) {this.worker.postMessage({ task: 'stop'});this.worker.terminate();this.worker = null;}},startTimer(){if (this.worker != null) {this.stopComputation()}this.worker =