Merge pull request #8945 from dataease/pr@dev@fix_antv_interaction_btn_covered

fix(视图): AntV 横向柱状图配置多个互动方式顶部会出现遮挡

core/frontend/src/views/chart/chart/util.js

@@ -3936,3 +3936,26 @@ export function parseJson(target) {
   }
   return JSON.parse(JSON.stringify(target))
 }
+
+export function adjustPosition(targetDom, parentDom, clickPosition, offset, initSize) {
+  const { clientHeight: targetHeight, clientWidth: targetWidth } = targetDom
+  const { clientHeight: parentHeight, clientWidth: parentWidth } = parentDom
+  const { x, y } = clickPosition
+  const { x: offsetX, y: offsetY } = offset
+  const result = {
+    x: offsetX ? x + offsetX : x,
+    y: offsetY ? y + offsetY : y
+  }
+  const width = targetWidth ? targetWidth : initSize.width
+  const height = targetHeight ? targetHeight : initSize.height
+  if ( result.x + width > parentWidth ) {
+    result.x = parentWidth - width
+  }
+  if (result.y + height > parentHeight) {
+    result.y = parentHeight - height
+  }
+  if (result.y - height < 0) {
+    result.y = height
+  }
+  return result
+}

core/frontend/src/views/chart/components/ChartComponentG2.vue

@@ -32,6 +32,7 @@
       </div>
     </span>
     <div
+      ref="chart"
       :id="chartId"
       style="width: 100%;overflow: hidden;"
       :style="{height:chartHeight}"
@@ -43,7 +44,7 @@
 import { baseLiquid } from '@/views/chart/chart/liquid/liquid'
 import { uuid } from 'vue-uuid'
 import ViewTrackBar from '@/components/canvas/components/editor/ViewTrackBar'
-import { getRemark, hexColorToRGBA } from '@/views/chart/chart/util'
+import { adjustPosition, getRemark, hexColorToRGBA } from '@/views/chart/chart/util'
 import { baseBarOptionAntV, hBaseBarOptionAntV, baseBidirectionalBarOptionAntV, timeRangeBarOptionAntV } from '@/views/chart/chart/bar/bar_antv'
 import { baseAreaOptionAntV, baseLineOptionAntV } from '@/views/chart/chart/line/line_antv'
 import { basePieOptionAntV, basePieRoseOptionAntV } from '@/views/chart/chart/pie/pie_antv'
@@ -345,9 +346,27 @@ export default {
       }
       if (this.trackMenu.length < 2) { // 只有一个事件直接调用
         this.trackClick(this.trackMenu[0])
-      } else { // 视图关联多个事件
+      } else {
-        this.trackBarStyle.left = param.x + 'px'
+        // 视图关联多个事件
-        this.trackBarStyle.top = (param.y + 10) + 'px'
+        const menuDom = this.$refs.viewTrack.$el.getElementsByClassName("track-menu")?.[0]
+        const chartDom = this.$refs.chart
+        let position = {
+          x: param.x,
+          y: param.y
+        }
+        const offset = {
+          x: 0,
+          y: 10
+        }
+        const initSize = {
+          width: 80,
+          height: 76
+        }
+        if (menuDom && chartDom) {
+          position = adjustPosition(menuDom, chartDom, param, offset, initSize)
+        }
+        this.trackBarStyle.left = position.x + 'px'
+        this.trackBarStyle.top = position.y + 'px'
         this.$refs.viewTrack.trackButtonClick()
       }
     },