fix:修复图表tooltip显示被遮盖的问题
This commit is contained in:
@@ -32,7 +32,7 @@ const handleRealTimeSwitch = (checked: any) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 定义所有网元类型
|
// 定义所有网元类型
|
||||||
const ALL_NE_TYPES = ['ims', 'amf', 'udm', 'smf', 'pcf', 'upf', 'mme', 'mocngw', 'smsc', 'cbc', 'ausf'] as const;
|
const ALL_NE_TYPES = ['ims', 'amf', 'udm', 'upf','smf', 'pcf', 'mme', 'mocngw', 'smsc', 'cbc', 'ausf'] as const;
|
||||||
type AllChartType = (typeof ALL_NE_TYPES)[number] & string;
|
type AllChartType = (typeof ALL_NE_TYPES)[number] & string;
|
||||||
|
|
||||||
// 在 ALL_NE_TYPES 定义之后添加 小写转大写
|
// 在 ALL_NE_TYPES 定义之后添加 小写转大写
|
||||||
@@ -248,8 +248,26 @@ const initChart = (type: AllChartType) => {
|
|||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
position: function(pt: any) {
|
position: function(pt: any) {
|
||||||
return [pt[0], '10%'];
|
const [x, y] = pt;
|
||||||
|
const chartDom = state.chartDom.value;
|
||||||
|
if (!chartDom) return [x, y];
|
||||||
|
const rect = chartDom.getBoundingClientRect();
|
||||||
|
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
|
const viewportHeight = window.innerHeight;
|
||||||
|
const relativeY = rect.top + y - scrollTop;
|
||||||
|
if (relativeY + 100 > viewportHeight) {
|
||||||
|
return [x, '10%'];
|
||||||
|
}
|
||||||
|
return [x, y + 10];
|
||||||
},
|
},
|
||||||
|
axisPointer: {
|
||||||
|
type: 'line',
|
||||||
|
z: 0
|
||||||
|
},
|
||||||
|
className: `chart-tooltip-${type}`,
|
||||||
|
z: 1000,
|
||||||
|
extraCssText: 'z-index: 1000; pointer-events: none;',
|
||||||
|
confine: true,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
@@ -822,13 +840,14 @@ const handleTabChange = async (activeKey: string, type: AllChartType) => {
|
|||||||
.chart-card {
|
.chart-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 500px;
|
height: 500px;
|
||||||
|
position:relative;
|
||||||
|
|
||||||
:deep(.ant-card-body) {
|
:deep(.ant-card-body) {
|
||||||
height: calc(100% - 57px); // 减去卡片头部高度
|
height: calc(100% - 57px); // 减去卡片头部高度
|
||||||
padding: 16px !important;
|
padding: 16px !important;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user