水平條形圖非常適合顯示排名資料、過長的類別名稱或進度指標。透過沿 X 軸延伸條形，這種視覺結構為類別標籤提供了充足的水平空間，無需傾斜或截斷文字。無論您是在建立前十名排行榜表格、問卷回應分析，還是水平性能比較，條形圖都能在桌面與行動裝置螢幕上提供清晰易讀的呈現。
水平條形的運作機制
在 Apache ECharts 中，柱狀圖與條形圖使用完全相同的'bar'系列類型。轉換為水平布局的方式是將類別資料直接指派給垂直軸（yAxis），並定義水平軸（xAxis）為數值軸。圖表引擎會旋轉繪製方向，從左到右水平繪製條形。
1. 基本設定
要建立基本的水平條形圖，請在type: 'category'上設定yAxis，並提供您的資料陣列，同時在type: 'value'上設定xAxis:
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['巴西', '印尼', '美國', '印度', '中國']
},
series: [
{
type: 'bar',
data: [214, 273, 331, 1380, 1411]
}
]
};
進階結構技術
水平條形圖支援多組資料、目標強調以及自訂角落處理，適用於現代儀表板設計。
1. 多系列水平比較
將多個物件放置於系列陣列以根據類別標籤建立分組的水平條形圖：
ECharts
Edit ECharts in VPasCode
option = {
圖例: {
數據: ['2025 目標', '2025 實際']
},
x軸: {
類型: '值'
},
y軸: {
類型: '類別',
數據: ['專案 A', '專案 B', '專案 C', '專案 D']
},
系列: [
{
名稱: '2025 目標',
類型: '條形圖',
數據: [80, 95, 70, 85]
},
{
名稱: '2025 實際',
類型: '條形圖',
數據: [85, 90, 75, 92]
}
]
};
2. 圓角端點與強調樣式
使用以下方式應用右側圓角：borderRadius於水平條形圖上（指定[右上角, 右下角, 左下角, 左上角]):
ECharts
Edit ECharts in VPasCode
option = {
x軸: {
類型: '值'
},
y軸: {
類型: '類別',
數據: ['直接搜尋', '電子郵件活動', '社群媒體', '付費搜尋']
},
系列: [
{
類型: '條形圖',
數據: [
120,
200,
{
值: 450,
項目樣式: {
顏色: '#fac858'
}
},
280
],
項目樣式: {
顏色: '#91cc75',
圓角半徑: [0, 6, 6, 0] // 僅圓化右側端點
}
}
]
};
微調佈局與間距
由於水平類別標籤的文字長度不一，調整左邊距與標籤對齊方式可防止標籤被截斷。
1. 容器網格邊距
使用grid設定區塊以分配足夠空間給長的 Y 軸標籤：
ECharts
Edit ECharts in VPasCode
option = {
網格: {
左邊距: '15%', // 為長類別文字增加左邊距
右邊距: '8%',
下邊距: '10%',
包含標籤: true
},
x軸: {
類型: '值'
},
y軸: {
類型: '類別',
數據: [
'企業基礎設施現代化',
'雲端遷移第二階段',
'資料庫優化',
'API 網關重設計'
]
},
系列: [
{
類型: '條形圖',
數據: [75, 60, 90, 40],
條形寬度: '50%'
}
]
};
戰略最佳實務
- 有意識地排序資料：只要可能，應將水平條形圖按升序或降序排列。排序清單能讓讀者立即看出表現最佳者。
- 使用
containLabel: true: 始終包含containLabel: true在grid設定以防止過長的類別標題溢出畫布邊緣。 - 直接數值標籤： 為了獲得乾淨的排行榜，建議在每個柱狀圖的末端直接顯示數據值，使用
label: { show: true, position: 'right' }並完全隱藏數值底軸。