在長條類別名稱之間比較次要指標時，最適合使用分組長條圖。透過將相關的水平長條沿Y軸並排放置，此佈局讓使用者能在不犧牲標籤可讀性的前提下，跨多個類別掃描績效指標。這是一種針對多年預算細分、產品功能比較或跨區域銷售基準的高效選擇，特別是在類別標籤需要大量水平空間時。
分組水平長條的運作原理
與垂直柱狀圖群組類似，水平長條群組是透過將相同的類別標籤指派給Y軸，同時以type: 'bar'。渲染引擎會自動處理視覺上的群組化，沿垂直平面偏移每個系列在類別區塊內的位置。
1. 基本設定
要建立分組長條圖，請將您的離散類別指派給yAxis.data，指定一個數值型的xAxis，並包含多個長條系列：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['2025 分配額度', '2026 分配額度']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['研究與開發', '行銷與銷售', '客戶支援', '營運']
},
series: [
{
name: '2025 分配額度',
type: 'bar',
data: [320, 450, 210, 380]
},
{
name: '2026 分配額度',
type: 'bar',
data: [380, 490, 240, 410]
}
]
};
進階結構技巧
將您的圖表擴展至三個或更多系列，可提供更豐富的洞察，前提是視覺密度仍保持易於閱讀。
1. 使用自訂色彩漸層的多指標樣式
在水平系列上應用獨特的色彩調色盤或微妙的漸層填色，以確保不同群組清晰可辨：
ECharts
Edit ECharts in VPasCode
option = {
legend: {
data: ['Q1 銷售額', 'Q2 銷售額', 'Q3 銷售額']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['北部地區', '南部地區', '東部地區', '西部地區']
},
series: [
{
name: 'Q1 銷售額',
type: 'bar',
data: [120, 200, 150, 80],
itemStyle: {
color: '#5470c6',
borderRadius: [0, 4, 4, 0]
}
},
{
name: 'Q2 銷售額',
type: 'bar',
data: [140, 220, 170, 95],
itemStyle: {
color: '#91cc75',
borderRadius: [0, 4, 4, 0]
}
},
{
name: 'Q3 銷售額',
type: 'bar',
data: [180, 250, 190, 110],
itemStyle: {
color: '#fac858',
borderRadius: [0, 4, 4, 0]
}
}
]
};
微調佈局與間距
管理Y軸垂直方向上的長條間距，是維持類別區塊之間清晰分隔的關鍵。
1. 垂直內部間距與類別邊距
調整間距屬性，以確保系列長條整齊分組，而不會與鄰近的類別群組混雜：
ECharts
Edit ECharts in VPasCode
option = {
grid: {
left: '20%',
right: '10%',
containLabel: true
},
legend: {
data: ['基線', '優化後']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['API 回應時間', '資料庫查詢時間', '資源載入時間']
},
series: [
{
name: '基線',
type: 'bar',
barGap: '15%', // 同一類別內條形之間的間距
barCategoryGap: '40%', // 類別區塊之間的間距
data: [350, 180, 520]
},
{
name: '優化後',
type: 'bar',
data: [120, 65, 210]
}
]
};
戰略最佳實務
- 保持群組聚焦：每類別最多使用 3 或 4 個系列。超過此數量時，建議使用堆疊圖或多重面板圖，以避免垂直方向的視覺混亂。
- 配置足夠的 Y 軸邊距： 分組的水平圖表佔用相當大的垂直空間。請增加容器高度，或調整
grid.left以防止文字被截斷。 - 一致的指標順序： 確保程式碼中的系列順序與敘述的自然流程一致（例如：歷史年份在前，當前年份在後）。