在数据分析和业务报告中，分组柱状图（也称为簇状柱状图）是跨多个维度进行并排比较的主要工具。与每个类别仅评估单一指标的标准柱状图不同，分组柱状图将相关数据集放置在同一个类别分组内彼此相邻。这使得能够立即对时间趋势、团队间表现或多项指标的表现.
分组柱状图的原理
分组柱状图基于共享的坐标系运行，其中横轴表示离散类别，纵轴处理连续数值。通过在横轴上声明多个共享相同类别对齐方式的系列对象来实现分组。布局引擎会自动计算所需的偏移量，并在每个类别区块内将各个系列并排渲染。
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%'用于相邻柱状图）。柱状图类别间距: 控制不同类别组之间的间距不同类别组之间的间距（例如，'40%').柱状图宽度: 控制柱状图宽度相对于类别空间的比例。
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”之前）。