如何解决 通过WebSocket 大量数据更新散点图导致的页面卡顿问题?-灵析社区

爬虫爬呀爬

echarts通过websocket频繁更新散点图数据,数据量大的时候达到三四千左右,页面出现卡顿现象,鼠标一直在转。无法准确选中数据tooltip,页面卡死。 版本更新到最新版,页面销毁清除均无效

阅读量:13

点赞量:0

问AI
几千个点的数据量还不算大,之前我们项目上用 echarts5 渲染几万个点都没问题。主要两个优化点吧 * 开启"大规模"模式 "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241025/78a2b863a36af2d0622a6ad6b3acc930.png) * 使用 "appendData" 进行增量渲染,特别像 "websocket" 这种以增量的方式推数据的场景,优化效果特别明显。 "https://echarts.apache.org/zh/api.html#echartsInstance.append..." (https://link.segmentfault.com/?enc=LPRjR29rVuVGZ%2Fyz4%2BN5Ew%3D%3D.XXCijoGC%2BZClWyDSDfdtNMrYa%2BRpkJDLfD%2BassXdMVw8qEhiqoy3rswvxNsw2mN%2FCc6ADd6ekcNb7Cf9k4fVINgU20WWDxqomqPQCfD2poE%3D) "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241025/a1f7510a50c0ce18229dbf268a2057e2.png)