---
order: 12
navTitle: 面积图
---
# 仪表板组件-面积图

面积图是将值标注成点，并通过连线将这些点连接起来，起点和终点与坐标轴连接，形成一个面积范围，用于展示数值大小随时间或有序类别变化的范围。比如展示不同月份下服装销售数量的变化：

![面积图](./images/2020-08-03-10-52-17.png)

示例地址：[面积图](https://demo.succbi.com/v5/bi/area/play)

## 使用面积图组件{#start}

面积图的**X轴**上至少取1个维度，如省份，销售月份等；**Y轴**上至少取1个度量，如销售数量，销售金额等。

**操作步骤**

![制作面积图](./images/mjt.gif)

1. 双击或拖入维度【月份】到**X轴**
2. 双击或拖入度量【销售数量】到**Y轴**

通过上述2个步骤即可快速实现展示不同月份下服装销售数量的变化。

## 属性介绍{#properties}

### 填充{#fill}

面积图可设置填充效果，定义不同的颜色，在**样式>系列>填充**中进行设置。

![设置填充](./images/2023-05-08-14-52-10.png)

### 滚动{#scroll}

面积图支持滚动效果，可以设置滚动条显示方式、当前页展示数据量、是否循环滚动等，在**样式>组件>滚动中**设置，可参考[滚动](./column-chart.md#scroll)。

![设置滚动](./images/2023-05-08-15-36-10.png)

## 更多效果{#scenarios}

可以自定义面积图的取数和样式来实现不同效果的面积图。

| [多系列面积图](#multiple)| [堆积面积图](#stack)| [标记最大值最小值面积图](#sign)| [自动轮播面积图](#rotation)|
| -------- | -------- |-------- |-------- |
|![多系列面积图](./images/2020-08-03-10-46-28.png)|![堆积面积图](./images/2020-07-31-16-35-28.png)|![标记最大值最小值面积图](./images/2020-07-31-16-48-14.png)|![自动轮播面积图](./images/2023-05-08-17-26-10.gif) |

### 多系列面积图{#multiple}

多系列面积图可以用来同时展示多个指标，比较不同指标之间的变化范围。

![多系列面积图](./images/2020-08-03-10-46-28.png)

**实现方式**

1. 双击或拖入度量【月份】到**X轴**
2. 双击或拖入维度【零售总金额】和【交易总金额】到**Y轴**

通过以上2个步骤，即可实现不同月份零售总金额和交易总金额的变化，展示零售总金额和交易总金额的情况。

### 堆积面积图{#stack}

堆积面积图可以直观展示每个分组的走势趋向，以及反映出该系列的一个波动范围。可以使用堆积面积图展示不同价格档次的销售数量随时间的走向和该时间段内的波动范围，如下图所示：

![堆积面积图](./images/2020-07-31-16-35-28.png)

**实现方式**

拖入一个维度【价格档次】到**Y轴**系列值下的[颜色](../../design/data/data-style/color.md)，即可实现按价格档次维度展示各月份的销售数量走势波动。

![堆积面积图](./images/2020-08-03-12-01-25.png)

### 标记最大值和最小值面积图{#sign}

通过对面积图进行设置最大最小值标注，可以直观了解销量最佳和销量最低的月份。

![标记最大值和最小值面积图](./images/2020-07-31-16-48-14.png)

**实现方式**

在**面积图**>**添加分析**，分别选择**最大值**和**最小值**，即可实现最大最小值标注，可参考文档[参考分析-最大/最小值](../../design/data/data-style/reference-line.md#max-min)。

![设置最大值和最小值标记](./images/2020-08-03-11-57-53.png)

### 自动轮播{#rotation}

当面积图的X轴标签内容较多，无法在屏幕上全部显示时，可以设置面积图自动轮播。

![自动轮播图](./images/2023-05-08-17-26-10.gif)

**实现方式**

在**样式**>**组件**>**滚动**中勾选**循环滚动**，再根据需求设置**展示数据量**、**滚动模式**即可。其他实现方式可参考柱形图中[自动轮播](./column-chart.md#rotation)的设置。