面积图 area
折线图的"强调量感"变体:折线下方填充渐变面,适合表达累计量、体量随时间的膨胀趋势。
何时使用
- 看趋势的同时想强调数值规模(如 DAU 总量、营收体量);
- 单系列面积最清晰;多系列面积叠加时注意遮挡,系列多建议改用折线图。
示例
数据模型与折线图完全一致:labels + series,把 type 换成 area 即可。
家庭储蓄累积
生活理财场景:两条面积分别是存款与投资账户的余额走势——面积表达的「体量感」正合适,年底攒下多少一眼可见。
年度经常性收入(ARR)
办公 SaaS 场景:MRR 按季累积成 ARR 走势,面积强调收入体量的增长惯性——给投资人看「曲线还在爬陡」比念数字有说服力。
配置要点
series项同样支持color指定主色,面积渐变随主色生成;- 系列多、互相遮挡时回退折线图;
- 固定量纲对比:
yAxis: { min: 0, max: n }。