面积图包括普通的面积图（area）及面积范围图（arearange），根据面积连接线的不同，又可以分为直线面积图（area、arearange）和曲线面积图（areaspline 及 areasplinerange）。

一、面积图

面积图及面积范围图 - 图1
图4-3 Highcharts 面积图

面积图相关的配置参考 API 文档：

曲线面积图和面积图一样，只不过连线的方式是曲线，而面积图的连线方式是直线。

面积图及面积范围图 - 图2
图4-4 Highcharts 曲线面积图

曲线面积图相关的配置参考 API 文档：

2、面积填充颜色

在面积图中，有三个配置决定了面积的填充颜色，分别是：填充颜色、填充透明度 及当前数据列的颜色配置。

默认的填充颜色是当前数据列的颜色加上 0.75 （填充透明度默认值）的透明度。

下面是一个具体的使用示例：

3、阶梯型面积图

同直线图一样，面积图也可以实现阶梯形，只需要配置 step 属性即可，下面是一个示例：

二、面积范围图

面积图及面积范围图 - 图3
图4-5 Highcharts 面积范围图

面积范围图相关的配置参考 API 文档：

  • 面积范围图配置：针对当前数据列有效
  • 面积范围数据列配置 ：针对当前页面的所有面积范围数据列有效
    面积范围图是表示范围区间的面积图，其 Y 值包含两个值，表示范围的最小值和最大值。

根据连接线的不同，面积图又分为面积范围图和曲线面积范围图。

面积图及面积范围图 - 图4
图4-6 Highcharts 曲线面积范围图

曲线面积范围图相关的配置参考 API 文档：

原文: https://www.hcharts.cn/docs/area-chart