解决BizCharts偶尔会有两个tooltip问题

1,212 阅读1分钟

背景:

项目依赖bizcharts ^4.0.7实现图表绘制,现有一chart图表需要使用自定义tooltip,但是出现了在图表未加载出来之前,鼠标覆盖上去会有默认的tooltip,且图表加载完成后,鼠标再覆盖上去,虽然能正确控制自定义tooltip的显示和隐藏,但是默认toolip会一直保留在页面上的问题

原因分析:

  1. 首先,我们通过查看元素,发现默认tooltip是·、G2的Tooltip( .g2-tooltip ),另外一个自定义tooltip是BizCharts的Tooltip( .bizcharts.bizcharts-tooltip )
    其中,G2是以数据驱动,具有高度的易用性和扩展性的可视化图形语法。而BizCharts是基于antv的G2进行了一层封装,并且实现按需加载,使得图表可以以组件的形式进行调用,方便我们在 React 环境下使用 G2。

  2. 有bizCharts-tooltip情况下,只有在图表未加载完成前鼠标覆盖图表才会出现g2-tooltip,并且在图表加载完成后,解除了g2-tooltip对鼠标覆盖移除事件的监听(即控制g2的tooltip的显隐)。

解决思路:

  1. 首先查找bizcharts库 issues,发现issue #1302: 自定义tooltip 偶尔会出现两个tooltip,与此问题相同,但是并没有查找到解决方案
  2. 官方提供了 props tooltip 来控制tooltip组件的显隐,我们可以将props tooltip初始设置为false,隐藏g2-tooltip组件,等到图表加载完成后,才将tooltip props设置true,显示.bizcharts-tooltip,这里我们使用官方提供的onGetG2Instance props来进行图表加载完成后的操作
    tooltip={isShowTooltip}
    onGetG2Instance={(c: any) => {
         setShowTooltip(true);
    }}
    
    (注:当前问题已在bizcharts ^4.0.15中解决)