fix(图表): 修复移动端图表首次点击元素时不显示提示框 #18103

2026-06-10 23:09:59 +08:00 · 2026-03-19 18:30:12 +08:00
parent f93a05cee4
commit e3a750c977
16 changed files with 33 additions and 24 deletions
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts
@@ -486,7 +486,7 @@ export class StackBar extends Bar {
        obj.value = res ?? ''
        return obj
      },
-      container: getTooltipContainer(`tooltip-${chart.id}`),
+      container: getTooltipContainer(`tooltip-${chart.id}`, chart.container),
      itemTpl: TOOLTIP_TPL,
      enterable: true
    }
@@ -892,7 +892,7 @@ export class GroupStackBar extends StackBar {
        obj.value = valueFormatter(param.value, tooltipAttr.tooltipFormatter)
        return obj
      },
-      container: getTooltipContainer(`tooltip-${chart.id}`),
+      container: getTooltipContainer(`tooltip-${chart.id}`, chart.container),
      itemTpl: TOOLTIP_TPL,
      enterable: true
    }
@@ -978,7 +978,7 @@ export class PercentageStackBar extends GroupStackBar {
        obj.value = (Math.round(param.value * 10000) / 100).toFixed(l.reserveDecimalCount) + '%'
        return obj
      },
-      container: getTooltipContainer(`tooltip-${chart.id}`),
+      container: getTooltipContainer(`tooltip-${chart.id}`, chart.container),
      itemTpl: TOOLTIP_TPL,
      enterable: true
    }
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts
@@ -306,7 +306,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
        }
        return result
      },
-      container: getTooltipContainer(`tooltip-${chart.id}`),
+      container: getTooltipContainer(`tooltip-${chart.id}`, chart.container),
      itemTpl: TOOLTIP_TPL,
      enterable: true
    }
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bullet-graph.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bullet-graph.ts
@@ -434,7 +434,7 @@ export class BulletGraph extends G2PlotChartView<G2BulletOptions, G2Bullet> {
        result.sort((a, b) => (a.color === 'grey' ? 1 : b.color === 'grey' ? -1 : 0))
        return result
      },
-      container: getTooltipContainer(`tooltip-${chart.id}`),
+      container: getTooltipContainer(`tooltip-${chart.id}`, chart.container),
      itemTpl: TOOLTIP_TPL,
      enterable: true
    }
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts
@@ -435,7 +435,7 @@ export class HorizontalStackBar extends HorizontalBar {
        obj.value = res ?? ''
        return obj
      },
-      container: getTooltipContainer(`tooltip-${chart.id}`),
+      container: getTooltipContainer(`tooltip-${chart.id}`, chart.container),
      itemTpl: TOOLTIP_TPL,
      enterable: true
    }
@@ -695,7 +695,7 @@ export class HorizontalPercentageStackBar extends HorizontalStackBar {
        obj.value = (Math.round(param.value * 10000) / 100).toFixed(l.reserveDecimalCount) + '%'
        return obj
      },
-      container: getTooltipContainer(`tooltip-${chart.id}`),
+      container: getTooltipContainer(`tooltip-${chart.id}`, chart.container),
      itemTpl: TOOLTIP_TPL,
      enterable: true
    }
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts
@@ -249,7 +249,7 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
          })
          return result.length == 0 ? originalItems : result
        },
-        container: getTooltipContainer(`tooltip-${chart.id}`),
+        container: getTooltipContainer(`tooltip-${chart.id}`, chart.container),
        itemTpl: TOOLTIP_TPL,
        enterable: true
      }
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts
@@ -256,7 +256,7 @@ export class RangeBar extends G2PlotChartView<BarOptions, Bar> {
              }
              return { value: res, values: param.values, name: param.field }
            },
-            container: getTooltipContainer(`tooltip-${chart.id}`),
+            container: getTooltipContainer(`tooltip-${chart.id}`, chart.container),
            itemTpl: TOOLTIP_TPL,
            enterable: true
          }
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts
@@ -247,7 +247,7 @@ export class Waterfall extends G2PlotChartView<WaterfallOptions, G2Waterfall> {
        })
        return result
      },
-      container: getTooltipContainer(`tooltip-${chart.id}`),
+      container: getTooltipContainer(`tooltip-${chart.id}`, chart.container),
      itemTpl: TOOLTIP_TPL,
      enterable: true
    }
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts
@@ -385,7 +385,7 @@ export class StackArea extends Area {
        }
        return obj
      },
-      container: getTooltipContainer(`tooltip-${chart.id}`),
+      container: getTooltipContainer(`tooltip-${chart.id}`, chart.container),
      itemTpl: TOOLTIP_TPL,
      enterable: true
    }
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts
@@ -311,7 +311,7 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
        })
        return result
      },
-      container: getTooltipContainer(`tooltip-${chart.id}`),
+      container: getTooltipContainer(`tooltip-${chart.id}`, chart.container),
      itemTpl: TOOLTIP_TPL,
      enterable: true
    }
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts
@@ -576,7 +576,7 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
        })
        return result
      },
-      container: getTooltipContainer(`tooltip-${chart.id}`),
+      container: getTooltipContainer(`tooltip-${chart.id}`, chart.container),
      itemTpl: TOOLTIP_TPL,
      enterable: true
    }
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts
@@ -403,7 +403,7 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
        }
        return result
      },
