VChart icon indicating copy to clipboard operation
VChart copied to clipboard

当项目显示了一次一万条数据的时候,图表的交互动画就变得很卡顿,在这之前不会卡顿。一万条数据的图表已经渲染完了,为什么和其他图表交互的时候还会卡顿

Open huangnan20030709 opened this issue 10 months ago • 11 comments

huangnan20030709 avatar Feb 24 '25 10:02 huangnan20030709

@huangnan20030709 能提供一个复现问题的环境吗

xile611 avatar Feb 25 '25 04:02 xile611

不行啊,这个10000条数据网络请求不能在其他环境,只能在本地环境请求

huangnan20030709 avatar Feb 25 '25 06:02 huangnan20030709

@huangnan20030709 可以建个github项目,或者上传一个能够跑起来的项目

xile611 avatar Feb 25 '25 06:02 xile611

等我一下

huangnan20030709 avatar Feb 25 '25 06:02 huangnan20030709

https://codesandbox.io/p/sandbox/mr7tlz 如果页面显示了10000条数据,交互动画就会卡顿,页面关闭了也就流畅了

huangnan20030709 avatar Feb 25 '25 06:02 huangnan20030709

Image

Image

规避措施:给每个图表配置一个Ticker可规避这个问题

原因:为了避免大量图表产生大量RAF调用,所以图表之间默认共用同一个Ticker。但是目前图表的dirtyBounds判定有问题,所以这个case里动画过程中同时也绘制了散点图 @huangnan20030709

neuqzxy avatar Feb 25 '25 08:02 neuqzxy

谢谢大佬,谢谢大佬

huangnan20030709 avatar Feb 25 '25 08:02 huangnan20030709

Image

Image

规避措施:给每个图表配置一个Ticker可规避这个问题

原因:为了避免大量图表产生大量RAF调用,所以图表之间默认共用同一个Ticker。但是目前图表的dirtyBounds判定有问题,所以这个case里动画过程中同时也绘制了散点图 @huangnan20030709

大佬这个方法在本地环境调用没问题,解决了卡顿, 但是到线上环境构建后,报错,排查到这里,一实例化这个类就会报错,

Image

Image

Image

Image

后续已解决:通过安装@visactor/vchart包下的同版本(0.21.15版本)的@visactor/vrender-core解决

huangnan20030709 avatar Feb 25 '25 11:02 huangnan20030709

@huangnan20030709 vchart 0.21.16版本已经没有这个问题了,可以升级试一下

neuqzxy avatar Mar 04 '25 11:03 neuqzxy

@huangnan20030709 vchart 0.21.16版本已经没有这个问题了,可以升级试一下

是不需要DefaultTicker了吗,谢谢

huangnan20030709 avatar Mar 04 '25 11:03 huangnan20030709

@huangnan20030709 vchart 0.21.16版本已经没有这个问题了,可以升级试一下

是不需要DefaultTicker了吗,谢谢

是的,vrender-core包可以删掉了,你可以试一下

neuqzxy avatar Mar 04 '25 12:03 neuqzxy