style(图表): 地图、气泡地图、符号地图提示显示不全优化 #12254

core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts

@@ -57,6 +57,7 @@ export class BubbleMap extends L7PlotChartView<ChoroplethOptions, Choropleth> {
     if (!areaId) {
       return
     }
+    chart.container = container
     const geoJson = cloneDeep(await getGeoJsonFile(areaId))
     let options: ChoroplethOptions = {
       preserveDrawingBuffer: true,

core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts

@@ -80,6 +80,7 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
     if (!areaId) {
       return
     }
+    chart.container = container
     const sourceData = JSON.parse(JSON.stringify(chart.data?.data || []))
     let data = []
     const { misc } = parseJson(chart.customAttr)

core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts

@@ -345,6 +345,7 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
             background-color: ${tooltip.backgroundColor} !important;
             padding: 6px 10px 6px;
             line-height: 1.6;
+            border-top-left-radius: 3px;
           }
           #${container} .l7-popup-tip {
            border-top-color: ${tooltip.backgroundColor} !important;
@@ -353,7 +354,35 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
       document.head.appendChild(style)
       const htmlPrefix = `<div style='font-size:${tooltip.fontSize}px;color:${tooltip.color}'>`
       const htmlSuffix = '</div>'
+      const containerElement = document.getElementById(container)
+      if (containerElement) {
+        containerElement.addEventListener('mousemove', event => {
+          const rect = containerElement.getBoundingClientRect()
+          const mouseX = event.clientX - rect.left
+          const mouseY = event.clientY - rect.top
+          const tooltipElement = containerElement.getElementsByClassName('l7-popup')
+          for (let i = 0; i < tooltipElement?.length; i++) {
+            const element = tooltipElement[i] as HTMLElement
+            element.firstElementChild.style.display = 'none'
+            element.style.transform = 'translate(15px, 12px)'
+            const isNearRightEdge =
+              containerElement.clientWidth - mouseX <= element.clientWidth + 10
+            const isNearBottomEdge = containerElement.clientHeight - mouseY <= element.clientHeight
+            let transform = ''
+            if (isNearRightEdge) {
+              transform += 'translateX(-120%) translateY(15%) '
+            }
+            if (isNearBottomEdge) {
+              transform += 'translateX(15%) translateY(-80%) '
+            }
+            if (transform) {
+              element.style.transform = transform.trim()
+            }
+          }
+        })
+      }
       return new LayerPopup({
+        anchor: 'top-left',
         items: [
           {
             layer: pointLayer,

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

@@ -893,6 +893,30 @@ export function configL7Tooltip(chart: Chart): TooltipOptions {
       pre[next.id] = next
       return pre
     }, {}) as Record<string, SeriesFormatter>
+  const container = document.getElementById(chart.container)
+  if (container) {
+    container.addEventListener('mousemove', event => {
+      const rect = container.getBoundingClientRect()
+      const mouseX = event.clientX - rect.left
+      const mouseY = event.clientY - rect.top
+      const tooltipElement = container.getElementsByClassName('l7plot-tooltip-container')
+      for (let i = 0; i < tooltipElement?.length; i++) {
+        const element = tooltipElement[i] as HTMLElement
+        const isNearRightEdge = container.clientWidth - mouseX <= element.clientWidth
+        const isNearBottomEdge = container.clientHeight - mouseY <= element.clientHeight
+        let transform = ''
+        if (isNearRightEdge) {
+          transform += 'translateX(-120%) '
+        }
+        if (isNearBottomEdge) {
+          transform += 'translateY(-100%) '
+        }
+        if (transform) {
+          element.style.transform = transform.trim()
+        }
+      }
+    })
+  }
   return {
     customTitle(data) {
       return data.name