From a6b733df7e9632cf86480ceb1c01371365fcebff Mon Sep 17 00:00:00 2001 From: duanhao Date: Mon, 11 Aug 2025 15:35:45 +0800 Subject: [PATCH] 4 --- .../GroupEvolution/component/groupGraph.vue | 37 ++++++++++++++----- .../components/graph/bridgeCommunityGraph.vue | 22 +---------- .../components/communityNode.vue | 36 +++++++++++++++--- 3 files changed, 59 insertions(+), 36 deletions(-) diff --git a/src/views/GroupEvolution/component/groupGraph.vue b/src/views/GroupEvolution/component/groupGraph.vue index 32a0021..9d886f1 100644 --- a/src/views/GroupEvolution/component/groupGraph.vue +++ b/src/views/GroupEvolution/component/groupGraph.vue @@ -128,6 +128,8 @@ const registEvents = () => { } }) } + + const runDiffForceLayout = (layoutConfig, layoutType, isAsync) => { function handleLayoutSuccess() { //处理四个关系图的差异函数 @@ -204,7 +206,10 @@ const runDiffForceLayout = (layoutConfig, layoutType, isAsync) => { } ) } - graphVis.autoGroupLayout(graphVis.nodes) + // graphVis.autoGroupLayout(graphVis.nodes) + + + } new Map([ @@ -244,15 +249,20 @@ const clusterAnalyze = () => { node.fillColor = color node.color = color }) - graphVis.addNodesInGroup(nodes, { - shape: "circle", //circle|rect|polygon|bubbleset - color: color, - alpha: 0.2 - }) + if(storeId !== "anomalousGroup"){ + graphVis.addNodesInGroup(nodes, { + shape: "circle", //circle|rect|polygon|bubbleset + color: color, + alpha: 0.2 + }) + } + }) - graphVis.autoGroupLayout(graphVis.nodes) + // graphVis.autoGroupLayout(graphVis.nodes) + } + // 仅对“异常群体模块”生效：时间变化时强制重绘一次 if (storeId === "anomalousGroup") { watch( @@ -286,7 +296,12 @@ const initChart = () => { createGraph() graphVis.addGraph({ ...toRaw(graph.value) }) clusterAnalyze() - runDiffForceLayout({ strength: -500, ajustCluster: true }, "simulation", true) + if(storeId === "anomalousGroup"){ + runDiffForceLayout({ strength: -500, ajustCluster: true }, "simulation", true) + }else { + runDiffForceLayout({ strength: -500, ajustCluster: true }, "simulation", true) + } + } // 添加更新图表的函数 @@ -299,7 +314,11 @@ const updateChart = (newGraphData) => { graphVis.addGraph({ ...toRaw(newGraphData) }) // 重新运行力导向布局 clusterAnalyze() - runDiffForceLayout({ strength: -500, ajustCluster: true }, "simulation", true) + if(storeId === "anomalousGroup"){ + runDiffForceLayout({ strength: -500, ajustCluster: true }, "simulation", true) + }else { + runDiffForceLayout({ strength: -500, ajustCluster: true }, "simulation", true) + } } let lastLength = 0 //记录上一次的长度 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 } } } ]