OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

fix:tooltip计算修复

Browse Source
This commit is contained in:
zhongzm
2024-11-29 14:50:38 +08:00
parent b8b66fe610
commit 512bd6d8eb
1 changed files with 2 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/views/perfManage/kpiOverView/index.vue
View File

@@ -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)',