diff --git a/src/views/KeyNodeRecognition2/components/graph/bridgeCommunityGraph.vue b/src/views/KeyNodeRecognition2/components/graph/bridgeCommunityGraph.vue index 8cd6a65..153f5ac 100644 --- a/src/views/KeyNodeRecognition2/components/graph/bridgeCommunityGraph.vue +++ b/src/views/KeyNodeRecognition2/components/graph/bridgeCommunityGraph.vue @@ -174,16 +174,6 @@ const initChart = async() => { // 添加鼠标悬浮事件监听 chartInstance.on('mouseover', function(params) { if (!params.data) return; - /* const isBridgeNode = params.data.category === 0; - - if (isBridgeNode) { - // 如果是桥梁节点 - const nodeId = params.data.originalId; - // 无论当前是否有激活节点,都设置为当前节点 - activeNodeId.value = nodeId; - updateNodeImage(nodeId, true); - } */ - if (params.dataType === 'node') { // 仅节点时触发相邻高亮 chartInstance.dispatchAction({ @@ -192,7 +182,7 @@ const initChart = async() => { dataIndex: params.dataIndex }); - // 你已有的桥梁节点头像切换逻辑 + // 已有的桥梁节点头像切换逻辑 const isBridgeNode = params.data.category === 0; if (isBridgeNode) { const nodeId = params.data.originalId; @@ -203,7 +193,6 @@ const initChart = async() => { // 悬浮在边上:不高亮 chartInstance.dispatchAction({ type: 'unfocusNodeAdjacency', seriesIndex: SERIES_INDEX }); chartInstance.dispatchAction({ type: 'downplay', seriesIndex: SERIES_INDEX }); - // 也可以顺手关掉 tooltip(你 formatter 已经返回空字符串,其实也行) } }); @@ -211,15 +200,6 @@ const initChart = async() => { // 添加鼠标离开事件监听 chartInstance.on('mouseout', function(params) { if (!params.data) return; - /* const isBridgeNode = params.data.category === 0; - if (isBridgeNode) { - // 如果是桥梁节点 - const nodeId = params.data.originalId; - if (activeNodeId.value === nodeId) { - activeNodeId.value = null; - updateNodeImage(nodeId, false); - } - } */ if (params.dataType === 'node') { // 仅节点移出时取消相邻高亮 chartInstance.dispatchAction({ diff --git a/src/views/keyNodeRecognition3/components/communityNode.vue b/src/views/keyNodeRecognition3/components/communityNode.vue index 8dab593..b34c90f 100644 --- a/src/views/keyNodeRecognition3/components/communityNode.vue +++ b/src/views/keyNodeRecognition3/components/communityNode.vue @@ -51,6 +51,24 @@ const initChart = async () => { // 初始化图表 chart = echarts.init(document.getElementById("container")) + const SERIES_INDEX = 0; + // 添加鼠标悬浮事件监听 + chart.on('mouseover', function(params) { + if (!params.data) return; + if (params.dataType === 'node') { + // 仅节点时触发相邻高亮 + chart.dispatchAction({ + type: 'focusNodeAdjacency', + seriesIndex: SERIES_INDEX, + dataIndex: params.dataIndex + }); + } else if (params.dataType === 'edge') { + // 悬浮在边上:不高亮 + chart.dispatchAction({ type: 'unfocusNodeAdjacency', seriesIndex: SERIES_INDEX }); + chart.dispatchAction({ type: 'downplay', seriesIndex: SERIES_INDEX }); + } + }); + //处理data //统计每一个锚点在某些社团,这个社团包含锚点的个数(key: 社团id, value: 这个社团含有几个锚点) //统计每个社团包含的锚点id列表 @@ -267,12 +285,18 @@ const initChart = async () => { width: 1 }, emphasis: { - // 高亮配置 - focus: "adjacency", // 高亮相邻节点 - lineStyle: { - // 高亮时线条样式 - width: 5 // 线条宽度(10) - } + 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 } } } ]