fix(图表): 修复移动端图表提示无法正常隐藏 #15117 (#15275)

core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts

@@ -1467,14 +1467,22 @@ export function configPlotTooltipEvent<O extends PickOptions, P extends Plot<O>>
       if (!tooltipCtl) {
         return
       }
-      const container = tooltipCtl.tooltip.cfg.container
+      const container = tooltipCtl.tooltip?.cfg.container
       for (const ele of wrapperDom.children) {
-        if (container.id !== ele.id) {
+        if (!container || container.id !== ele.id) {
           ele.style.display = 'none'
         }
       }
     }
   })
+  plot.on('tooltip:hidden', () => {
+    const tooltipCtl = plot.chart.getController('tooltip')
+    if (!tooltipCtl) {
+      return
+    }
+    const container = tooltipCtl.tooltip?.cfg.container
+    container && (container.style.display = 'none')
+  })
 }
 
 export const TOOLTIP_TPL =

core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue

@@ -742,6 +742,7 @@ defineExpose({
   trackMenu,
   clearLinkage
 })
+let intersectionObserver
 let resizeObserver
 const TOLERANCE = 0.01
 const RESIZE_MONITOR_CHARTS = ['map', 'bubble-map', 'flow-map', 'heat-map']
@@ -766,6 +767,15 @@ onMounted(() => {
     preSize[1] = size.blockSize
   })
   resizeObserver.observe(containerDom)
+  intersectionObserver = new IntersectionObserver(([entry]) => {
+    if (RESIZE_MONITOR_CHARTS.includes(view.value.type)) {
+      return
+    }
+    if (entry.intersectionRatio <= 0) {
+      myChart?.emit('tooltip:hidden')
+    }
+  })
+  intersectionObserver.observe(containerDom)
   useEmitt({ name: 'l7-prepare-picture', callback: preparePicture })
   useEmitt({ name: 'l7-unprepare-picture', callback: unPreparePicture })
 })
@@ -773,6 +783,7 @@ onBeforeUnmount(() => {
   try {
     myChart?.destroy()
     resizeObserver?.disconnect()
+    intersectionObserver?.disconnect()
   } catch (e) {
     console.warn(e)
   }

core/core-frontend/src/views/chart/components/views/index.vue

@@ -1028,6 +1028,14 @@ const titleTooltipWidth = computed(() => {
   }
   return '500px'
 })
+const clearG2Tooltip = () => {
+  const g2TooltipWrapper = document.getElementById('g2-tooltip-wrapper')
+  if (g2TooltipWrapper) {
+    for (const ele of g2TooltipWrapper.children) {
+      ele.style.display = 'none'
+    }
+  }
+}
 </script>
 
 <template>
@@ -1168,6 +1176,7 @@ const titleTooltipWidth = computed(() => {
         :show-position="showPosition"
         :suffixId="suffixId"
         :font-family="fontFamily"
+        @touchstart="clearG2Tooltip"
       />
       <chart-component-g2-plot
         :scale="scale"