fix(图表): 优化提示轮播在编辑移动端是，显示不正确的问题，以及zIndex过高的问题，在部分浏览页无法轮播的问题。

jianneng-fit2cloud · jianneng-fit2cloud · commit b721c560347c · 2025-04-03T18:25:55.000+08:00
diff --git a/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts b/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts
@@ -113,6 +113,9 @@ class ChartCarouselTooltip {
   private init() {
     this.values = [].concat(this.getUniqueValues())
     if (!this.values.length) return
+    this.chartIsVisible = true
+    this.states.paused = false
+    this.states.destroyed = false
     this.bindEventListeners()
     this.startCarousel()
   }
@@ -193,7 +196,7 @@ class ChartCarouselTooltip {
     this.debounce(() => {
       this.stop()
       startNestedTimers()
-    }, 200)()
+    }, 300)()
   }
 
   /**
@@ -305,7 +308,19 @@ class ChartCarouselTooltip {
    *  绑定事件监听
    *  */
   private bindEventListeners() {
-    const { chart } = this.plot
+    let deCanvasElement = document.getElementById('de-canvas-canvas-main')
+    if (!deCanvasElement) {
+      deCanvasElement = document.getElementById('preview-canvas-main')
+    }
+    if (!deCanvasElement) {
+      deCanvasElement = document.getElementById('canvas-mark-line')
+    }
+    if (!deCanvasElement) {
+      this.unHighlightPoint()
+      this.hideTooltip()
+      this.setPaused(true)
+    }
+    deCanvasElement?.addEventListener('scroll', this.handleScroll.bind(this))
     const chartElement = document.getElementById(this.chart.container)
     chartElement.addEventListener('mouseenter', () => {
       this.unHighlightPoint()
@@ -315,24 +330,28 @@ class ChartCarouselTooltip {
 
     // 当鼠标离开 chart 时，检查状态
     chartElement.addEventListener('mouseleave', () => {
-      this.setPaused(false)
-    })
-
-    // 页面可见性控制
-    document.addEventListener('visibilitychange', () => {
-      if (document.visibilityState === 'hidden') {
-        this.unHighlightPoint()
-        this.hideTooltip()
-        this.setPaused(true)
-      } else if (this.chartIsVisible) {
+      if (deCanvasElement) {
         this.setPaused(false)
       }
     })
 
-    // 元素可视性观察（交叉观察器）
-    this.setupIntersectionObserver()
-    const deCanvasElement = document.getElementById('de-canvas-canvas-main')
-    deCanvasElement.addEventListener('scroll', this.handleScroll.bind(this))
+    if (deCanvasElement) {
+      // 页面可见性控制
+      document.addEventListener('visibilitychange', () => {
+        if (document.visibilityState === 'hidden') {
+          this.unHighlightPoint()
+          this.hideTooltip()
+          this.setPaused(true)
+        } else if (this.chartIsVisible) {
+          this.setPaused(false)
+        }
+      })
+    }
+
+    if (deCanvasElement) {
+      // 元素可视性观察（交叉观察器）
+      this.setupIntersectionObserver()
+    }
   }
 
   private handleScroll() {
diff --git 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
@@ -1714,7 +1714,12 @@ export function configPlotTooltipEvent<O extends PickOptions, P extends Plot<O>>
     return
   }
   // 图表容器，用于计算 tooltip 的位置
-  const chartElement = document.getElementById('shape-id-' + chart.id)
+  // 编辑时
+  let chartElement = document.getElementById('shape-id-' + chart.id)
+  if (!chartElement) {
+    // 公共连接时
+    chartElement = document.getElementById('enlarge-inner-content-' + chart.id)
+  }
   configCarouselTooltip(plot, chart)
   // 鼠标可移入, 移入之后保持显示, 移出之后隐藏
   plot.options.tooltip.container.addEventListener('mouseenter', e => {
@@ -1733,6 +1738,16 @@ export function configPlotTooltipEvent<O extends PickOptions, P extends Plot<O>>
       return
     }
     const event = plot.chart.interactions.tooltip?.context?.event
+    const isCarousel =
+      !event ||
+      event?.type === 'plot:leave' ||
+      ['pie', 'pie-rose', 'pie-donut'].includes(chart.type)
+    const wrapperDom = document.getElementById(G2_TOOLTIP_WRAPPER)
+    if (isCarousel && wrapperDom) {
+      wrapperDom.style.zIndex = '1'
+    } else {
+      wrapperDom.style.zIndex = '9999'
+    }
     if (tooltipCtl.tooltip) {
       // 处理视图放大后再关闭 tooltip 的 dom 被清除
       const container = tooltipCtl.tooltip.cfg.container
@@ -1751,18 +1766,15 @@ export function configPlotTooltipEvent<O extends PickOptions, P extends Plot<O>>
     plot.chart.getOptions().tooltip.follow = false
     tooltipCtl.title = Math.random().toString()
     // 当显示提示为事件触发时，使用event的client坐标，否则使用tooltipCtl.point 数据点的位置，在图表中，需要加上图表在绘制区的位置
-    const { x, y } =
-      !event ||
-      event?.type === 'plot:leave' ||
-      ['pie', 'pie-rose', 'pie-donut'].includes(chart.type)
-        ? {
-            x: tooltipCtl.point.x + Number(chartElement.getBoundingClientRect().left),
-            y:
-              60 +
-              Number(chartElement.getBoundingClientRect().top) +
-              Number(chartElement.style.height.split('px')[0]) / 2
-          }
-        : { x: event.clientX, y: event.clientY }
+    const { x, y } = isCarousel
+      ? {
+          x: tooltipCtl.point.x + Number(chartElement.getBoundingClientRect().left),
+          y:
+            60 +
+            Number(chartElement.getBoundingClientRect().top) +
+            Number(chartElement.style.height.split('px')[0]) / 2
+        }
+      : { x: event.clientX, y: event.clientY }
     plot.chart.getTheme().components.tooltip.x = x
     plot.chart.getTheme().components.tooltip.y = y
   })
