當追蹤跨連續步驟或轉換管道的逐步流失時，漏斗圖是標準的視覺化工具。透過以堆疊的梯形方塊顯示數值，並在各階段逐漸收窄或擴寬，漏斗圖可讓使用者一眼看出轉換瓶頸、流失率與流程效率——例如銷售管道階段、電商結帳流程或潛在客戶產生漏斗。
漏斗圖的運作機制
在 Apache ECharts 中，漏斗圖是透過type: 'funnel'來繪製。每個資料物件包含一個name和一個數值型的value。引擎會自動將資料由最大至最小（或反之）排序，並根據系列中的最大值來縮放每個梯形的寬度。
1. 基本設定
要建立基本的漏斗圖，請在系列資料陣列中提供類別階段，並設定type: 'funnel':
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center',
data: ['詢問', '提案', '報價', '談判', '成交']
},
series: [
{
name: '銷售漏斗',
type: 'funnel',
left: '10%',
top: '18%',
bottom: '10%',
width: '80%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
data: [
{ value: 100, name: '詢問' },
{ value: 80, name: '提案' },
{ value: 60, name: '報價' },
{ value: 40, name: '談判' },
{ value: 20, name: '成交' }
]
}
]
};
進階結構技術
漏斗圖可透過金字塔布局、自訂階段對齊方式，或雙重漏斗疊加來客製化，以比較不同的轉換管道。
1. 倒置金字塔布局與自訂對齊
將sort: 'ascending'更改為建立倒置金字塔，或調整funnelAlign以將階段對齊至左側或右側邊緣：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}%'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '轉化金字塔',
type: 'funnel',
left: '15%',
top: '18%',
bottom: '10%',
width: '70%',
sort: 'ascending', // 將最小階段顯示在上方，最大階段顯示在下方
funnelAlign: 'center',
label: {
show: true,
position: 'right'
},
data: [
{ value: 20, name: '階段 1：認知' },
{ value: 40, name: '階段 2：興趣' },
{ value: 60, name: '階段 3：決策' },
{ value: 80, name: '階段 4：行動' }
]
}
]
};
微調佈局與階段樣式
增加間距、圓角邊框以及自訂標籤格式化，可創造出轉化階段之間清晰的間距。
1. 自訂階段間距與百分比標籤
控制間距各梯形之間的間距，並使用自訂標籤格式化來強調各階段之間的百分比保留率：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} 用戶'
},
series: [
{
name: '使用者入門',
type: 'funnel',
left: '10%',
top: '10%',
bottom: '10%',
width: '80%',
gap: 6, // 在各階段之間增加明顯分隔
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
borderRadius: 4
},
label: {
show: true,
position: 'inside',
formatter: '{b}n{c} ({d}%)',
color: '#fff',
fontSize: 12
},
data: [
{ value: 5000, name: '應用程式造訪' },
{ value: 3400, name: '註冊' },
{ value: 2100, name: '個人資料設定' },
{ value: 1200, name: '首次行動' },
{ value: 800, name: '訂閱' }
]
}
]
};
策略性最佳實務
- 保持階段順序：漏斗圖依賴順序流動邏輯。請確保資料項目代表實際的逐步流程，而非無關的類別。
- 使用
間距以建立清晰的視覺階段邊界：設定一個小的間距（例如 4px 到 6px）的梯形之間的間距，可防止鄰近顏色融合成單一塊體。 - 顯示階段百分比：將原始數字與各階段百分比結合（例如使用
{d}%於標籤格式化中）讓使用者能立即評估各里程碑的流失比率。