antvis/G2

Do you want to work on this issue?

You can request for a bounty in order to promote it!

折线图开启大量labels会导致卡顿 #6573

CullenNg posted onGitHub

问题描述

场景:X轴600个 + 分组10个 + 开启 labels ; 即使 labels 开启了 overlapHide 也是会卡顿(比如拖动slider,没法很丝滑)

重现链接

https://codesandbox.io/p/sandbox/line-point-3xmy4x

重现步骤

No response

预期行为

不卡顿;

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


您提到在折线图中开启大量标签会导致卡顿的问题,即使开启了 overlapHide 选项。这个问题可能与图表渲染的性能有关,尤其是在处理大量数据点时。

以下是一些可能的优化建议:

  1. 减少标签数量:如果可能,尝试减少显示的标签数量。您可以通过设置标签的显示间隔来实现,例如每隔几个数据点显示一个标签。

  2. 使用虚拟滚动:如果数据量非常大,考虑使用虚拟滚动技术来只渲染可见区域的数据点。

  3. 优化图表配置:检查图表的其他配置项,确保没有不必要的开销。例如,检查是否有多余的动画效果或复杂的样式设置。

  4. 升级图表库版本:确保您使用的是最新版本的 antvis/G2,可能会包含性能改进。

  5. 浏览器性能:不同的浏览器可能对图表渲染有不同的性能表现,尝试在不同的浏览器中测试。

如果这些建议没有解决问题,可能需要进一步分析具体的代码实现和数据结构。如果您有更多的代码细节或具体的实现问题,可以提供更多信息以便我帮助您更好地解决问题。

<details> <summary>🪧 Tips</summary> For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me. </details>

posted by petercat-assistant[bot] 4 months ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests