居中显示tooltip

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: {