echart大数据量缩放时间轴卡顿

本文探讨了在ECharts中优化大数据量折线图的显示性能,通过调整sampling、animation、showAllSymbol及showSymbol等属性,解决了图表在数据量大时的卡顿问题,保持了symbol效果的同时提升了用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如图,X轴type为类目轴category,数据量大的时候缩放有时会出现这种情况

查资料后改了图表的几个属性:

1、sampling:"average"。【但是并不管用】

官方解释:

折线图在数据量远大于像素点时候的降采样策略,开启后可以有效的优化图表的绘制效率,默认关闭,也就是全部绘制不过滤数据点。

2、animation:false。【改完感觉好很多,但是sybmol效果没有了】

3、showAllSymbol:false。【瞬间就不卡了】

官方解释:

只在主轴为类目轴(axis.type 为 'category')时有效。 可选值:

  • 'auto':默认,如果有足够空间则显示标志图形,否则随主轴标签间隔隐藏策略。
  • true:显示所有图形。
  • false:随主轴标签间隔隐藏策略。

4、showSymbol:false。【目测与showAllSymbol效果相同,感觉设置了这个应该就不用设置showAllSymbol了】

官方解释:

 是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。

 

所以,最后,为了symbol效果还有,我在series里加上了:

showSymbol:false,
sampling:'average',
showAllSymbol: false,

成功解决~~


 

 

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值