Skip to content

Commit 45cd61d

Browse files
visikyvisiky
authored
feat(line): 折线图支持区域填充 (#2939)
* feat(line): 折线图支持区域填充 * docs(line): 折线图支持面积填充，补充文档
1 parent 4f2edde commit 45cd61d

File tree

12 files changed

+156
-17
lines changed

12 files changed

+156
-17
lines changed

‎__tests__/unit/plots/line/area-spec.ts

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { Line } from '../../../../src';
2+
import { partySupport } from '../../../data/party-support';
3+
import { createDiv } from '../../../utils/dom';
4+
5+
describe('line with area', () => {
6+
it('x*y*color point', () => {
7+
const plot = new Line(createDiv(), {
8+
width: 400,
9+
height: 300,
10+
data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
11+
xField: 'date',
12+
yField: 'value',
13+
seriesField: 'type',
14+
appendPadding: 10,
15+
});
16+
17+
plot.render();
18+
expect(plot.chart.geometries.length).toBe(1);
19+
20+
let xValue;
21+
let yValue;
22+
let colorValue;
23+
plot.update({
24+
...plot.options,
25+
point: {
26+
style: ({ date, value, type }) => {
27+
xValue = date;
28+
yValue = value;
29+
colorValue = type;
30+
return {
31+
fill: type === 'FF' ? 'red' : 'blue',
32+
};
33+
},
34+
},
35+
area: {
36+
style: {
37+
opacity: 0.15,
38+
},
39+
},
40+
});
41+
expect(plot.chart.geometries.length).toBe(3);
42+
expect(xValue).toBe('25/01/2018');
43+
expect(yValue).toBe(400);
44+
expect(colorValue).toBe('Lab');
45+
46+
const area = plot.chart.geometries[2];
47+
expect(area.elements[0].shape.attr('opacity')).toBe(0.15);
48+
49+
plot.update({
50+
...plot.options,
51+
point: null,
52+
});
53+
expect(plot.chart.geometries.length).toBe(2);
54+
expect(plot.chart.geometries[1].type).toBe('area');
55+
56+
plot.destroy();
57+
});
58+
});

‎docs/api/plots/line.en.md

+11
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,17 @@ Polyline data point graph style.
8686

8787
`markdown:docs/common/point-style.en.md`
8888

89+
#### area
90+
91+
<description>**可选** _object_</description>
92+
93+
折线趋势区域填充。
94+
95+
| Properties | Type | Description |
96+
| ---------- | -------------------------------- | --------------------------------------------------------------------------------------------- |
97+
| color | _string \| string[] \| Function_ | The color of the area, support callback way, example: `color: (datum: object) => string` |
98+
| style | _object \| Function_ | Area style, support callback way, example: `style: (datum: object) => string` |
99+
89100
#### state
90101

91102
<description>**optional** _object_</description>

‎docs/api/plots/line.zh.md

+11
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,17 @@ const data = [
8686

8787
`markdown:docs/common/point-style.zh.md`
8888

89+
#### area
90+
91+
<description>**可选** _object_</description>
92+
93+
折线趋势区域填充。
94+
95+
| 细分配置 | 类型 | 功能描述 | |
96+
| ---------- | -------------------------------- | --------------------------------------------------------------------------------------------- |
97+
| color | _string \| string[] \| Function_ | 填充区域的颜色，也可以支持回调的方式设置，回调参数为 `color: (datum: object) => string` |
98+
| style | _object \| Function_ | 填充区域的样式配置，也可以支持回调的方式设置，回调参数为 `style: (datum: object) => string` |
99+
89100
#### state
90101

91102
<description>**可选** _object_</description>

‎docs/common/point-style.en.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
| Properties | Type | Description |
22
| ---------- | -------------------------------- | --------------------------------------------------------------------------------------------- |
3-
| color | _string \| string[] \| Function_ | The color of the data point, support callback way, example: `color: (x, y, series) => string` |
4-
| shape | \_string \| Function\_ | The shape of the data point, support callback way, example: `shape: (x, y, series) => string` |
5-
| size | _number \| Function_ | The size of the data point, support callback way, example: `size: (x, y, series) => number` |
6-
| style | _object \| Function_ | Data point style, support callback way, example: `style: (x, y, series) => object` |
3+
| color | _string \| string[] \| Function_ | The color of the data point, support callback way, example: `color: (datum: object) => string` |
4+
| shape | \_string \| Function\_ | The shape of the data point, support callback way, example: `shape: (datum: object) => string` |
5+
| size | _number \| Function_ | The size of the data point, support callback way, example: `size: (datum: object) => number` |
6+
| style | _object \| Function_ | Data point style, support callback way, example: `style: (datum: object) => object` |
77
| state | _object_ | State styles of point, setting style of specify state。Refer to [_state_](#state) |

‎docs/common/point-style.zh.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
| 细分配置 | 类型 | 功能描述 |
22
| -------- | -------- | ---------- |
3-
| color | _string \| string[] \| Function_ | 数据点颜色，也可以支持回调的方式设置，回调参数为 `color: (x, y, series) => string` |
4-
| shape | _string \| Function_ | 数据点形状，也可以支持回调的方式设置，回调参数为 `shape: (x, y, series) => string` |
5-
| size | _number \| Function_ | 数据点大小，也可以支持回调的方式设置，回调参数为 `size: (x, y, series) => number` |
6-
| style | _object \| Function_ | 数据点样式，也可以支持回调的方式设置，回调参数为 `style: (x, y, series) => object` |
3+
| color | _string \| string[] \| Function_ | 数据点颜色，也可以支持回调的方式设置，回调参数为 `color: (datum: object) => string` |
4+
| shape | _string \| Function_ | 数据点形状，也可以支持回调的方式设置，回调参数为 `shape: (datum: object) => string` |
5+
| size | _number \| Function_ | 数据点大小，也可以支持回调的方式设置，回调参数为 `size: (datum: object) => number` |
6+
| style | _object \| Function_ | 数据点样式，也可以支持回调的方式设置，回调参数为 `style: (datum: object) => object` |
77
| state | _object_ | 数据点状态样式，设置对应状态的样式。详细参考 [_state_](#state) |

‎examples/area/basic/demo/meta.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"zh": "基础面积图",
1111
"en": "Basic area plot"
1212
},
13-
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ld0NQtdLO0/mianjitugengxinshuju-after.gif"
13+
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/6I8o7W3Gs7/a93dddbd-dc90-4f3e-ba8a-58918d0bfae7.png"
1414
},
1515
{
1616
"filename": "basic-gradients.ts",

‎examples/line/multiple/demo/line-area.ts

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Line } from '@antv/g2plot';
2+
3+
fetch('https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json')
4+
.then((res) => res.json())
5+
.then((data) => {
6+
const linePlot = new Line('container', {
7+
data,
8+
xField: 'year',
9+
yField: 'gdp',
10+
seriesField: 'name',
11+
yAxis: {
12+
label: {
13+
formatter: (v) => `${(v / 10e8).toFixed(1)} B`,
14+
},
15+
},
16+
legend: {
17+
position: 'top',
18+
},
19+
smooth: true,
20+
// 配置折线趋势填充
21+
area: {
22+
style: {
23+
fillOpacity: 0.15,
24+
},
25+
},
26+
animation: {
27+
appear: {
28+
animation: 'wave-in',
29+
duration: 3000,
30+
},
31+
},
32+
});
33+
34+
linePlot.render();
35+
});

‎examples/line/multiple/demo/meta.json

+9
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,15 @@
2828
},
2929
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*3HyPSaIxw0gAAAAAAAAAAABkARQnAQ"
3030
},
31+
{
32+
"filename": "line-area.ts",
33+
"title": {
34+
"zh": "折线趋势填充",
35+
"en": "Line with area fill"
36+
},
37+
"new": true,
38+
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/iQezVzeT%24x/line-area.gif"
39+
},
3140
{
3241
"filename": "line-color.ts",
3342
"title": {

‎gatsby-config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -313,8 +313,8 @@ module.exports = {
313313
indexName: 'antv_g2plot',
314314
},
315315
announcement: {
316-
zh: "G2Plot 近期上新: 仪表盘支持自定义指示器; 韦恩图交互丰富; 折线图支持 y 轴镜像反转。👏 可以到图表实例中查看演示 Demo。",
317-
en: "G2Plot newer coming: Gauge support custom indicator shape; Richer interactions of Venn; Y-axis reflect supported in Line. 👏 Welcome to see details on [Examples]",
316+
zh: "G2Plot 近期上新: 仪表盘支持自定义指示器; 韦恩图交互丰富; 折线图支持 y 轴镜像反转; 折线图支持区域填充。👏 可以到图表实例中查看演示 Demo。",
317+
en: "G2Plot newer coming: Gauge support custom indicator shape; Richer interactions of Venn; Y-axis reflect supported in Line; Line support area fill. 👏 Welcome to see details on [Examples]",
318318
}
319319
},
320320
};

