From a85f87f3fca2d9e5278c077f472ea5ad2d6159e7 Mon Sep 17 00:00:00 2001
From: lai <371757574@qq.com>
Date: Tue, 19 Nov 2024 14:23:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B1=85=E4=B8=AD=E6=98=BE=E7=A4=BAtooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/perfManage/goldTarget/index.vue | 29 +++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/views/perfManage/goldTarget/index.vue b/src/views/perfManage/goldTarget/index.vue
index 76906d09..3d6eee32 100644
--- a/src/views/perfManage/goldTarget/index.vue
+++ b/src/views/perfManage/goldTarget/index.vue
@@ -43,7 +43,7 @@ import { generateColorRGBA } from '@/utils/generate-utils';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 import { useRoute } from 'vue-router';
 import { LineOutlined } from '@ant-design/icons-vue';
- const neInfoStore = useNeInfoStore();
+const neInfoStore = useNeInfoStore();
 const route = useRoute();
 const { t, currentLocale } = useI18n();
 const ws = new WS();
@@ -411,12 +411,33 @@ function fnRanderChart() {
   if (!container) return; //若没有，则退出函数
   kpiChart.value = markRaw(echarts.init(container, 'light'));
   //初始化Echarts图表实例，应用light主题，并赋值给kpiChart.value，markRaw是vue函数，用于标记对象为不可响应
-  const option: EChartsOption = {
+  const option: any = {
     //定义图表的配置对象，tooltip的出发方式为axis
     tooltip: {
       trigger: 'axis',
-      position: function (pt: any) {
-        return [pt[0], '10%'];
+      position: function (
+        point: number[],
+        size: { viewSize: number[]; contentSize: number[] }
+      ) {
+        const [x, y] = point;
+        const [viewWidth] = size.viewSize;
+        const [tooltipWidth, tooltipHeight] = size.contentSize;
+
+        // 距离右侧的距离
+        const rightSpace = viewWidth - x;
+
+        // 计算垂直方向的居中位置
+        // 将 tooltip 的中心点对齐到鼠标位置
+        const verticalOffset = -tooltipHeight / 2;
+
+        // 如果右侧空间不足以显示tooltip（假设需要20px的安全距离）
+        if (rightSpace < tooltipWidth + 20) {
+          // 向左显示，垂直居中
+          return [x - tooltipWidth - 10, y + verticalOffset];
+        }
+
+        // 默认向右显示，垂直居中
+        return [x + 10, y + verticalOffset];
       },
     },
     xAxis: {