在追踪连续转移、资源分配或多阶段用户旅程时，桑基图是首选的可视化工具。通过在连续阶段节点之间绘制成比例的流动带，桑基图展示了总量如何在复杂系统中分裂、合并和转换——例如网站用户转化漏斗、能源分配网络或组织预算分配。
桑基图的原理
在 Apache ECharts 中，桑基图使用type: 'sankey'。与图图表类似，桑基图由一组不同的节点（或data）以及有向的links（或边）。每个链接包含一个源节点名称、一个目标节点名称，以及一个数值型的值，它决定了连接流动线的视觉宽度。
1. 基础设置
要构建一个基本的桑基图，请在data中声明您的节点项目，并在links:
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
data: [
{ name: '总收入' },
{ name: '产品销售' },
{ name: '服务' },
{ name: '营销' },
{ name: '研发' },
{ name: '利润' }
],
links: [
{ source: '总收入', target: '产品销售', value: 70 },
{ source: '总收入', target: '服务', value: 30 },
{ source: '产品销售', target: '营销', value: 30 },
{ source: '产品销售', target: '研发', value: 25 },
{ source: '产品销售', target: '利润', value: 15 },
{ source: '服务', target: '利润', value: 30 }
],
emphasis: {
focus: 'adjacency'
},
lineStyle: {
color: 'gradient',
curveness: 0.5
}
}
]
};
高级结构技术
桑基图可以通过垂直流向、多级节点颜色以及动态链接高亮来定制，以追踪复杂网络中各个路径的流动情况。
1. 垂直流向
设置orient: 'vertical'以将水平阶段流向转换为从上到下的垂直瀑布视图：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
orient: 'vertical',
nodeWidth: 20,
nodeGap: 16,
data: [
{ name: '网站访问量' },
{ name: '产品页面' },
{ name: '直接跳出' },
{ name: '购物车' },
{ name: '结账' }
],
links: [
{ source: '网站访问量', target: '产品页面', value: 1000 },
{ source: '网站访问量', target: '直接跳出', value: 400 },
{ source: '产品页面', target: '购物车', value: 600 },
{ source: '购物车', target: '结账', value: 450 }
],
lineStyle: {
color: 'source',
curveness: 0.5
}
}
]
};
精细调整布局与链接样式
调整节点间距、线条曲率以及悬停高亮行为，可使复杂的多阶段流程保持清晰易读。
1. 节点间距控制与源-目标渐变流向
自定义nodeGap并设置lineStyle.color: 'gradient'可实现阶段之间的平滑颜色过渡：
ECharts
Edit ECharts in VPasCode
option = {
series: [
{
type: 'sankey',
left: '5%',
right: '15%',
nodeWidth: 24,
nodeGap: 18,
draggable: true,
label: {
position: 'right',
color: '#333',
fontSize: 12
},
data: [
{ name: '源A', itemStyle: { color: '#5470c6' } },
{ name: '源B', itemStyle: { color: '#91cc75' } },
{ name: '阶段1', itemStyle: { color: '#fac858' } },
{ name: '阶段2', itemStyle: { color: '#ee6666' } },
{ name: '最终输出', itemStyle: { color: '#73c0de' } }
],
links: [
{ source: '源A', target: '阶段1', value: 50 },
{ source: '源B', target: '阶段1', value: 30 },
{ source: '阶段1', target: '阶段2', value: 60 },
{ source: '阶段1', target: '最终输出', value: 20 },
{ source: '阶段2', target: '最终输出', value: 60 }
],
lineStyle: {
color: 'gradient',
curveness: 0.6,
opacity: 0.4
}
}
]
};
战略最佳实践
- 保持流量守恒： 确保流入节点的数值总和等于或在逻辑上解释流出的数值，以避免产生误导性的视觉空白。
- 启用
强调聚焦：'相邻性':在处理多阶段流程时，将鼠标悬停在相邻链接上进行聚焦，可以让用户在没有视觉干扰的情况下隔离特定路径。 - 使用渐变链接： 设置
lineStyle.color: 'gradient'顺畅地将源节点颜色过渡到目标节点颜色，使多阶段转换在视觉上更加直观。