用於分析具有長分類標題的項目之間的組成部分分解時，堆疊條形圖是最佳選擇。透過沿Y軸從左到右水平堆疊資料段，此視覺化方式在保持長標籤清晰度的同時，也能顯示整體類別總計以及內部比例分解。它在調查人口統計結果、部門間專案資源分配或多管道轉化流程中表現尤為出色。
堆疊水平條形的運作機制
建立水平堆疊圖表需要使用相同的堆疊屬性，與基於類別的Y軸搭配使用。當多個類型：'條形圖'系列共享相同的堆疊鍵在水平方向上，渲染引擎會沿X軸從左到右累加數值。
1. 基本設定
要建立基本的堆疊條形圖，請設定Y軸為類型：'類別', X軸為類型：'數值'，並為每個系列分配相同的堆疊字串：
ECharts
Edit ECharts in VPasCode
選項 = {
工具提示: {
觸發: '軸',
軸指標: { 類型: '陰影' }
},
圖例: {
資料: ['工程', '產品', '設計', '行銷']
},
X軸: {
類型: '數值'
},
Y軸: {
類型: '類別',
資料: ['專案 Alpha', '專案 Beta', '專案 Gamma', '專案 Delta']
},
系列: [
{
名稱: '工程',
類型: '條形圖',
堆疊: '分配',
資料: [320, 302, 301, 334]
},
{
名稱: '產品',
類型: '條形圖',
堆疊: '分配',
資料: [120, 132, 101, 134]
},
{
名稱: '設計',
類型: '條形圖',
堆疊: '分配',
資料: [220, 182, 191, 234]
},
{
名稱: '行銷',
類型: '條形圖',
堆疊: '分配',
資料: [150, 212, 201, 154]
}
]
};
進階結構技術
堆疊的水平條形圖可設定為絕對數量比較，或歸一化以顯示跨類別的百分比比例。
1. 100% 歸一化水平條形圖
為了評估跨長格式類別的相對比例而非絕對數量，請將您的系列資料歸一化，使每行總和為100%：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['滿意', '中立', '不滿意']
},
xAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
yAxis: {
type: 'category',
data: [
'企業客戶成功',
'中型市場支援服務',
'自助式入門'
]
},
series: [
{
name: '滿意',
type: 'bar',
stack: 'feedback',
data: [75, 60, 45]
},
{
name: '中立',
type: 'bar',
stack: 'feedback',
data: [18, 25, 35]
},
{
name: '不滿意',
type: 'bar',
stack: 'feedback',
data: [7, 15, 20]
}
]
};
微調佈局與樣式
清晰的視覺邊界與圓角外端使水平堆疊條形圖呈現出精緻且現代的視覺效果。
1. 段落分隔與外端圓角
應用細薄的垂直邊框線來區分內部段落，並將圓角樣式限制在右側最後一個段落上：
ECharts
Edit ECharts in VPasCode
option = {
grid: {
left: '15%',
right: '10%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Q1 預算', 'Q2 預算', 'Q3 預算', 'Q4 預算']
},
series: [
{
name: '固定成本',
type: 'bar',
stack: 'budget',
data: [400, 420, 410, 430],
itemStyle: {
color: '#5470c6',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: '變動成本',
type: 'bar',
stack: 'budget',
data: [200, 250, 220, 280],
itemStyle: {
color: '#91cc75',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: '自由支配',
type: 'bar',
stack: 'budget',
data: [100, 150, 130, 190],
itemStyle: {
color: '#fac858',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [0, 6, 6, 0] // 右側端帽的圓角
}
}
]
};
戰略最佳實務
- 第一段基準：最接近 Y 軸基準線的段落是跨類別比較最簡單的。請始終將最重要的元件放在第一個系列物件中。
- 限制堆疊元件數量： 每條形圖的堆疊段落總數應控制在五個或更少，以確保視覺分析清晰，不會讓觀看者感到混亂。
- 條形內文字標籤： 對於具有寬段落的水平堆疊條形圖，建議啟用
label: { show: true, position: 'inside' }以使個別段落的數值可讀，無需依賴懸停提示工具。