-      container: getTooltipContainer(`tooltip-${chart.id}`),
+      container: getTooltipContainer(`tooltip-${chart.id}`, chart.container),
      itemTpl: TOOLTIP_TPL,
      enterable: true
    }
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts
@@ -259,7 +259,7 @@ export class Scatter extends G2PlotChartView<ScatterOptions, G2Scatter> {
        })
        return result
      },
-      container: getTooltipContainer(`tooltip-${chart.id}`),
+      container: getTooltipContainer(`tooltip-${chart.id}`, chart.container),
      itemTpl: TOOLTIP_TPL,
      enterable: true
    }
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts
@@ -259,7 +259,7 @@ export class Pie extends G2PlotChartView<PieOptions, G2Pie> {
        })
        return result
      },
-      container: getTooltipContainer(`tooltip-${chart.id}`),
+      container: getTooltipContainer(`tooltip-${chart.id}`, chart.container),
      itemTpl: TOOLTIP_TPL,
      shared: true,
      enterable: true
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts
@@ -218,7 +218,7 @@ export class Rose extends G2PlotChartView<RoseOptions, G2Rose> {
        })
        return result
      },
-      container: getTooltipContainer(`tooltip-${chart.id}`),
+      container: getTooltipContainer(`tooltip-${chart.id}`, chart.container),
      itemTpl: TOOLTIP_TPL,
      enterable: true
    }
--- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
@@ -259,7 +259,7 @@ export function getTooltip(chart: Chart) {
            const value = valueFormatter(param.value, t.tooltipFormatter)
            return { name: param.field, value }
          },
-          container: getTooltipContainer(`tooltip-${chart.id}`),
+          container: getTooltipContainer(`tooltip-${chart.id}`, chart.container),
          itemTpl: TOOLTIP_TPL,
          enterable: true
        }
@@ -314,7 +314,7 @@ export function getMultiSeriesTooltip(chart: Chart) {
      })
      return result
    },
-    container: getTooltipContainer(`tooltip-${chart.id}`),
+    container: getTooltipContainer(`tooltip-${chart.id}`, chart.container),
    itemTpl: TOOLTIP_TPL,
    enterable: true
  }
@@ -1689,7 +1689,7 @@ function shouldHideZoom(basicStyle: any): boolean {
 }

 const G2_TOOLTIP_WRAPPER = 'g2-tooltip-wrapper'
-export function getTooltipContainer(id) {
+export function getTooltipContainer(id, chartContainer?: string) {
  let wrapperDom = document.getElementById(G2_TOOLTIP_WRAPPER)
  if (!wrapperDom) {
    wrapperDom = document.createElement('div')
@@ -1713,6 +1713,14 @@ export function getTooltipContainer(id) {
  g2Tooltip.style.position = 'fixed'
  g2Tooltip.style.left = '0px'
  g2Tooltip.style.top = '0px'
+  if (chartContainer) {
+    const chartDom = document.getElementById(chartContainer)
+    if (chartDom) {
+      const rect = chartDom.getBoundingClientRect()
+      g2Tooltip.style.left = rect.x + 'px'
+      g2Tooltip.style.top = rect.y + 'px'
+    }
+  }
  const g2TooltipTitle = document.createElement('div')
  g2TooltipTitle.classList.add('g2-tooltip-title')
  g2Tooltip.appendChild(g2TooltipTitle)
@@ -1842,9 +1850,9 @@ export function configPlotTooltipEvent<O extends PickOptions, P extends Plot<O>>
    plot.options.tooltip.showMarkers = isCarousel ? true : false
    const wrapperDom = document.getElementById(G2_TOOLTIP_WRAPPER)
    wrapperDom.style.zIndex = isCarousel && wrapperDom ? carousel_zIndex : '9999'
-    if (tooltipCtl.tooltip) {
-      // 处理视图放大后再关闭 tooltip 的 dom 被清除
-      const container = tooltipCtl.tooltip.cfg.container
+    // 处理视图放大后再关闭 tooltip 的 dom 被清除
+    const container = plot.chart.getOptions().tooltip?.container
+    if (container) {
      // 当下拉菜单不显示时，移除tooltip的hidden-tooltip样式
      if (viewTrackBarElement?.getAttribute('aria-expanded') === 'false') {
        container.classList.toggle('hidden-tooltip', false)
@@ -1890,7 +1898,7 @@ export function configPlotTooltipEvent<O extends PickOptions, P extends Plot<O>>
      if (!tooltipCtl) {
        return
      }
-      const container = tooltipCtl.tooltip?.cfg.container
+      const container = plot.chart.getOptions().tooltip?.container
      for (const ele of wrapperDom.children) {
        if (!container || container.id !== ele.id) {
          ele.style.display = 'none'
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
@@ -361,6 +361,7 @@ const renderG2Plot = async (chart, chartView: G2PlotChartView<any, any>) => {
      // 在这里清理掉之前图表的空dom
      configEmptyDataStyle([1], containerId)
      myChart?.destroy()
+      chart.container = containerId
      myChart = await chartView.drawChart({
        chartObj: myChart,
        container: containerId,