Skip to content

Commit 4fcfa9a

Browse files
hustcchustcc
authored
feat(area): add area demo (#1415)
* feat(area): add area demo * chore: simplify demo code
1 parent 1cb655c commit 4fcfa9a

38 files changed

+162
-24
lines changed

‎examples/area/basic/demo/basic.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Area } from '@antv/g2plot';
2+
3+
fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
4+
.then((res) => res.json())
5+
.then((data) => {
6+
const area = new Area('container', {
7+
data,
8+
xField: 'Date',
9+
yField: 'scales',
10+
xAxis: {
11+
type: 'dateTime',
12+
tickCount: 5,
13+
},
14+
});
15+
area.render();
16+
});

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

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"title": {
3+
"zh": "中文分类",
4+
"en": "Category"
5+
},
6+
"demos": [
7+
{
8+
"filename": "basic.ts",
9+
"title": {
10+
"zh": "基础面积图",
11+
"en": "basic Area chart"
12+
},
13+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*aARCQbtAl4AAAAAAAAAAAABkARQnAQ"
14+
}
15+
]
16+
}

‎examples/area/basic/design.en.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: 设计规范
3+
---
4+
5+
设计规范

‎examples/area/basic/design.zh.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: 设计规范
3+
---
4+
5+
设计规范

‎examples/area/basic/index.en.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: 面积图
3+
order: 0
4+
---

‎examples/area/basic/index.zh.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: 面积图
3+
order: 0
4+
---

‎examples/area/stacked/demo/area-large-data.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Area } from '@antv/g2plot';
2+
3+
fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
4+
.then((res) => res.json())
5+
.then((data) => {
6+
const area = new Area('container', {
7+
data,
8+
xField: 'year',
9+
yField: 'value',
10+
seriesField: 'category',
11+
color: ['#6897a7', '#8bc0d6', '#60d7a7', '#dedede', '#fedca9', '#fab36f', '#d96d6f'],
12+
xAxis: {
13+
type: 'time',
14+
mask: 'YYYY',
15+
},
16+
yAxis: {
17+
label: {
18+
// 数值格式化为千分位
19+
formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
20+
},
21+
},
22+
});
23+
24+
area.render();
25+
});

‎examples/area/stacked/demo/basic.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Area } from '@antv/g2plot';
2+
3+
fetch('https://gw.alipayobjects.com/os/bmw-prod/b21e7336-0b3e-486c-9070-612ede49284e.json')
4+
.then((res) => res.json())
5+
.then((data) => {
6+
const area = new Area('container', {
7+
data,
8+
xField: 'date',
9+
yField: 'value',
10+
seriesField: 'country',
11+
});
12+
area.render();
13+
});

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

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"title": {
3+
"zh": "中文分类",
4+
"en": "Category"
5+
},
6+
"demos": [
7+
{
8+
"filename": "basic.ts",
9+
"title": {
10+
"zh": "堆叠面积图",
11+
"en": "StackedArea chart"
12+
},
13+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*YYfSRoiOS_EAAAAAAAAAAABkARQnAQ"
14+
},
15+
{
16+
"filename": "area-large-data.ts",
17+
"title": {
18+
"zh": "二氧化碳排放量来源",
19+
"en": "The causes of CO2 emissions"
20+
},
21+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*u6u1RqMG9coAAAAAAAAAAABkARQnAQ"
22+
}
23+
]
24+
}

‎examples/area/stacked/design.en.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: 设计规范
3+
---
4+
5+
设计规范

‎examples/area/stacked/design.zh.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: 设计规范
3+
---
4+
5+
设计规范

‎examples/area/stacked/index.en.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: 堆积面积图
3+
order: 1
4+
---

‎examples/area/stacked/index.zh.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: 堆积面积图
3+
order: 1
4+
---

‎examples/line/basic/demo/line-point-style.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const data = [
1212
{ year: '1999', value: 13 },
1313
];
1414

