在追蹤連續轉移、資源分配或多階段使用者旅程時，桑基圖是首選的視覺化工具。透過在連續階段節點之間繪製成比例的流動帶，桑基圖能呈現總數量如何在複雜系統中分裂、合併與轉變——例如網站使用者轉化漏斗、能源分配網絡，或組織預算分配。
桑基圖的運作原理
在 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'可順暢地將源節點顏色漸變至目標節點顏色，使多階段轉換在視覺上更直觀。