面积图

简介

面积图以图形方式显示定量数据。它基于折线图。通常用颜色，纹理和阴影线强调轴和线之间的区域。通常，一个面积图会比较两个或多个数量。面积图适用于想要体现在连续自变量下，一组或多组数据的趋势变化以及相互之间的对比，同时也能够观察到数据总量的变化趋势。

图表构成

面积图由点图元、线图元、坐标轴及其他组件构成。

点图元、线图元为面积图的基本要素，相关的绘制配置必不可少:

areaChart.type: 图表类型，面积图的类型为'area'
areaChart.data: 图表绘制的数据源
areaChart.xField: 连续时间间隔或有序类别字段，映射图元的 x 坐标
areaChart.yField: 数值字段，映射图元的 y 坐标

坐标轴、提示信息等作为辅助图表展示的组件，属于可选配置，自带默认效果和功能:

areaChart.axes: 坐标轴组件，默认显示并根据图表类型自动推断坐标系及数据映射逻辑，详情配置见VChart 坐标轴组件配置
areaChart.tooltip: 提示信息，默认交互时显示，详细配置见VChart 提示信息组件配置
更多组件配置见VChart areaChart 配置

快速上手

关键配置

type: 图表类型，面积图的类型为'area'
xField 属性声明为连续时间间隔或有序类别字段
yField 属性声明数值字段

面积图特性

数据

一个离散 或 时序 字段，如: month
（时序字段中的数据仅支持时间戳格式，且在坐标轴中需要配置axes.type: 'time'）
一个数值字段，如: temperature

一组月份和温度的数据定义如下：

data: [
  {
    name: 'area',
    values: [
      {
        month: 'January',
        temperature: 8
      },
      {
        month: 'February',
        temperature: 9
      },
      {
        month: 'March',
        temperature: 11
      },
      {
        month: 'April',
        temperature: 14
      }
    ]
  }
];

图表布局

堆叠面积图

与堆叠柱状图类似，堆叠面积图不仅能展现同一维度下不同类别的数据差异，还能展现同一维度下不同类别的总和差异。在 VChart 中，如果需要展示堆叠面积图，需要配置areaChart.stack: true，并且为了区分同一维度下堆叠在一起的区域，需要指定areaChart.seriedField字段，该字段默认映射区域颜色

百分比堆叠面积图

在百分比堆叠面积图中，每个堆叠部分的高度仅表示其占总高度的比例，而不是具体的数值。这使得用户更容易比较每个子类别或类别在总体数据中的相对权重和变化趋势。在 VChart 中，如果需要展示百分比堆叠面积图，需要配置areaChart.stack: true和areaChart.percent: true，并且为了区分同一维度下堆叠在一起的区域，需要指定areaChart.seriedField字段，该字段默认映射区域颜色。

图元及样式

平滑面积图

在 line.style 属性中配置 curveType: 'monotone' 属性，默认 area 图元的 style.curveType 属性会自动同步，因此不需要再次配置

阶梯面积图

在 line.style 属性中配置 curveType: 'step' | 'stepAfter' | 'stepBefore' 属性

面积图

简介