🐛[BUG] Line 折线图自定义 tooltip 移动过程中频繁闪烁问题

[Jacky-Summer]

🐛 bug 描述

@ant-design/plots 为了支持 React 18，从1.1.1升级为 1.2.0 版本后，Line组件自定义 Tooltip 在移动时会频繁闪烁。

📷 复现步骤

1. 打开 Demo链接
2. 鼠标移动期间 Tooltip 频繁闪烁
3. 把@ant-design/plots 1.2.0 切换版本至 1.1.1，鼠标移动时 Tooltip 不闪烁

🏞 期望结果

鼠标移动期间 Tooltip 不闪烁，与1.1.1版本的效果一致

💻 复现代码

自定义 tooltip：

tooltip: {
      customContent: (title, data) => {
        return (
          <div style={{ width: "60px", height: "60px", background: "#000" }}>
            1234
          </div>
        );
      }
    }

复现链接：https://codesandbox.io/s/ant-design-plots-customtooltip-twinkle-bug-4hbeow?file=/src/App.js

© 版本信息

ant-design-charts 版本: [1.4.2] 的依赖"@ant-design/plots": "^1.0.2"，^在安装时会被自动升级到1.2.1版本，导致该bug

[lxfu1]

@visiky

[lxfu1]

删除node_modules重新安装一下

[Jacky-Summer]

删除node_modules重新安装一下

你好，试了并没有解决该问题，"@ant-design/plots"最新的版本还是 1.2.1，没有看到PR变动修复。

这个PR版本开始出了问题，https://github.com/ant-design/ant-design-charts/pull/1456/files

[lxfu1]

你应该是有lock文件，和上面这个PR无关，看下安装的 g2 是不是最新版本

[Jacky-Summer]

@ant-design/plots

在项目代码里面安装成最新版本了，依然还是会闪烁；然后我那个Demo一次性安装最新版本做例子的也会

[Jacky-Summer]

@ant-design/plots

在项目代码里面安装成最新版本了，依然还是会闪烁；然后我那个Demo一次性安装最新版本做例子的也会

想问这个有下文吗，安装的 g2 是最新版本了

[Darcrandex]

同样遇到这个问题，而且其他类型的图表也有这个问题。只要使用 customContent 就会出现闪烁。 希望官方团队关注一下，谢谢。

[lihuan-bot]

版本是1.1.1 不闪烁 但是 ooltip显示的位置不正常 目前 1.2.1 customContent也是闪烁

[Jacky-Summer]

是不是该重新打开这issue没解决😂，好像其他人也复现了 @lxfu1

[Jacky-Summer]

大佬有空关注下这个问题吗，切换版本试下就能复现的 @lxfu1 如果plots是最新版本，react18有事，react17没事

[visiky]

依赖的 @antv/component 是什么版本？

[Jacky-Summer]

依赖的 @antv/component 是什么版本？

@antv/component : 0.8.27，这个仓库我封装到私库里面。@ant-design/plots装的 1.2.1 业务项目1，使用react17：不闪烁 业务项目2，使用react18：闪烁

如果是react18的业务项目，使用@ant-design/plots：1.1.1不闪烁，使用1.2.1闪烁

[sunbaobao]

这个bug我今天遇到了 给你这个一样，不设置自定义tooltip停流畅，已设置就闪烁

[Wxw-Gu]

我也出现了..

[MICAHFANG]

我也出现了这个问题，希望官方抓紧修复下

[yxiangTang]

同样的问题，希望抓紧修复

[sawafish]

这个问题在最新版本上并没有解决啊

[lxfu1]

在 codesandbox 上提供个复现

[sawafish]

在 codesandbox 上提供个复现 https://codesandbox.io/s/hungry-sun-v685m4?file=/src/App.tsx 同样基于g2的bizcharts就没有这个问题

[lxfu1]

在 codesandbox 上提供个复现 https://codesandbox.io/s/hungry-sun-v685m4?file=/src/App.tsx 同样基于g2的bizcharts就没有这个问题

你地址没内容啊

[sawafish]

在 codesandbox 上提供个复现 https://codesandbox.io/s/hungry-sun-v685m4?file=/src/App.tsx 同样基于g2的bizcharts就没有这个问题

用useMemo似乎解决了问题，但是感觉图表更新的动画逻辑还是有问题，不应该引起闪烁，希望能够优化

[lxfu1]

https://codesandbox.io/s/suspicious-ride-wfvxy3?file=/src/App.tsx 不正常吗？

[sawafish]

https://codesandbox.io/s/suspicious-ride-wfvxy3?file=/src/App.tsx 不正常吗？ 时间问题我没有表述清楚，我是自定义了tooltip，通过上述示例代码中setTooltipPosition得到plot实例，然后在其他逻辑需要频繁去更新自定义tooltip位置，导致图表闪烁