当您需要同时追踪总体总量和各个子组件随时间的变化贡献时，堆叠面积图是理想的可视化工具。垂直堆叠面积填充形成一个连续的复合视图，其中最上方的线条代表总和，而各个带状区域的宽度则显示了子类别贡献的变化情况，例如在数月内按搜索引擎、自然流量和直接访问渠道划分的总网络流量。
堆叠面积图的工作原理
堆叠面积图将折线系列配置与匹配的堆叠属性相结合。当渲染引擎检测到多个系列中具有相同堆叠标识符时，若这些系列均具有type: 'line'和areaStyle激活状态，它会沿着垂直的Y轴，将每个数据点依次堆叠在前一个系列的线路径之上。
1. 基础设置
要构建一个基本的堆叠面积图，需定义一个连续的X轴，将每个系列的type: 'line'设置为areaStyle，并为所有系列分配相同的堆叠标识符：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['邮件', '联盟广告', '视频广告', '直接访问']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '邮件',
type: 'line',
stack: '总计',
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总计',
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总计',
areaStyle: {},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总计',
areaStyle: {},
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
高级结构技术
堆叠面积图可以配置为关注整体累积增长，或随时间变化的相对比例变化。
1. 100% 归一化百分比面积图
在评估比例变化而非随时间变化的总体累积量时，将您的数据集按每个水平时间点归一化为100%：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['桌面', '移动', '平板']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2023', '2024', '2025', '2026']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: '桌面',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [65, 55, 48, 40]
},
{
name: '移动',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [25, 35, 42, 50]
},
{
name: '平板',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [10, 10, 10, 10]
}
]
};
微调布局与样式
由于堆叠区域完全覆盖背景，调整填充不透明度和线条描边有助于保持各层之间的清晰度和可读性。
1. 自定义图层不透明度与边界分隔符
在略带透明度的区域填充上设置实线描边，可在相邻堆叠图带之间形成清晰的视觉边界：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
name: '产品 A',
type: 'line',
stack: 'volume',
smooth: true,
lineStyle: { width: 2, color: '#5470c6' },
areaStyle: { color: '#5470c6', opacity: 0.7 },
data: [120, 150, 180, 210]
},
{
name: '产品 B',
type: 'line',
stack: 'volume',
smooth: true,
lineStyle: { width: 2, color: '#91cc75' },
areaStyle: { color: '#91cc75', opacity: 0.7 },
data: [220, 280, 250, 310]
},
{
name: '产品 C',
type: 'line',
stack: 'volume',
smooth: true,
lineStyle: { width: 2, color: '#fac858' },
areaStyle: { color: '#fac858', opacity: 0.7 },
data: [150, 190, 220, 260]
}
]
};
战略最佳实践
- 将稳定系列置于底部：将最大或波动最小的系列置于堆叠底部，以建立其上方图带的可预测基线。
- 限制图带数量：堆叠超过4到5个系列会使中间图带难以准确评估。建议将次要类别合并为“其他”类别。
- 使用
axisPointer: { type: 'cross' }:将悬停十字光标与持续显示的提示框结合，可轻松定位密集垂直堆叠中的特定日期数值。