Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
huangnan20030709 opened this issue Feb 24, 2025 · 11 comments
Assignees

Comments

@huangnan20030709
Copy link

huangnan20030709 commented Feb 24, 2025

No description provided.

@huangnan20030709 huangnan20030709 changed the title 当项目显示了一次一万条数据的时候,图表的交互动画就变得很卡顿,在这之前不会卡顿 当项目显示了一次一万条数据的时候,图表的交互动画就变得很卡顿,在这之前不会卡顿。一万条数据的图表已经渲染完了,为什么和其他图表交互的时候会卡顿 Feb 24, 2025
@xile611
Copy link
Contributor

xile611 commented Feb 25, 2025

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

@huangnan20030709
Copy link
Author

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

@xile611
Copy link
Contributor

xile611 commented Feb 25, 2025

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

@huangnan20030709
Copy link
Author

等我一下

@huangnan20030709
Copy link
Author

huangnan20030709 commented Feb 25, 2025

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

@neuqzxy
Copy link
Contributor

neuqzxy commented Feb 25, 2025

Image

Image

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

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

@huangnan20030709
Copy link
Author

谢谢大佬,谢谢大佬

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

huangnan20030709 commented Feb 25, 2025

Image

Image

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

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

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

Image

Image

Image

Image

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

@neuqzxy
Copy link
Contributor

neuqzxy commented Mar 4, 2025

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

@huangnan20030709
Copy link
Author

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

是不需要DefaultTicker了吗,谢谢

@neuqzxy
Copy link
Contributor

neuqzxy commented Mar 4, 2025

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

是不需要DefaultTicker了吗,谢谢

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants