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 + } + } }] }; }