area
上一篇
概览
下一篇
box
Loading...
面积图（ area ）图形标记大部分场景用来绘制我们常见的面积图，是一种随有序变量的变化，反映数值变化的图形，原理与 line 相似。而面积图的特点在于，折线与自变量坐标轴之间的区域，会由颜色或者纹理填充。
另外，在数据结构上，area 和 line 不同的地方在于，area 可以设置长度为 2 的数组作为 y 通道的数据，数组的第一个和第二个元素分别代表面积图的上边界和下边界，通过这种方式来绘制区间面积图，如果没有设置，默认下边界为 0 。
面积图也可用于多个系列数据的比较，表达数据的总量和趋势。相较于折线图，面积图不仅可以清晰地反映出数据的趋势变化，也能够强调不同类别的数据间的差距对比。
import { Chart } from '@antv/g2';const chart = new Chart({container: 'container',});chart.options({type: 'area',data: {type: 'fetch',value: 'https://assets.antv.antgroup.com/g2/aapl.json',},// 配置视觉通道encode: {x: (d) => new Date(d.date), // 配置x通道y: 'close', // 配置y通道shape: 'area', // 配置shape通道，默认为'area'的时候可以不写。可选'area', 'smooth', 'hvh', 'vh', 'hv'},// 配置样式style: {fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff', // 配置面积图填充颜色为渐变色fillOpacity: 0.9, // 配置area标记的填充透明度为 0.9},// 配置坐标系coordinate: {},});chart.render();
更多的案例，可以查看图表示例 - 面积图页面。
| 属性 | 描述 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| encode | 配置 area 标记的视觉通道，包括x、y、color、shape等，用于指定视觉元素属性和数据之间的关系 | encode | - | ✓ |
| coordinate | 配置 area 标记的坐标系，坐标系会执行一系列点转换，从而改变标记的空间展示形式 | coordinate | {type: 'cartesian' } | |
| style | 配置 area 标记的图形样式 | style | - |
配置 area 标记的视觉通道。
area 标记的位置视觉通道需要 x, y 两个字段的值，支持的数据格式有以下两种：
x, y 都是数值（分类、连续），由于面积图表示的数据的趋势，所以尽量避免 x 轴对应的字段是无序的分类类型。x 是数值（分类、连续），y 是数组，表示一个区间值| x 通道绑定的值 | y 通道绑定的值 | 解释 |
|---|---|---|
| 数值 | 数值 | 一般的面积图 |
| 数值 | 数组 | 堆叠面积图和区间面积图 |
color 视觉通道影响 area 图形标记包围区域的填充颜色。area 标记中单个区域仅能使用一种颜色（或者渐变色），但如果将数据字段映射到颜色通道，会对数据进行分组，将数据拆分成多个区域：
import { Chart } from '@antv/g2';const chart = new Chart({container: 'container',});chart.options({type: 'area',data: [{ country: 'Asia', year: '1750', value: 502 },{ country: 'Asia', year: '1800', value: 635 },{ country: 'Asia', year: '1850', value: 809 },{ country: 'Asia', year: '1900', value: 947 },{ country: 'Asia', year: '1950', value: 1402 },{ country: 'Asia', year: '1999', value: 3634 },{ country: 'Asia', year: '2050', value: 5268 },{ country: 'Africa', year: '1750', value: 106 },{ country: 'Africa', year: '1800', value: 107 },{ country: 'Africa', year: '1850', value: 111 },{ country: 'Africa', year: '1900', value: 133 },{ country: 'Africa', year: '1950', value: 221 },{ country: 'Africa', year: '1999', value: 767 },{ country: 'Africa', year: '2050', value: 1766 },{ country: 'Europe', year: '1750', value: 163 },{ country: 'Europe', year: '1800', value: 203 },{ country: 'Europe', year: '1850', value: 276 },{ country: 'Europe', year: '1900', value: 408 },{ country: 'Europe', year: '1950', value: 547 },{ country: 'Europe', year: '1999', value: 729 },{ country: 'Europe', year: '2050', value: 628 },],encode: {x: 'year', // 配置x通道y: 'value', // 配置y通道color: 'country', // 配置color通道},style: { fillOpacity: 0.3 }, // 配置area标记的填充透明度为 0.3});chart.render();
配置图形转换transform中的 stackY ，可以对分组的区域进行堆叠，则形成堆叠面积图，避免因为重叠导致的信息模糊：
import { Chart } from '@antv/g2';const chart = new Chart({container: 'container',});chart.options({type: 'area',data: [{ country: 'Asia', year: '1750', value: 502 },{ country: 'Asia', year: '1800', value: 635 },{ country: 'Asia', year: '1850', value: 809 },{ country: 'Asia', year: '1900', value: 947 },{ country: 'Asia', year: '1950', value: 1402 },{ country: 'Asia', year: '1999', value: 3634 },{ country: 'Asia', year: '2050', value: 5268 },{ country: 'Africa', year: '1750', value: 106 },{ country: 'Africa', year: '1800', value: 107 },{ country: 'Africa', year: '1850', value: 111 },{ country: 'Africa', year: '1900', value: 133 },{ country: 'Africa', year: '1950', value: 221 },{ country: 'Africa', year: '1999', value: 767 },{ country: 'Africa', year: '2050', value: 1766 },{ country: 'Europe', year: '1750', value: 163 },{ country: 'Europe', year: '1800', value: 203 },{ country: 'Europe', year: '1850', value: 276 },{ country: 'Europe', year: '1900', value: 408 },{ country: 'Europe', year: '1950', value: 547 },{ country: 'Europe', year: '1999', value: 729 },{ country: 'Europe', year: '2050', value: 628 },],encode: {x: 'year', // 配置x通道y: 'value', // 配置y通道color: 'country', // 配置color通道},transform: [{ type: 'stackY' }], // 按照指定通道分组，对每组的 y 和 y1 通道进行堆叠，实现堆叠效果style: { fillOpacity: 0.3 }, // 配置area标记的填充透明度为 0.3});chart.render();
area 标记的支持的形状如下：
| 形状 | 描述 | 示例 |
|---|---|---|
| area | 绘制直线连接的面积图 |  |
| smooth | 绘制平滑曲线的面积图 |  |
| vh | 绘制阶梯面积图，先竖线后横线连接 |  |
| hv | 绘制阶梯面积图，先横线后竖线连接 |  |
| hvh | 绘制阶梯面积图，竖横竖，中点连接 |  |
area 图形标记在不同坐标系下的展示有所差别。根据坐标系或坐标系转换的不同，可以绘制面积、雷达图等多种图表。
| 坐标系或坐标系转换 | 坐标系配置 | 图表 |
|---|---|---|
| 直角坐标系 | { type: 'cartesian' } | 面积图等 |
| 极坐标系 | { type: 'polar' } | 雷达图等 |
在极坐标系下面积图需要进行闭合。常用来绘制雷达图等。
import { Chart } from '@antv/g2';const chart = new Chart({container: 'container',});chart.options({type: 'area',data: [{ item: 'Design', type: 'a', score: 70 },{ item: 'Design', type: 'b', score: 30 },{ item: 'Development', type: 'a', score: 60 },{ item: 'Development', type: 'b', score: 70 },{ item: 'Marketing', type: 'a', score: 50 },{ item: 'Marketing', type: 'b', score: 60 },{ item: 'Users', type: 'a', score: 40 },{ item: 'Users', type: 'b', score: 50 },{ item: 'Test', type: 'a', score: 60 },{ item: 'Test', type: 'b', score: 70 },{ item: 'Language', type: 'a', score: 70 },{ item: 'Language', type: 'b', score: 50 },{ item: 'Technology', type: 'a', score: 50 },{ item: 'Technology', type: 'b', score: 40 },{ item: 'Support', type: 'a', score: 30 },{ item: 'Support', type: 'b', score: 40 },{ item: 'Sales', type: 'a', score: 60 },{ item: 'Sales', type: 'b', score: 40 },{ item: 'UX', type: 'a', score: 50 },{ item: 'UX', type: 'b', score: 60 },],encode: { x: 'item', y: 'score', color: 'type' },coordinate: { type: 'polar' }, // 配置坐标系为极坐标系，用于绘制雷达图style: { fillOpacity: 0.5 },axis: { x: { grid: true }, y: { zIndex: 1, title: false } }, // 配置图表组件 - 坐标轴scale: { x: { padding: 0.5, align: 0 }, y: { tickCount: 5 } }, // 配置比例尺，使图表显示效果更好});chart.render();
配置 area 标记的样式。
| 属性 | 描述 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| connect | 是否用 connector 图形连接空值 | boolean | false | |
| defined | 决定数据是否为空值 | (d) => boolean | (d) => !Number.isNaN(d) && d !== undefined && d !== null | |
| connectFill | connector 图形填充色 | string | (d, index, data, column) => string | - | |
| connectFillOpacity | connector 图形填充透明度 | number | (d, index, data, column) => number | - | |
| connectStroke | connector 图形的描边 | string | (d, index, data, column) => string | - | |
| connectStrokeOpacity | connector 图形描边透明度 | number | (d, index, data, column) => number | - | |
| connectLineWidth | connector 图形描边的宽度 | number | (d, index, data, column) => number | - | |
| connectLineDash | connector 图形描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。 | [number,number] | (d, index, data, column) => [number , number] | - | |
| connectOpacity | connector 图形的整体透明度 | number | (d, index, data, column) => number | - | |
| connectShadowColor | connector 图形阴影颜色 | string | (d, index, data, column) => string | - | |
| connectShadowBlur | connector 图形阴影的高斯模糊系数 | number | (d, index, data, column) => number | - | |
| connectShadowOffsetX | 设置阴影距connector 图形的水平距离 | number | (d, index, data, column) => number | - | |
| connectShadowOffsetY | 设置阴影距connector 图形的垂直距离 | number | (d, index, data, column) => number | - | |
| connectCursor | connector 图形鼠标样式。同 css 的鼠标样式。 | string | (d, index, data, column) => string | default | |
| fill | area 图形填充色 | string | (d, index, data, column) => string | - | |
| fillOpacity | area 图形填充透明度 | number | (d, index, data, column) => number | 0.85 | |
| stroke | area 图形的描边 | string | (d, index, data, column) => string | - | |
| strokeOpacity | area 图形的描边透明度 | number | (d, index, data, column) => number | - | |
| lineWidth | area 图形描边的宽度 | number | (d, index, data, column) => number | 0 | |
| lineDash | area 图形描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。 | [number,number] | (d, index, data, column) => [number , number] | - | |
| opacity | area 图形的整体透明度 | number | (d, index, data, column) => number | - | |
| shadowColor | area 图形阴影颜色 | string | (d, index, data, column) => string | - | |
| shadowBlur | area 图形阴影的高斯模糊系数 | number | (d, index, data, column) => number | - | |
| shadowOffsetX | 设置阴影距area 图形的水平距离 | number | (d, index, data, column) => number | - | |
| shadowOffsetY | 设置阴影距area 图形的垂直距离 | number | (d, index, data, column) => number | - | |
| cursor | area 图形的鼠标样式。同 css 的鼠标样式。 | string | (d, index, data, column) => string | default |
尝试一下：
可以使用 defined 配置去决定是否为非空值，默认 NaN、undefined、null 为空值。假设需要数据为 0 的时候是空值连接。
chart.area()// ....style('defined', (v) => v === 0);