fix: 桑基图样式优化

src/views/EventDetail/components/TransmissionChainAnalysis.js

@@ -339,20 +339,39 @@ function getGraphOption(data) {
   };
 }
 
-// 桑基图配置  
+// 桑基图配置
 function getSankeyOption(data) {
   if (!data || !data.nodes || !data.links) {
     return { title: { text: '暂无桑基图数据', left: 'center', top: 'center' } };
   }
 
-    return { 
+    return {
-    title: { text: '事件影响力传导流向', left: 'center', top: 10 },
+    title: {
-    tooltip: { 
+      text: '事件影响力传导流向',
-      trigger: 'item', 
+      left: 'center',
+      top: 10,
+      textStyle: {
+        color: '#00d2d3',
+        fontSize: 16,
+        fontWeight: 'bold'
+      }
+    },
+    tooltip: {
+      trigger: 'item',
       triggerOn: 'mousemove',
+      backgroundColor: 'rgba(30, 30, 30, 0.95)',
+      borderColor: '#444',
+      textStyle: {
+        color: '#fff'
+      },
       formatter: (params) => {
         if (params.dataType === 'node') {
-          return `<b>${params.name}</b><br/>类型: ${params.data.type || 'N/A'}<br/>层级: ${params.data.level || 'N/A'}<br/>点击查看详情`;
+          return `<div style="text-align: left;">` +
+                 `<b style="font-size: 14px; color: #fff;">${params.name}</b><br/>` +
+                 `<span style="color: #aaa;">类型:</span> <span style="color: #00d2d3;">${params.data.type || 'N/A'}</span><br/>` +
+                 `<span style="color: #aaa;">层级:</span> <span style="color: #ffd700;">${params.data.level || 'N/A'}</span><br/>` +
+                 `<span style="color: #4dabf7; text-decoration: underline; cursor: pointer;">🖱️ 点击查看详情</span>` +
+                 `</div>`;
         }
         return params.name;
       }
@@ -371,15 +390,67 @@ function getSankeyOption(data) {
           color: node.color,
           borderColor: node.level === 0 ? '#ffd700' : 'transparent',
           borderWidth: node.level === 0 ? 3 : 0
+        },
+        // 节点标签样式 - 突出显示，可点击感知
+        label: {
+          show: true,
+          color: '#fff',
+          fontSize: 13,
+          fontWeight: 'bold',
+          padding: [4, 8],
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          borderRadius: 4,
+          borderColor: 'rgba(255, 255, 255, 0.3)',
+          borderWidth: 1,
+          // 添加下划线效果表示可点击
+          rich: {
+            clickable: {
+              textDecoration: 'underline',
+              color: '#4dabf7'
+            }
+          }
         }
       })),
       links: data.links.map(link => ({
         source: data.nodes[link.source]?.name,
         target: data.nodes[link.target]?.name,
         value: link.value,
-        lineStyle: { color: 'source', opacity: 0.6, curveness: 0.5 }
+        // 降低链条透明度，让文字更突出
+        lineStyle: {
+          color: 'source',
+          opacity: 0.25,  // 从0.6降低到0.25
+          curveness: 0.5
+        }
       })),
-      label: { color: 'rgba(0,0,0,0.7)', fontSize: 12 }
+      // 全局标签样式
+      label: {
+        show: true,
+        position: 'right',
+        color: '#fff',
+        fontSize: 13,
+        fontWeight: 'bold',
+        padding: [4, 8],
+        backgroundColor: 'rgba(0, 0, 0, 0.6)',
+        borderRadius: 4,
+        borderColor: 'rgba(77, 171, 247, 0.5)',
+        borderWidth: 1,
+        formatter: '{b}'
+      },
+      // 高亮时的样式
+      emphasis: {
+        focus: 'adjacency',
+        label: {
+          color: '#4dabf7',
+          fontSize: 14,
+          fontWeight: 'bold',
+          backgroundColor: 'rgba(0, 0, 0, 0.8)',
+          borderColor: '#4dabf7',
+          borderWidth: 2
+        },
+        lineStyle: {
+          opacity: 0.5
+        }
+      }
     }]
   };
 }