横向条形图非常适合展示排名数据、过长的类别名称或进度指标。通过沿X轴延伸条形，这种视觉结构为类别标签提供了充足的横向空间，无需倾斜或截断文本。无论您是在构建前10名排行榜表格、调查结果分解，还是横向性能对比，条形图都能在桌面和移动屏幕上提供清晰的可读性。
横向条形的原理
在 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 = {
legend: {
data: ['2025目标', '2025实际']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['项目A', '项目B', '项目C', '项目D']
},
series: [
{
name: '2025目标',
type: 'bar',
data: [80, 95, 70, 85]
},
{
name: '2025实际',
type: 'bar',
data: [85, 90, 75, 92]
}
]
};
2. 圆角端帽与高亮样式
使用以下方式应用右侧圆角：borderRadius在水平条形图上（指定[右上角, 右下角, 左下角, 左上角]):
ECharts
Edit ECharts in VPasCode
option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['直接搜索', '邮件活动', '社交媒体', '付费搜索']
},
series: [
{
type: 'bar',
data: [
120,
200,
{
value: 450,
itemStyle: {
color: '#fac858'
}
},
280
],
itemStyle: {
color: '#91cc75',
borderRadius: [0, 6, 6, 0] // 仅对右侧端帽进行圆角处理
}
}
]
};
微调布局与间距
由于水平类别标签的文本长度各不相同，调整左侧边距和标签对齐方式可防止标签被截断。
1. 容器网格边距
使用grid配置块，为长Y轴标签分配足够的空间：
ECharts
Edit ECharts in VPasCode
option = {
grid: {
left: '15%', // 为较长的类别文本增加左侧边距
right: '8%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: [
'企业基础设施现代化',
'云迁移第二阶段',
'数据库优化',
'API网关重构'
]
},
series: [
{
type: 'bar',
data: [75, 60, 90, 40],
barWidth: '50%'
}
]
};
战略最佳实践
- 有意地对数据进行排序： 尽可能将水平条形图按升序或降序排列。排序列表能让读者立即看出表现最佳的项目。
- 使用
containLabel: true: 始终包含containLabel: true在网格配置以防止过长的类别标题溢出画布边缘。 - 直接数值标签： 为了清晰的排行榜，建议在每个条形图的末端直接显示数据值，使用
label: { show: true, position: 'right' }并完全隐藏数值底部坐标轴。