当前位置: 首页 > 知识库问答 >
问题:

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

曾明诚
2023-12-26

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

版本更新到最新版,页面销毁清除均无效

共有1个答案

颛孙国源
2023-12-26

几千个点的数据量还不算大,之前我们项目上用 echarts5 渲染几万个点都没问题。主要两个优化点吧

  • 开启大规模模式
    image.png
  • 使用 appendData 进行增量渲染,特别像 websocket 这种以增量的方式推数据的场景,优化效果特别明显。
    https://echarts.apache.org/zh/api.html#echartsInstance.append...
    image.png
 类似资料:
  • websocket会实时发送大量数据时,我目前写的这些代码,会导致页面卡顿,性能优化我不知道怎么下手了,求大佬指教一下, 有偿。谢谢大佬们

  • 本文向大家介绍vue大数据表格卡顿问题的完美解决方案,包括了vue大数据表格卡顿问题的完美解决方案的使用技巧和注意事项,需要的朋友参考一下 前言 vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法 点我在线体验Demo(请用电脑查看) 亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿请备注系统和浏览器,方便我后续

  • 本文向大家介绍IOS 解决UIButton 点击卡顿/延迟的问题,包括了IOS 解决UIButton 点击卡顿/延迟的问题的使用技巧和注意事项,需要的朋友参考一下 前言   一开始还以为代码写的有问题,点击事件里面有比较耗时卡主线程的代码,逐一删减代码发现并不是这么回事。 正文   和参考文章里说的情况不完全相同,UIButton 并没有放在 UIScrollView 或 UITableView

  • uniapp开发的小程序中老是报这个错是什么原因:TypeError: Cannot read property 'constructor' of undefined 报这个错之后所有跟页面跳转相关的操作都无法执行,直接卡死。 请问引发这种情况有哪些原因?有什么排查方法与解决方案吗?

  • 本文向大家介绍vuex页面刷新导致数据丢失的解决方案,包括了vuex页面刷新导致数据丢失的解决方案的使用技巧和注意事项,需要的朋友参考一下 解决vuex页面刷新导致数据丢失问题 vuex数据是存在内存当中,当页面刷新之后vuex数据自然会丢失。我们有两种方法解决该问题: 1.使用vuex-along 2.使用localStorage或者sessionStroage 1.使用vuex-along v

  • 我正在做仪表板。这是我的密码: 仪表板中有一个散点图()和一个表()。散点图的每个点对应于表中的特定行,我从excel文件中读取这些数据 excel文件中的数据采用以下格式: 我想实现这个功能:当用户选择散点图中的某个点时,代码会突出显示表中相应的行(例如将这些行中的单元格的背景颜色更改为,除了列,保持其颜色)。 检查以下来源: 使用样式数据条件的dash datatable单个高亮显示效果异常