在評估離散指標之間的結構性分解時，堆疊柱狀圖提供了一種有效的方式來視覺化部分與整體的分布。與將資料系列水平分散的分組佈局不同，堆疊圖表會在單一柱狀邊界內垂直累積數值。這種格式使得監控總類別成長的同時，追蹤內部子元件比例的變化，例如按作業系統劃分的裝置流量，或部門間每季的支出細項分解。
堆疊柱狀的運作機制
堆疊柱狀圖依賴於為多個系列分配相同的堆疊識別碼。當渲染引擎偵測到具有堆疊字串值的系列，且該系列的類型為 'bar'時，會沿著垂直的Y軸順序堆疊數值，而不是呈現重疊或並排的柱狀圖。
1. 基本設定
要建立基本的堆疊柱狀圖，請定義以類別為基礎的X軸，並為堆疊屬性套用至您的系列陣列中的每個系列：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['直接', '自然搜尋', '付費廣告', '推薦']
},
xAxis: {
type: 'category',
data: ['一', '二', '三', '四', '五', '六', '日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '直接',
type: 'bar',
stack: 'total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '自然搜尋',
type: 'bar',
stack: 'total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '付費廣告',
type: 'bar',
stack: 'total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '推薦',
type: 'bar',
stack: 'total',
data: [98, 77, 101, 99, 40, 120, 110]
}
]
};
進階結構技術
根據您的分析需求，堆疊柱狀圖可調整為顯示百分比分布或選擇性子群組。
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: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: '桌面',
type: 'bar',
stack: 'percentage',
data: [60, 50, 45, 40]
},
{
name: '行動裝置',
type: 'bar',
stack: 'percentage',
data: [30, 40, 45, 50]
},
{
name: '平板',
type: 'bar',
stack: 'percentage',
data: [10, 10, 10, 10]
}
]
};
2. 多重堆疊分組
您可以透過在系列之間使用不同的堆疊識別符來結合分組與堆疊於單一視圖中。例如，比較實際值與目標值的總計，其中每一項均由堆疊的次級元件組成：
ECharts
Edit ECharts in VPasCode
option = {
legend: {
data: ['產品 A 實際值', '產品 B 實際值', '產品 A 目標值', '產品 B 目標值']
},
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
name: '產品 A 實際值',
type: 'bar',
stack: 'actual',
data: [120, 150, 180, 200]
},
{
name: '產品 B 實際值',
type: 'bar',
stack: 'actual',
data: [80, 90, 100, 110]
},
{
name: '產品 A 目標值',
type: 'bar',
stack: 'target',
data: [130, 160, 190, 210]
},
{
name: '產品 B 目標值',
type: 'bar',
stack: 'target',
data: [90, 100, 110, 120]
}
]
};
微調佈局與樣式
視覺細節對於堆疊柱狀圖至關重要，以確保各區段保持可辨識性，同時避免視覺疲勞。
1. 區段邊界與圓角頂帽
在堆疊區段之間應用清晰的邊框分隔，並將圓角僅限於堆疊中最頂端的系列區段：
ECharts
Edit ECharts in VPasCode
option = {
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月']
},
yAxis: {
type: 'value'
},
series: [
{
name: '基礎層',
type: 'bar',
stack: 'total',
data: [320, 302, 301, 334],
itemStyle: {
color: '#4992ff',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: '中層',
type: 'bar',
stack: 'total',
data: [120, 132, 101, 134],
itemStyle: {
color: '#7cffb2',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: '頂層',
type: 'bar',
stack: 'total',
data: [220, 182, 191, 234],
itemStyle: {
color: '#fddd60',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [4, 4, 0, 0] // 僅頂端區段使用圓角
}
}
]
};
戰略性最佳實務
- 限制區段數量：避免每根柱子堆疊超過 4 到 5 個類別。超過此門檻後，跨柱子比較中間區段將變得視覺上困難。
- 將基準項目固定在底部：將您最重要的指標或最大的次級元件作為系列陣列中的第一項，使其直接位於基準線上，以便於對齊。
系列陣列中，使其直接位於基準線上，以便於對齊。 - 使用高對比色調或邊框：在區段之間應用微妙的白色邊框線，以在相鄰顏色對比度相似時仍能保持清晰區分。