diff --git a/src/views/EventDetail/components/TransmissionChainAnalysis.js b/src/views/EventDetail/components/TransmissionChainAnalysis.js
index f87efc8c..c9ce0085 100644
--- a/src/views/EventDetail/components/TransmissionChainAnalysis.js
+++ b/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 {
- title: { text: '事件影响力传导流向', left: 'center', top: 10 },
- tooltip: {
- trigger: 'item',
+ return {
+ title: {
+ text: '事件影响力传导流向',
+ 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 `${params.name}
类型: ${params.data.type || 'N/A'}
层级: ${params.data.level || 'N/A'}
点击查看详情`;
+ return `
` +
+ `${params.name}
` +
+ `类型: ${params.data.type || 'N/A'}
` +
+ `层级: ${params.data.level || 'N/A'}
` +
+ `🖱️ 点击查看详情` +
+ `
`;
}
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
+ }
+ }
}]
};
}