您的位置:首页 > 财经 > 产业 > 记录一次echarts图表大数据量轮询刷新页面卡死问题的优化

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

2025/1/22 8:23:26 来源:https://blog.csdn.net/qq_35270805/article/details/141086751  浏览:    关键词:记录一次echarts图表大数据量轮询刷新页面卡死问题的优化

项目场景:

在我们的项目架构中,集成的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 =

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com