websocket数据过多分批渲染到页面

项目中遇到传感器每秒产生至少100条振动数据,实时数据显示在ECharts折线图中,导致页面卡顿。解决方案是缓存数据,每秒只渲染一次,限制页面最多显示1000条数据,有效避免了页面卡顿问题。
摘要由CSDN通过智能技术生成

项目场景:

业务需求:传感器采集到的振动数据需要全部记录,当条件发生变化的时候需要及时反馈并记录当下的数据并触发机器关闭


问题描述:

实时数据与设置的上限数据与下限数据同时体现在echarts折线图之中,当实时数据超过上线时触发报警并关机。
由于数据量太大,一秒钟至少一百条,因此实时渲染到echarts上会导致整个页面卡死。


原因分析:

上面已经提到,数据太快,数据量太大导致页面卡顿


解决方案:

数据来的时候,先攒起来,并不立即渲染到echarts上面,一秒钟触发一次渲染,让积攒到的数据全部渲染到页面上,页面每次最多显示一千条数据

let _this = this
 _this.$io
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值