关于echarts动态更新数据的时候造成的卡顿问题

echarts在websocket形式获取数据时,由于数据更新的很快,会导致页面渲染卡死,可以采取以下办法(可能不是最优解,但能解决)

//监听webosoket传过来的数据变化
watch(()=> filteredBmusData, async(newValue) => {
  if (newValue) {
    await nextTick().then(() =>{
      option.series[0].data = chartData
      initChart()
    })
  }
},
{
  deep:true
})
const initChart = () => {
  myChart.clear()
  myChart.setOption(option, false)
}
//option就是你的echart的配置

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Echarts展示大量数据时,可能出现页面卡顿问题。这是因为在展示大量数据时,Echarts需要处理大量的数据和绘制图表,导致页面加载时间过长、交互响应变慢甚至崩溃。[2] 有几个常见的解决方案可以缓解这个问题。首先,可以采用数据分页展示的方式,只加载当前页的数据,避免一次性加载大量数据。这样可以减少页面加载时间和内存占用,并提高用户体验。 其次,对于数据量较大的情况,可以使用降采样策略,即只保留数据的部分样本点来绘制图表。这样可以减少数据量,提高绘制效率,同时保证图表的展示效果。 另外,可以采用增量渲染的方式来加载数据,即每次只加载部分数据并进行增量渲染,避免一次性加载全部数据导致的卡顿问题。这种方式可以提高渲染效率和交互响应速度。 还有一种常见的导致卡顿的情况是由于Echarts实例在页面切换或大小变化时没有被正确销毁,导致内存占用和定时器运行。建议在页面切换或大小变化时正确销毁Echarts实例,避免资源浪费和性能问题。 总结来说,为了解决Echarts数据量大卡顿问题,可以采用数据分页展示、降采样策略、增量渲染以及正确销毁Echarts实例等方法。这些方法可以有效提高页面加载速度、减少内存占用,并提升用户体验。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值