15-
const line = new Line(document.getElementById('container'), {
15+
const line = new Line('container', {
1616
data,
1717
xField: 'year',
1818
yField: 'value',

‎examples/line/basic/demo/line-smooth.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const data = [
1212
{ year: '1999', value: 13 },
1313
];
1414

15-
const line = new Line(document.getElementById('container'), {
15+
const line = new Line('container', {
1616
data,
1717
xField: 'year',
1818
yField: 'value',

‎examples/line/basic/demo/line-with-point.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const data = [
1212
{ year: '1999', value: 13 },
1313
];
1414

15-
const line = new Line(document.getElementById('container'), {
15+
const line = new Line('container', {
1616
data,
1717
xField: 'year',
1818
yField: 'value',

‎examples/line/basic/demo/line.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Line } from '@antv/g2plot';
33
fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
44
.then((res) => res.json())
55
.then((data) => {
6-
const line = new Line(document.getElementById('container'), {
6+
const line = new Line('container', {
77
data,
88
padding: 'auto',
99
xField: 'Date',

‎examples/line/multiple/demo/color-callback.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Line } from '@antv/g2plot';
33
fetch('https://gw.alipayobjects.com/os/bmw-prod/c48dbbb1-fccf-4a46-b68f-a3ddb4908b68.json')
44
.then((res) => res.json())
55
.then((data) => {
6-
const line = new Line(document.getElementById('container'), {
6+
const line = new Line('container', {
77
data,
88
xField: 'date',
99
yField: 'value',

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Line } from '@antv/g2plot';
33
fetch('https://gw.alipayobjects.com/os/bmw-prod/c48dbbb1-fccf-4a46-b68f-a3ddb4908b68.json')
44
.then((res) => res.json())
55
.then((data) => {
6-
const line = new Line(document.getElementById('container'), {
6+
const line = new Line('container', {
77
data,
88
xField: 'date',
99
yField: 'value',

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Line } from '@antv/g2plot';
33
fetch('https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json')
44
.then((res) => res.json())
55
.then((data) => {
6-
const linePlot = new Line(document.getElementById('container'), {
6+
const linePlot = new Line('container', {
77
data,
88
xField: 'year',
99
yField: 'gdp',

‎examples/line/multiple/demo/line-large-data.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Line } from '@antv/g2plot';
33
fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
44
.then((res) => res.json())
55
.then((data) => {
6-
const line = new Line(document.getElementById('container'), {
6+
const line = new Line('container', {
77
data,
88
xField: 'year',
99
yField: 'value',

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Line } from '@antv/g2plot';
33
fetch('https://gw.alipayobjects.com/os/bmw-prod/c48dbbb1-fccf-4a46-b68f-a3ddb4908b68.json')
44
.then((res) => res.json())
55
.then((data) => {
6-
const line = new Line(document.getElementById('container'), {
6+
const line = new Line('container', {
77
data,
88
xField: 'date',
99
yField: 'value',

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Line } from '@antv/g2plot';
33
fetch('https://gw.alipayobjects.com/os/bmw-prod/c48dbbb1-fccf-4a46-b68f-a3ddb4908b68.json')
44
.then((res) => res.json())
55
.then((data) => {
6-
const line = new Line(document.getElementById('container'), {
6+
const line = new Line('container', {
77
data,
88
xField: 'date',
99
yField: 'value',

‎examples/line/multiple/demo/marker-active.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac
1717
'#FF99C3',
1818
];
1919

20-
const container = document.getElementById('container');
20+
const container = 'container';
2121
const containerBox = container.getBoundingClientRect();
2222
const series = uniq(data.map((d) => d.category));
2323
const markerSize = 6;

‎examples/pie/basic/API.en.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const data = [
4343
{ country: 'Europe', year: '1800', value: 203,},
4444
];
4545

46-
const piePlot = new Pie(document.getElementById('container'), {
46+
const piePlot = new Pie('container', {
4747
data,
4848
// highlight-start
4949
meta: {

‎examples/pie/basic/API.zh.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const data = [
4343
{ country: 'Europe', year: '1800', value: 203,},
4444
];
4545

46-
const piePlot = new Pie(document.getElementById('container'), {
46+
const piePlot = new Pie('container', {
4747
data,
4848
// highlight-start
4949
meta: {

‎examples/pie/basic/demo/basic.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const data = [
99
{ type: '其他', value: 5 },
1010
];
1111

12-
const piePlot = new Pie(document.getElementById('container'), {
12+
const piePlot = new Pie('container', {
1313
width: 400,
1414
height: 300,
1515
appendPadding: 10,

‎examples/pie/basic/demo/custom-label.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const data = [
55
{ sex: '女', sold: 0.55 },
66
];
77

8-
const piePlot = new Pie(document.getElementById('container'), {
8+
const piePlot = new Pie('container', {
99
width: 400,
1010
height: 300,
1111
appendPadding: 10,

‎examples/pie/basic/demo/outer-label.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const data = [
99
{ type: '其他', value: 5 },
1010
];
1111

12-
const piePlot = new Pie(document.getElementById('container'), {
12+
const piePlot = new Pie('container', {
1313
width: 400,
1414
height: 300,
1515
appendPadding: 10,

‎examples/pie/basic/demo/pie-texture.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const data = [
55
{ sex: '女', sold: 0.55 },
66
];
77

8-
const piePlot = new Pie(document.getElementById('container'), {
8+
const piePlot = new Pie('container', {
99
width: 400,
1010
height: 300,
1111
appendPadding: 10,

‎examples/pie/donut/demo/basic.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const data = [
99
{ type: '其他', value: 5 },
1010
];
1111

12-
const piePlot = new Pie(document.getElementById('container'), {
12+
const piePlot = new Pie('container', {
1313
width: 400,
1414
height: 300,
1515
appendPadding: 10,

‎examples/pie/donut/demo/statistics.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const data = [
99
{ type: '其他', value: 5 },
1010
];
1111

12-
const piePlot = new Pie(document.getElementById('container'), {
12+
const piePlot = new Pie('container', {
1313
width: 400,
1414
height: 300,
1515
appendPadding: 10,

‎examples/scatter/basic/API.en.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ const data = [
9393
{ country: 'Europe', year: '1800', value: 203,},
9494
];
9595

96-
const scatterPlot = new Scatter(document.getElementById('container'), {
96+
const scatterPlot = new Scatter('container', {
9797
data,
9898
// highlight-start
9999
meta: {

‎examples/scatter/basic/API.zh.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ const data = [
9393
{ country: 'Europe', year: '1800', value: 203,},
9494
];
9595

96-
const scatterPlot = new Scatter(document.getElementById('container'), {
96+
const scatterPlot = new Scatter('container', {
9797
data,
9898
// highlight-start
9999
meta: {

‎examples/scatter/basic/demo/basic.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Scatter } from '@antv/g2plot';
33
fetch('https://gw.alipayobjects.com/os/antfincdn/aao6XnO5pW/IMDB.json')
44
.then((res) => res.json())
55
.then((data) => {
6-
const scatterPlot = new Scatter(document.getElementById('container'), {
6+
const scatterPlot = new Scatter('container', {
77
width: 400,
88
height: 300,
99
appendPadding: 10,

‎examples/scatter/basic/demo/color-mapping.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Scatter } from '@antv/g2plot';
33
fetch('https://gw.alipayobjects.com/os/antfincdn/aao6XnO5pW/IMDB.json')
44
.then((res) => res.json())
55
.then((data) => {
6-
const scatterPlot = new Scatter(document.getElementById('container'), {
6+
const scatterPlot = new Scatter('container', {
77
width: 400,
88
height: 300,
99
appendPadding: 10,

‎examples/scatter/basic/demo/shape-mapping.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Scatter } from '@antv/g2plot';
33
fetch('https://gw.alipayobjects.com/os/antfincdn/aao6XnO5pW/IMDB.json')
44
.then((res) => res.json())
55
.then((data) => {
6-
const scatterPlot = new Scatter(document.getElementById('container'), {
6+
const scatterPlot = new Scatter('container', {
77
width: 400,
88
height: 300,
99
appendPadding: 10,

‎gatsby-config.js

+8
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,14 @@ module.exports = {
5555
en: 'Line Charts',
5656
},
5757
},
58+
{
59+
slug: 'area',
60+
icon: 'area',
61+
title: {
62+
zh: '面积图',
63+
en: 'Area Charts',
64+
},
65+
},
5866
{
5967
slug: 'pie',
6068
icon: 'pie',

0 commit comments

Comments
 (0)