From 512bd6d8eb1a49f6fce9115f31928b81c0c608c2 Mon Sep 17 00:00:00 2001 From: zhongzm Date: Fri, 29 Nov 2024 14:50:38 +0800 Subject: [PATCH] =?UTF-8?q?fix:tooltip=E8=AE=A1=E7=AE=97=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/perfManage/kpiOverView/index.vue | 44 +--------------------- 1 file changed, 2 insertions(+), 42 deletions(-) diff --git a/src/views/perfManage/kpiOverView/index.vue b/src/views/perfManage/kpiOverView/index.vue index d67c657b..cfe61e6c 100644 --- a/src/views/perfManage/kpiOverView/index.vue +++ b/src/views/perfManage/kpiOverView/index.vue @@ -358,27 +358,7 @@ const themeObserver = new MutationObserver(() => { }, tooltip: { trigger: 'axis', - 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]; - }, + confine: true, // 限制 tooltip 显示范围 backgroundColor: document.documentElement.getAttribute('data-theme') === 'dark' ? 'rgba(48, 48, 48, 0.8)' : 'rgba(255, 255, 255, 0.9)', @@ -442,27 +422,7 @@ const updateChart = () => { }, tooltip: { trigger: 'axis', - 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]; - }, + confine: true, // 限制 tooltip 显示范围 backgroundColor: document.documentElement.getAttribute('data-theme') === 'dark' ? 'rgba(48, 48, 48, 0.8)' : 'rgba(255, 255, 255, 0.9)',