项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

面积图 area ​

折线图的"强调量感"变体:折线下方填充渐变面,适合表达累计量、体量随时间的膨胀趋势。

何时使用 ​

  • 看趋势的同时想强调数值规模(如 DAU 总量、营收体量);
  • 单系列面积最清晰;多系列面积叠加时注意遮挡,系列多建议改用折线图。

示例 ​

数据模型与折线图完全一致:labels + series,把 type 换成 area 即可。

家庭储蓄累积 ​

生活理财场景:两条面积分别是存款与投资账户的余额走势——面积表达的「体量感」正合适,年底攒下多少一眼可见。

年度经常性收入(ARR) ​

办公 SaaS 场景:MRR 按季累积成 ARR 走势,面积强调收入体量的增长惯性——给投资人看「曲线还在爬陡」比念数字有说服力。

配置要点 ​

  • series 项同样支持 color 指定主色,面积渐变随主色生成;
  • 系列多、互相遮挡时回退折线图;
  • 固定量纲对比:yAxis: { min: 0, max: n }。

相关 ​