‎src/plots/area/adaptor.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -67,14 +67,14 @@ function geometry(params: Params<AreaOptions>): Params<AreaOptions> {
6767
},
6868
});
6969
// 线默认 2px
70-
const second = deepAssign({ options: { line: { size: 2 } } }, primary, {
70+
const lineParams = deepAssign({ options: { line: { size: 2 } } }, primary, {
7171
options: { sizeField: seriesField, tooltip: false },
7272
});
7373
const pointParams = deepAssign({}, primary, { options: { tooltip: false, state: pointState } });
7474

7575
// area geometry 处理
7676
area(primary);
77-
line(second);
77+
line(lineParams);
7878
point(pointParams);
7979

8080
return params;

‎src/plots/line/adaptor.ts

+9-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { each, isArray } from '@antv/util';
33
import { Params } from '../../core/adaptor';
44
import { tooltip, slider, interaction, animation, theme, scale, annotation, limitInPlot } from '../../adaptor/common';
55
import { findGeometry, transformLabel, deepAssign } from '../../utils';
6-
import { point, line } from '../../adaptor/geometries';
6+
import { point, line, area } from '../../adaptor/geometries';
77
import { flow } from '../../utils';
88
import { adjustYMetaByZero } from '../../utils/data';
99
import { LineOptions } from './types';
@@ -14,7 +14,7 @@ import { LineOptions } from './types';
1414
*/
1515
function geometry(params: Params<LineOptions>): Params<LineOptions> {
1616
const { chart, options } = params;
17-
const { data, color, lineStyle, lineShape, point: pointMapping, seriesField } = options;
17+
const { data, color, lineStyle, lineShape, point: pointMapping, area: areaMapping, seriesField } = options;
1818
const pointState = pointMapping?.state;
1919

2020
chart.data(data);
@@ -35,14 +35,21 @@ function geometry(params: Params<LineOptions>): Params<LineOptions> {
3535
shape: 'circle',
3636
...pointMapping,
3737
},
38+
// 面积配置
39+
area: areaMapping && {
40+
color,
41+
...areaMapping,
42+
},
3843
// label 不传递给各个 geometry adaptor，由 label adaptor 处理
3944
label: undefined,
4045
},
4146
});
4247
const second = deepAssign({}, primary, { options: { tooltip: false, state: pointState } });
48+
const areaParams = deepAssign({}, primary, { options: { tooltip: false, state: pointState } });
4349

