在类别名称较长的情况下，比较次要指标最好使用分组条形图。通过将相关的水平条形图沿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: ['第一季度销售额', '第二季度销售额', '第三季度销售额']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['北部地区', '南部地区', '东部地区', '西部地区']
},
series: [
{
name: '第一季度销售额',
type: 'bar',
data: [120, 200, 150, 80],
itemStyle: {
color: '#5470c6',
borderRadius: [0, 4, 4, 0]
}
},
{
name: '第二季度销售额',
type: 'bar',
data: [140, 220, 170, 95],
itemStyle: {
color: '#91cc75',
borderRadius: [0, 4, 4, 0]
}
},
{
name: '第三季度销售额',
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以防止文本被截断。 - 度量顺序保持一致： 确保代码中的系列顺序与叙述的自然流程一致（例如，先历史年份，再当前年份）。