桥梁节点边闪烁问题解决
This commit is contained in:
parent
4e2a986115
commit
ee2cb53385
Binary file not shown.
|
Before Width: | Height: | Size: 256 B After Width: | Height: | Size: 495 B |
Binary file not shown.
|
After Width: | Height: | Size: 470 B |
|
|
@ -6,7 +6,7 @@
|
|||
<div class="group-item-title">
|
||||
<img
|
||||
class="group-item-title-icon"
|
||||
src="@/assets/images/abnormalGroup/abnormal-group-item-title.png"
|
||||
src="@/assets/images/abnormalGroup/abnormal-user-group-item-title.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="group-item-title-type">{{ group.type }}</div>
|
||||
|
|
@ -68,7 +68,7 @@ const props = defineProps({
|
|||
.groupPanel-list {
|
||||
width: 100%;
|
||||
height: 470px;
|
||||
padding: 20px 20px;
|
||||
padding: 0px 20px;
|
||||
overflow: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 3px; /* 垂直滚动条宽度 */
|
||||
|
|
@ -83,6 +83,7 @@ const props = defineProps({
|
|||
}
|
||||
.group-item {
|
||||
width: 100%;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 0.5px solid rgba(0, 113, 188, 0.5);
|
||||
.group-item-title {
|
||||
|
|
|
|||
|
|
@ -321,8 +321,8 @@ onBeforeUnmount(() => {
|
|||
position: relative;
|
||||
.title-text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
left: 12px;
|
||||
color: #8efbff;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ const processData = async() => {
|
|||
id: bridgeNodeId,
|
||||
category: 0,
|
||||
symbol: bridgeNodeImg ? `image://${bridgeNodeImg}` : 'circle',
|
||||
symbolSize: 100,
|
||||
symbolSize: 150,
|
||||
originalId: bridgeId // 存储原始ID用于识别
|
||||
});
|
||||
addedBridgeNodes.add(bridgeId);
|
||||
|
|
@ -169,11 +169,12 @@ const initChart = async() => {
|
|||
|
||||
chartInstance = echarts.init(chartDom);
|
||||
|
||||
const SERIES_INDEX = 0;
|
||||
|
||||
// 添加鼠标悬浮事件监听
|
||||
chartInstance.on('mouseover', function(params) {
|
||||
if (!params.data) return;
|
||||
const isBridgeNode = params.data.category === 0;
|
||||
const isCommunityNode = params.data.category === 1;
|
||||
/* const isBridgeNode = params.data.category === 0;
|
||||
|
||||
if (isBridgeNode) {
|
||||
// 如果是桥梁节点
|
||||
|
|
@ -181,6 +182,28 @@ const initChart = async() => {
|
|||
// 无论当前是否有激活节点，都设置为当前节点
|
||||
activeNodeId.value = nodeId;
|
||||
updateNodeImage(nodeId, true);
|
||||
} */
|
||||
|
||||
if (params.dataType === 'node') {
|
||||
// 仅节点时触发相邻高亮
|
||||
chartInstance.dispatchAction({
|
||||
type: 'focusNodeAdjacency',
|
||||
seriesIndex: SERIES_INDEX,
|
||||
dataIndex: params.dataIndex
|
||||
});
|
||||
|
||||
// 你已有的桥梁节点头像切换逻辑
|
||||
const isBridgeNode = params.data.category === 0;
|
||||
if (isBridgeNode) {
|
||||
const nodeId = params.data.originalId;
|
||||
activeNodeId.value = nodeId;
|
||||
updateNodeImage(nodeId, true);
|
||||
}
|
||||
} else if (params.dataType === 'edge') {
|
||||
// 悬浮在边上：不高亮
|
||||
chartInstance.dispatchAction({ type: 'unfocusNodeAdjacency', seriesIndex: SERIES_INDEX });
|
||||
chartInstance.dispatchAction({ type: 'downplay', seriesIndex: SERIES_INDEX });
|
||||
// 也可以顺手关掉 tooltip（你 formatter 已经返回空字符串，其实也行）
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -188,9 +211,7 @@ const initChart = async() => {
|
|||
// 添加鼠标离开事件监听
|
||||
chartInstance.on('mouseout', function(params) {
|
||||
if (!params.data) return;
|
||||
const isBridgeNode = params.data.category === 0;
|
||||
const isCommunityNode = params.data.category === 1;
|
||||
|
||||
/* const isBridgeNode = params.data.category === 0;
|
||||
if (isBridgeNode) {
|
||||
// 如果是桥梁节点
|
||||
const nodeId = params.data.originalId;
|
||||
|
|
@ -198,6 +219,29 @@ const initChart = async() => {
|
|||
activeNodeId.value = null;
|
||||
updateNodeImage(nodeId, false);
|
||||
}
|
||||
} */
|
||||
if (params.dataType === 'node') {
|
||||
// 仅节点移出时取消相邻高亮
|
||||
chartInstance.dispatchAction({
|
||||
type: 'unfocusNodeAdjacency',
|
||||
seriesIndex: SERIES_INDEX
|
||||
});
|
||||
|
||||
// 你已有的桥梁节点头像还原逻辑
|
||||
const isBridgeNode = params.data.category === 0;
|
||||
if (isBridgeNode) {
|
||||
const nodeId = params.data.originalId;
|
||||
if (activeNodeId.value === nodeId) {
|
||||
activeNodeId.value = null;
|
||||
updateNodeImage(nodeId, false);
|
||||
}
|
||||
}
|
||||
} else if (params.dataType === 'edge') {
|
||||
// 从边移出也确保没有残留高亮
|
||||
chartInstance.dispatchAction({
|
||||
type: 'unfocusNodeAdjacency',
|
||||
seriesIndex: SERIES_INDEX
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -390,13 +434,20 @@ const initChart = async() => {
|
|||
},
|
||||
animationDurationUpdate: 3500, // 节点移动更平滑
|
||||
animationEasingUpdate: 'quinticInOut',
|
||||
emphasis: { // 高亮配置
|
||||
focus: 'adjacency', // 高亮相邻节点
|
||||
blurScope: 'coordinateSystem', // 失去焦点时取消所有高亮
|
||||
lineStyle: { // 高亮时线条样式
|
||||
width: 10 // 线条宽度(10)
|
||||
}
|
||||
emphasis: {
|
||||
focus: 'adjacency', // 有了这个，才会触发“其他元素进入 blur 状态”
|
||||
blurScope: 'series', // 只在本系列里变暗
|
||||
scale: false, // 不要把节点放大，避免跳动
|
||||
lineStyle: { opacity: 1 },
|
||||
itemStyle: { opacity: 1 },
|
||||
label: { opacity: 1 }
|
||||
},
|
||||
blur: {
|
||||
// 非相邻元素进入“模糊/暗”状态时的样式（相当于“隐藏”）
|
||||
lineStyle: { opacity: 0.05 },
|
||||
itemStyle: { opacity: 0.1 },
|
||||
label: { opacity: 0 }
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -70,6 +70,52 @@ const initChart = async () => {
|
|||
|
||||
chart = echarts.init(detailContainer.value);
|
||||
|
||||
|
||||
const SERIES_INDEX = 0;
|
||||
|
||||
// 仅在节点上触发“相邻高亮”，并把其它元素降为 blur（已由 series.blur 定义）
|
||||
chart.on('mouseover', 'series.graph', function (params) {
|
||||
if (!params.data) return;
|
||||
|
||||
if (params.dataType === 'node') {
|
||||
chart.dispatchAction({
|
||||
type: 'focusNodeAdjacency',
|
||||
seriesIndex: SERIES_INDEX,
|
||||
dataIndex: params.dataIndex
|
||||
});
|
||||
|
||||
// 你的桥梁节点换头像逻辑
|
||||
if (params.data.category === 0) {
|
||||
activeNodeId.value = params.data.originalId;
|
||||
updateNodeImage(bridgeNodeImages);
|
||||
}
|
||||
|
||||
} else if (params.dataType === 'edge') {
|
||||
// 悬浮在“边”上：不做任何强调，立刻撤销
|
||||
chart.dispatchAction({ type: 'unfocusNodeAdjacency', seriesIndex: SERIES_INDEX });
|
||||
chart.dispatchAction({ type: 'downplay', seriesIndex: SERIES_INDEX });
|
||||
}
|
||||
});
|
||||
|
||||
chart.on('mouseout', 'series.graph', function (params) {
|
||||
if (!params.data) return;
|
||||
|
||||
if (params.dataType === 'node') {
|
||||
chart.dispatchAction({ type: 'unfocusNodeAdjacency', seriesIndex: SERIES_INDEX });
|
||||
|
||||
if (params.data.category === 0) {
|
||||
// 还原桥梁节点头像
|
||||
if (activeNodeId.value === params.data.originalId) {
|
||||
activeNodeId.value = '';
|
||||
updateNodeImage(bridgeNodeImages);
|
||||
}
|
||||
}
|
||||
|
||||
} else if (params.dataType === 'edge') {
|
||||
chart.dispatchAction({ type: 'unfocusNodeAdjacency', seriesIndex: SERIES_INDEX });
|
||||
}
|
||||
});
|
||||
|
||||
// 点击桥梁节点->弹窗显示桥梁节点的详情
|
||||
chart.on('click', function(params){
|
||||
// 如果是桥梁节点
|
||||
|
|
@ -159,7 +205,7 @@ const initChart = async () => {
|
|||
if (isBridgeNode) {
|
||||
const images = bridgeNodeImages.get(userIdStr);
|
||||
symbol = images.defImg ? `image://${images.defImg}` : 'circle';
|
||||
symbolSize = 60;
|
||||
symbolSize = 150;
|
||||
// 查找对应的leader数据
|
||||
const leaderData = keyNodeStore2.allLeaderData.find(leader => String(leader.nodeId) === userIdStr);
|
||||
if (leaderData) {
|
||||
|
|
@ -233,6 +279,7 @@ const initChart = async () => {
|
|||
borderWidth: 0,
|
||||
extraCssText: "box-shadow:none;padding:0;",
|
||||
formatter: function (params) {
|
||||
if (params.dataType === 'edge') return '';
|
||||
if (params.dataType === "node" && params.data.category === 0) {
|
||||
return `<div
|
||||
style="
|
||||
|
|
@ -356,16 +403,24 @@ const initChart = async () => {
|
|||
{ offset: 0.9, color: '#0578b0' }
|
||||
]),
|
||||
curveness: 0,
|
||||
with: 2,
|
||||
width: 2,
|
||||
type: 'solid',
|
||||
opacity: 1,
|
||||
},
|
||||
emphasis: { // 高亮配置
|
||||
focus: 'adjacency', // 高亮相邻节点
|
||||
lineStyle: { // 高亮时线条样式
|
||||
width: 10 // 线条宽度(10)
|
||||
}
|
||||
emphasis: {
|
||||
focus: 'adjacency', // 触发“其他元素进入 blur 状态”
|
||||
blurScope: 'series', // 只在本系列里变暗
|
||||
scale: false, // 不要把节点放大，避免跳动
|
||||
lineStyle: { opacity: 1 },
|
||||
itemStyle: { opacity: 1 },
|
||||
label: { opacity: 1 }
|
||||
},
|
||||
blur: {
|
||||
// 非相邻元素进入“模糊/暗”状态时的样式（相当于“隐藏”）
|
||||
lineStyle: { opacity: 0.05 },
|
||||
itemStyle: { opacity: 0.1 },
|
||||
label: { opacity: 0 }
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user