对于分析类别标题较长的项目中的组成部分分解，堆叠条形图是理想的选择。通过将数据段沿Y轴从左到右水平堆叠，这种可视化方式在保持长标签清晰度的同时，展示了整体类别总和以及内部比例分解。它在调查人口统计结果、按部门划分的项目资源分配或多渠道转化流程中表现尤为出色。
堆叠水平条形的原理
创建水平堆叠图表需要使用与堆叠柱状图相同的堆叠属性，并与基于类别的Y轴配合使用。当多个type: 'bar'系列在水平方向上共享相同的堆叠键时，渲染引擎会沿X轴从左到右累积数值。
1. 基础设置
要构建一个基本的堆叠条形图，请设置yAxis为type: 'category', xAxis为type: 'value'，并将一个匹配的堆叠字符串分配给每个系列：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['工程', '产品', '设计', '市场']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['项目阿尔法', '项目贝塔', '项目伽马', '项目德尔塔']
},
series: [
{
name: '工程',
type: 'bar',
stack: '分配',
data: [320, 302, 301, 334]
},
{
name: '产品',
type: 'bar',
stack: '分配',
data: [120, 132, 101, 134]
},
{
name: '设计',
type: 'bar',
stack: '分配',
data: [220, 182, 191, 234]
},
{
name: '市场',
type: 'bar',
stack: '分配',
data: [150, 212, 201, 154]
}
]
};
高级结构技术
堆叠的水平条形图可以配置为进行绝对数量比较，或进行归一化以显示跨类别的百分比比率。
1. 100% 归一化水平条形图
为了评估长类别之间的相对比率而非绝对数量，请将你的系列数据归一化，使每行的总和为100%：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['满意', '中立', '不满意']
},
xAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
yAxis: {
type: 'category',
data: [
'企业客户成功',
'中型市场支持服务',
'自助式入职'
]
},
series: [
{
name: '满意',
type: 'bar',
stack: 'feedback',
data: [75, 60, 45]
},
{
name: '中立',
type: 'bar',
stack: 'feedback',
data: [18, 25, 35]
},
{
name: '不满意',
type: 'bar',
stack: 'feedback',
data: [7, 15, 20]
}
]
};
布局与样式的精细调整
清晰的视觉边界和圆润的外端设计使水平堆叠条形图呈现出精致、现代的视觉感受。
1. 段间分离与外端圆角
应用细的垂直边框线以区分内部段，且将圆角样式限制在右侧最后一个段上：
ECharts
Edit ECharts in VPasCode
option = {
grid: {
left: '15%',
right: '10%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Q1 预算', 'Q2 预算', 'Q3 预算', 'Q4 预算']
},
series: [
{
name: '固定成本',
type: 'bar',
stack: 'budget',
data: [400, 420, 410, 430],
itemStyle: {
color: '#5470c6',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: '可变成本',
type: 'bar',
stack: 'budget',
data: [200, 250, 220, 280],
itemStyle: {
color: '#91cc75',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: '可支配支出',
type: 'bar',
stack: 'budget',
data: [100, 150, 130, 190],
itemStyle: {
color: '#fac858',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [0, 6, 6, 0] // 右侧端帽的圆角
}
}
]
};
战略最佳实践
- 第一段基准：最靠近 Y 轴基准线的段在跨类别比较时最为直观。始终将最关键的组件作为第一个系列对象放置。
- 限制堆叠组件数量：每根条形图的堆叠段总数应控制在 5 个或更少，以确保视觉分析清晰，避免信息过载。
- 条形内文本标签： 对于具有宽段的水平堆叠条形图，建议启用
label: { show: true, position: 'inside' }以使各个段的数值可读，而无需依赖悬停提示。