为了强调连续时间内的趋势方向和总体体积，面积图提供了一种富有表现力的视觉方法。通过填充趋势线与水平轴之间的区域，面积图将重点放在序列间的相对大小和总体体积变化上，例如服务器带宽使用量、活跃用户数量或每日交易吞吐量。
面积图的机制
面积图直接基于折线图配置。通过设置type: 'line'并包含一个areaStyle属性在系列对象上，渲染引擎会自动填充线条路径下方至水平基线的几何空间。
1. 基础设置
要构建一个基本的面积图，定义一个连续的X轴，设置系列type: 'line'，并声明一个空的或自定义的areaStyle对象：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
areaStyle: {}, // 启用默认区域填充
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
高级结构技术
面积图可以通过现代色彩渐变和光滑曲线得到增强，以提高可读性和视觉美感。
1. 渐变填充样式
纯色填充有时会显得沉重。应用半透明线性渐变可创造出现代、简洁的外观，使填充区域柔和地向底部坐标轴渐变：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['一月', '二月', '三月', '四月', '五月', '六月']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
lineStyle: {
width: 3,
color: '#5470c6'
},
areaStyle: {
opacity: 0.8,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(84, 112, 198, 0.6)' },
{ offset: 1, color: 'rgba(84, 112, 198, 0.05)' }
]
}
},
data: [320, 450, 410, 680, 890, 950]
}
]
};
2. 重叠多系列面积对比
在单个图表中显示多个面积系列时，调整填充不透明度至关重要，以确保底层数据路径仍然完全可见：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['入站流量', '出站流量']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
},
yAxis: {
type: 'value'
},
series: [
{
name: '入站流量',
type: 'line',
smooth: true,
areaStyle: { opacity: 0.4 },
data: [120, 200, 450, 600, 700, 380]
},
{
name: '出站流量',
type: 'line',
smooth: true,
areaStyle: { opacity: 0.4 },
data: [80, 140, 310, 420, 510, 260]
}
]
};
微调布局与间距
由于区域填充会一直延伸到Y轴基线，配置连续的边界间隙可使填充区域与画布边框对齐整齐。
1. 无缝边缘对齐
通过设置boundaryGap: false在分类X轴上设置该参数，填充将从容器网格的绝对左边缘开始，并在最右侧干净地结束：
ECharts
Edit ECharts in VPasCode
option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 6,
areaStyle: {
color: 'rgba(145, 204, 117, 0.3)'
},
lineStyle: {
color: '#91cc75',
width: 2
},
data: [150, 230, 224, 318]
}
]
};
战略最佳实践
- 使用低填充不透明度：实心区域填充会遮挡底层网格线和重叠的系列。为保持高对比度，始终将透明度维持在20%至50%之间。
- 将系列数量控制在2到3个：过多的重叠区域形状会造成视觉混乱。对于4个或更多累积连续数据集，建议改用堆叠面积图。
- 设置
boundaryGap: false:在时间轴上移除水平边距，可使区域填充跨越整个网格宽度，而不会在左右边缘留下尴尬的空白间隙。