4450
line(primary);
4551
point(second);
52+
area(areaParams);
4653

4754
return params;
4855
}

‎src/plots/line/types.ts

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { GeometryOptions, LineGeometryOptions, PointGeometryOptions } from '../../adaptor/geometries';
1+
import {
2+
GeometryOptions,
3+
AreaGeometryOptions,
4+
LineGeometryOptions,
5+
PointGeometryOptions,
6+
} from '../../adaptor/geometries';
27
import { Options, StyleAttr } from '../../types';
38

49
export interface LineOptions extends Options, Pick<GeometryOptions, 'customInfo'> {
@@ -22,7 +27,10 @@ export interface LineOptions extends Options, Pick<GeometryOptions, 'customInfo'
2227
readonly lineShape?: Required<LineGeometryOptions>['line']['shape'];
2328
/** 折线数据点：1、图形映射属性 2、状态样式 */
2429
readonly point?: PointGeometryOptions['point'] & Pick<PointGeometryOptions, 'state'>;
30+
/** 折线趋势填充色：1、图形映射属性 */
31+
readonly area?: AreaGeometryOptions['area'];
2532

26-
// 支持坐标系配置
33+
// 其他
34+
/** 坐标轴反转配置 */
2735
readonly reflect?: 'x' | 'y' | ['x', 'y'];
2836
}

0 commit comments

Comments
 (0)