面积图(Area Chart)

### 什么是面积图？
面积图具有山状外观，用于表示数量变化。无论是检查部落人口的变化还是确定学生的平均表现。面积图不同于折线图，因为由绘制的数据点界定的区域填充有阴影或颜色。

在本面积图指南中，我们将通过配置和选项来绘制 ApexCharts 中可用的不同类型的面积图。

### 数据格式
面积图的数据格式与其他 XY 图的数据格式相同。您需要series在图表选项的数组中提供数据。有关如何构建的更多信息，请series参见[使用数据](http://www.bixiaguangnian.com/manual/apexcharts/232.html "使用数据")页面。

### 面积图的变体
#### 样条线面积图
在样条线面积图中，数据点由平滑曲线连接。

要绘制这样一条平滑的曲线，您必须设置以下选项

```javascript
stroke: {
  curve: 'smooth',
}
```

#### 直的
以直线连接数据点，不对直线应用任何曲线。

```javascript
stroke: {
  curve: 'straight',
}
```

#### 阶梯线
在阶梯线面积图中，点由水平和垂直线段连接，看起来像楼梯的台阶，并且区域被填充颜色。

![](/uploads/images/20221226/9bb9230d5e554dd90ef7d18e3885d02a.png)

```javascript
stroke: {
  curve: 'stepline',
}
```

### 堆积面积图
堆叠面积图的工作方式与简单面积图相同，不同之处在于每个数据点的起点从前一个数据系列留下的点继续。

要启用图表堆叠，您应该设置以下配置

```javascript
chart: {
    stacked: true
}
```

### 在组合图中使用区域
使用 ApexCharts，您可以使用其他图表类型绘制区域系列。下面的示例给出了区域系列如何与其他图表类型组合以创建混合/组合图表的想法。

- area/column/line
- area/line

type在构建这样的组合图表时，您必须在系列数组中指定。

```javascript
series: [{
    type: 'area',
    data: [...]
  }, {
    type: 'column',
    data: [...]
  }]
```

### 绘制区域时间序列
时间序列图是一种数据可视化工具，它以渐进的时间间隔绘制数据值。使用 ApexCharts，如果您在序列中提供如下所示的时间戳值并将其设置xaxis.type为 'datetime'，则会创建一个时间序列。

```javascript
series: [{
  data: [{
    x: new Date('2018-02-12').getTime(),
    y: 76
  }, {
    x: new Date('2018-02-12').getTime(),
    y: 76
  }]
}], 
xaxis: {
  type: 'datetime'
}
```

### 设置面积图样式
使用 ApexCharts，您可以为面积图赋予所需的外观并增强仪表板设计的外观。我们将通过选项设置线条的颜色、更改填充区域的颜色、更改不透明度以及使用不同的填充方法来填充 SVG 路径。

#### 线条宽度
更改线条的宽度很容易。

```javascript
stroke: {
    width: 2
}
```

#### 自定义填充区域
要更改图表中填充区域的颜色，您只需修改 [colors](http://www.bixiaguangnian.com/manual/apexcharts/304.html "colors") 配置中的属性。

```javascript
colors: ['#2E93fA', '#66DA26', '#546E7A', '#E91E63', '#FF9800'];
```

#### 填充类型
通过指定是否用纯色或渐变或图案填充路径来配置 SVG 路径。

```javascript
fill: {
  type: 'gradient' / 'solid' / 'pattern' / 'image'
}
```

有关如何配置路径填充的更多信息，请参见 [fill](http://www.bixiaguangnian.com/manual/apexcharts/306.html#type:%20String%20||%20Array%20of%20String "fill") 选项。

### 进阶范例
下面的演示显示了面积图与[画笔图](http://www.bixiaguangnian.com/manual/apexcharts/281.html "画笔图")相结合的高级示例。此示例中的画笔图表充当控件，用户可以通过该控件导航其他图表。