在資料分析與商業報表中，分組柱狀圖（也稱為群集柱狀圖）是跨多個維度進行並列比較的主要工具。雖然標準柱狀圖僅針對每個類別評估單一指標，但分組柱狀圖會將相關資料集放置在同一類別區塊內彼此相鄰。這使得能夠立即進行視覺評估時間趨勢、團隊之間的表現，或多重指標的表現.
分組柱狀圖的運作原理
分組柱狀圖在共用的座標系統上運作，其中橫軸代表離散的類別，縱軸處理連續值。透過宣告多個系列物件，使其在橫軸上具有完全相同的類別對齊方式，即可實現分組。佈局引擎會自動計算所需的偏移量，並在每個對應的類別區塊內將各系列並排呈現。
1. 基本設定
要建立分組柱狀圖，需定義單一類別軸，並提供多個具有type: 'bar':
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['2025 年收入', '2026 年收入']
},
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
name: '2025 年收入',
type: 'bar',
data: [320, 332, 301, 334]
},
{
name: '2026 年收入',
type: 'bar',
data: [220, 182, 191, 234]
}
]
};
進階結構技巧
增加第三個或第四個系列會提高圖表的密度。為保持清晰度，可微調系列樣式、佈局間距與視覺提示。
1. 各組之間的自訂樣式
套用獨特的顏色、圓角或自訂項目樣式，可輕易區分密集圖表中的各個組別：
ECharts
Edit ECharts in VPasCode
option = {
legend: {
data: ['產品 A', '產品 B', '產品 C']
},
xAxis: {
type: 'category',
data: ['北美洲', '歐洲', '亞太地區']
},
yAxis: {
type: 'value'
},
series: [
{
name: '產品 A',
type: 'bar',
data: [150, 230, 224],
itemStyle: {
color: '#5470c6',
borderRadius: [4, 4, 0, 0]
}
},
{
name: '產品 B',
type: 'bar',
data: [180, 200, 210],
itemStyle: {
color: '#91cc75',
borderRadius: [4, 4, 0, 0]
}
},
{
name: '產品 C',
type: 'bar',
data: [120, 140, 190],
itemStyle: {
color: '#fac858',
borderRadius: [4, 4, 0, 0]
}
}
]
};
微調佈局與間距
在處理分組柱狀圖時，間距至關重要。控制同一組內柱子之間的間距，與不同類別組之間的間距，可避免視覺混亂。
1. 內部間距與類別間距
使用間距屬性來平衡佈局密度：
barGap：控制柱子之間的空間在同一類別群組內（例如，'20%'或'0%'用於相鄰欄位）。barCategoryGap：控制不同類別群組之間的空間不同類別群組之間的空間（例如，'40%').barWidth：控制欄位寬度相對於類別空間的大小。
ECharts
Edit ECharts in VPasCode
option = {
legend: {
data: ['計畫', '實際']
},
xAxis: {
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月']
},
yAxis: {
type: 'value'
},
series: [
{
name: '計畫',
type: 'bar',
data: [100, 120, 140, 160, 180],
barGap: '10%',
barCategoryGap: '35%'
},
{
name: '實際',
type: 'bar',
data: [95, 125, 130, 170, 175]
}
]
};
戰略最佳實務
- 限制群組數量： 避免在單一群組中放置超過 3 到 4 個欄位。每個類別的欄位過多會讓圖表難以瀏覽。
- 務必包含圖例： 因為分組圖表使用顏色來區分變數，因此必須有明確的上方或下方圖例以提供上下文。
- 保持群組順序一致： 確保每個類別中系列的順序保持一致（例如，永遠將「2025」放在「2026」之前）。