4

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, {
+    if(storeId !== "anomalousGroup"){
-      shape: "circle", //circle|rect|polygon|bubbleset
+      graphVis.addNodesInGroup(nodes, {
-      color: color,
+        shape: "circle", //circle|rect|polygon|bubbleset
-      alpha: 0.2
+        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 //记录上一次的长度

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({

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',      // 有了这个，才会触发“其他元素进入 blur 状态”
-          focus: "adjacency", // 高亮相邻节点
+          blurScope: 'series',     // 只在本系列里变暗
-          lineStyle: {
+          scale: false,            // 不要把节点放大，避免跳动
-            // 高亮时线条样式
+          lineStyle: {  opacity: 1 },
-            width: 5 // 线条宽度(10)
+          itemStyle: { opacity: 1 },
-          }
+          label: { opacity: 1 }
+        },
+        blur: {
+          // 非相邻元素进入“模糊/暗”状态时的样式（相当于“隐藏”）
+          lineStyle: { opacity: 0.05 },
+          itemStyle: { opacity: 0.1 },
+          label: { opacity: 0 }
         }
       }
     ]