基础折线图
在这里插入图片描述
import { Line } from '@antv/g2plot';
fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
.then((res) => res.json())
.then((data) => {
const line = new Line('container', {
data,
padding: 'auto',
xField: 'Date',
yField: 'scales',
xAxis: {
// type: 'timeCat',
tickCount: 5,
},
});
line.render();
});
[
{
"Date": "2010-01",
"scales": 1998
},
{
"Date": "2010-02",
"scales": 1850
},
{
"Date": "2010-03",
"scales": 1720
},
{
"Date": "2010-04",
"scales": 1818
},
{
"Date": "2010-05",
"scales": 1920
},
{
"Date": "2010-06",
"scales": 1802
},
{
"Date": "2010-07",
"scales": 1945
},
{
"Date": "2010-08",
"scales": 1856
},
{
"Date": "2010-09",
"scales": 2107
},
{
"Date": "2010-10",
"scales": 2140
},
{
"Date": "2010-11",
"scales": 2311
},
{
"Date": "2010-12",
"scales": 1972
},
{
"Date": "2011-01",
"scales": 1760
},
{
"Date": "2011-02",
"scales": 1824
},
{
"Date": "2011-03",
"scales": 1801
},
{
"Date": "2011-04",
"scales": 2001
},
{
"Date": "2011-05",
"scales": 1640
},
{
"Date": "2011-06",
"scales": 1502
},
{
"Date": "2011-07",
"scales": 1621
},
{
"Date": "2011-08",
"scales": 1480
},
{
"Date": "2011-09",
"scales": 1549
},
{
"Date": "2011-10",
"scales": 1390
},
{
"Date": "2011-11",
"scales": 1325
},
{
"Date": "2011-12",
"scales": 1250
},
{
"Date": "2012-01",
"scales": 1394
},
{
"Date": "2012-02",
"scales": 1406
},
{
"Date": "2012-03",
"scales": 1578
},
{
"Date": "2012-04",
"scales": 1465
},
{
"Date": "2012-05",
"scales": 1689
},
{
"Date": "2012-06",
"scales": 1755
},
{
"Date": "2012-07",
"scales": 1495
},
{
"Date": "2012-08",
"scales": 1508
},
{
"Date": "2012-09",
"scales": 1433
},
{
"Date": "2012-10",
"scales": 1344
},
{
"Date": "2012-11",
"scales": 1201
},
{
"Date": "2012-12",
"scales": 1065
},
{
"Date": "2013-01",
"scales": 1255
},
{
"Date": "2013-02",
"scales": 1429
},
{
"Date": "2013-03",
"scales": 1398
},
{
"Date": "2013-04",
"scales": 1678
},
{
"Date": "2013-05",
"scales": 1524
},
{
"Date": "2013-06",
"scales": 1688
},
{
"Date": "2013-07",
"scales": 1500
},
{
"Date": "2013-08",
"scales": 1670
},
{
"Date": "2013-09",
"scales": 1734
},
{
"Date": "2013-10",
"scales": 1699
},
{
"Date": "2013-11",
"scales": 1508
},
{
"Date": "2013-12",
"scales": 1680
},
{
"Date": "2014-01",
"scales": 1750
},
{
"Date": "2014-02",
"scales": 1602
},
{
"Date": "2014-03",
"scales": 1834
},
{
"Date": "2014-04",
"scales": 1722
},
{
"Date": "2014-05",
"scales": 1430
},
{
"Date": "2014-06",
"scales": 1280
},
{
"Date": "2014-07",
"scales": 1367
},
{
"Date": "2014-08",
"scales": 1155
},
{
"Date": "2014-09",
"scales": 1289
},
{
"Date": "2014-10",
"scales": 1104
},
{
"Date": "2014-11",
"scales": 1246
},
{
"Date": "2014-12",
"scales": 1098
},
{
"Date": "2015-01",
"scales": 1189
},
{
"Date": "2015-02",
"scales": 1276
},
{
"Date": "2015-03",
"scales": 1033
},
{
"Date": "2015-04",
"scales": 956
},
{
"Date": "2015-05",
"scales": 845
},
{
"Date": "2015-06",
"scales": 1089
},
{
"Date": "2015-07",
"scales": 944
},
{
"Date": "2015-08",
"scales": 1043
},
{
"Date": "2015-09",
"scales": 893
},
{
"Date": "2015-10",
"scales": 840
},
{
"Date": "2015-11",
"scales": 934
},
{
"Date": "2015-12",
"scales": 810
},
{
"Date": "2016-01",
"scales": 782
},
{
"Date": "2016-02",
"scales": 1089
},
{
"Date": "2016-03",
"scales": 745
},
{
"Date": "2016-04",
"scales": 680
},
{
"Date": "2016-05",
"scales": 802
},
{
"Date": "2016-06",
"scales": 697
},
{
"Date": "2016-07",
"scales": 583
},
{
"Date": "2016-08",
"scales": 456
},
{
"Date": "2016-09",
"scales": 524
},
{
"Date": "2016-10",
"scales": 398
},
{
"Date": "2016-11",
"scales": 278
},
{
"Date": "2016-12",
"scales": 195
},
{
"Date": "2017-01",
"scales": 145
},
{
"Date": "2017-02",
"scales": 207
}
]
基础曲线图
在这里插入图片描述
import { Line } from '@antv/g2plot';
fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
.then((res) => res.json())
.then((data) => {
const line = new Line('container', {
data,
padding: 'auto',
xField: 'Date',
yField: 'scales',
xAxis: {
// type: 'timeCat',
tickCount: 5,
},
smooth: true,
});
line.render();
});
[
{
"Date": "2010-01",
"scales": 1998
},
{
"Date": "2010-02",
"scales": 1850
},
{
"Date": "2010-03",
"scales": 1720
},
{
"Date": "2010-04",
"scales": 1818
},
{
"Date": "2010-05",
"scales": 1920
},
{
"Date": "2010-06",
"scales": 1802
},
{
"Date": "2010-07",
"scales": 1945
},
{
"Date": "2010-08",
"scales": 1856
},
{
"Date": "2010-09",
"scales": 2107
},
{
"Date": "2010-10",
"scales": 2140
},
{
"Date": "2010-11",
"scales": 2311
},
{
"Date": "2010-12",
"scales": 1972
},
{
"Date": "2011-01",
"scales": 1760
},
{
"Date": "2011-02",
"scales": 1824
},
{
"Date": "2011-03",
"scales": 1801
},
{
"Date": "2011-04",
"scales": 2001
},
{
"Date": "2011-05",
"scales": 1640
},
{
"Date": "2011-06",
"scales": 1502
},
{
"Date": "2011-07",
"scales": 1621
},
{
"Date": "2011-08",
"scales": 1480
},
{
"Date": "2011-09",
"scales": 1549
},
{
"Date": "2011-10",
"scales": 1390
},
{
"Date": "2011-11",
"scales": 1325
},
{
"Date": "2011-12",
"scales": 1250
},
{
"Date": "2012-01",
"scales": 1394
},
{
"Date": "2012-02",
"scales": 1406
},
{
"Date": "2012-03",
"scales": 1578
},
{
"Date": "2012-04",
"scales": 1465
},
{
"Date": "2012-05",
"scales": 1689
},
{
"Date": "2012-06",
"scales": 1755
},
{
"Date": "2012-07",
"scales": 1495
},
{
"Date": "2012-08",
"scales": 1508
},
{
"Date": "2012-09",
"scales": 1433
},
{
"Date": "2012-10",
"scales": 1344
},
{
"Date": "2012-11",
"scales": 1201
},
{
"Date": "2012-12",
"scales": 1065
},
{
"Date": "2013-01",
"scales": 1255
},
{
"Date": "2013-02",
"scales": 1429
},
{
"Date": "2013-03",
"scales": 1398
},
{
"Date": "2013-04",
"scales": 1678
},
{
"Date": "2013-05",
"scales": 1524
},
{
"Date": "2013-06",
"scales": 1688
},
{
"Date": "2013-07",
"scales": 1500
},
{
"Date": "2013-08",
"scales": 1670
},
{
"Date": "2013-09",
"scales": 1734
},
{
"Date": "2013-10",
"scales": 1699
},
{
"Date": "2013-11",
"scales": 1508
},
{
"Date": "2013-12",
"scales": 1680
},
{
"Date": "2014-01",
"scales": 1750
},
{
"Date": "2014-02",
"scales": 1602
},
{
"Date": "2014-03",
"scales": 1834
},
{
"Date": "2014-04",
"scales": 1722
},
{
"Date": "2014-05",
"scales": 1430
},
{
"Date": "2014-06",
"scales": 1280
},
{
"Date": "2014-07",
"scales": 1367
},
{
"Date": "2014-08",
"scales": 1155
},
{
"Date": "2014-09",
"scales": 1289
},
{
"Date": "2014-10",
"scales": 1104
},
{
"Date": "2014-11",
"scales": 1246
},
{
"Date": "2014-12",
"scales": 1098
},
{
"Date": "2015-01",
"scales": 1189
},
{
"Date": "2015-02",
"scales": 1276
},
{
"Date": "2015-03",
"scales": 1033
},
{
"Date": "2015-04",
"scales": 956
},
{
"Date": "2015-05",
"scales": 845
},
{
"Date": "2015-06",
"scales": 1089
},
{
"Date": "2015-07",
"scales": 944
},
{
"Date": "2015-08",
"scales": 1043
},
{
"Date": "2015-09",
"scales": 893
},
{
"Date": "2015-10",
"scales": 840
},
{
"Date": "2015-11",
"scales": 934
},
{
"Date": "2015-12",
"scales": 810
},
{
"Date": "2016-01",
"scales": 782
},
{
"Date": "2016-02",
"scales": 1089
},
{
"Date": "2016-03",
"scales": 745
},
{
"Date": "2016-04",
"scales": 680
},
{
"Date": "2016-05",
"scales": 802
},
{
"Date": "2016-06",
"scales": 697
},
{
"Date": "2016-07",
"scales": 583
},
{
"Date": "2016-08",
"scales": 456
},
{
"Date": "2016-09",
"scales": 524
},
{
"Date": "2016-10",
"scales": 398
},
{
"Date": "2016-11",
"scales": 278
},
{
"Date": "2016-12",
"scales": 195
},
{
"Date": "2017-01",
"scales": 145
},
{
"Date": "2017-02",
"scales": 207
}
]
配置折线数据点样式
在这里插入图片描述
import { Line } from '@antv/g2plot';
const data = [
{ year: '1991', value: 3 },
{ year: '1992', value: 4 },
{ year: '1993', value: 3.5 },
{ year: '1994', value: 5 },
{ year: '1995', value: 4.9 },
{ year: '1996', value: 6 },
{ year: '1997', value: 7 },
{ year: '1998', value: 9 },
{ year: '1999', value: 13 },
];
const line = new Line('container', {
data,
xField: 'year',
yField: 'value',
label: {},
point: {
size: 5,
shape: 'diamond',
style: {
fill: 'white',
stroke: '#5B8FF9',
lineWidth: 2,
},
},
tooltip: { showMarkers: false },
state: {
active: {
style: {
shadowBlur: 4,
stroke: '#000',
fill: 'red',
},
},
},
interactions: [{ type: 'marker-active' }],
});
line.render();
折线图y轴镜像反转
在这里插入图片描述
import { Line } from '@antv/g2plot';
const data = [
{ Date: '2021-10-01', rating: 1 },
{ Date: '2021-10-02', rating: 3 },
{ Date: '2021-10-03', rating: 8 },
{ Date: '2021-10-04', rating: 12 },
{ Date: '2021-10-05', rating: 30 },
];
const line = new Line('container', {
data,
padding: 'auto',
xField: 'Date',
yField: 'rating',
reflect: 'y',
xAxis: {
// because coordinate is reflectY
position: 'top',
},
});
line.render();
带缩略轴的折线图
在这里插入图片描述
import { Line } from '@antv/g2plot';
fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
.then((res) => res.json())
.then((data) => {
const line = new Line('container', {
data,
padding: 'auto',
xField: 'Date',
yField: 'scales',
xAxis: {
tickCount: 5,
},
slider: {
start: 0.1,
end: 0.5,
},
});
line.render();
});
带标注点的折线图
在这里插入图片描述
import { G2, Line } from '@antv/g2plot';
G2.registerShape('point', 'breath-point', {
draw(cfg, container) {
const data = cfg.data;
const point = { x: cfg.x, y: cfg.y };
const group = container.addGroup();
if (data.time === '14.20' && data.date === 'today') {
const decorator1 = group.addShape('circle', {
attrs: {
x: point.x,
y: point.y,
r: 10,
fill: cfg.color,
opacity: 0.5,
},
});
const decorator2 = group.addShape('circle', {
attrs: {
x: point.x,
y: point.y,
r: 10,
fill: cfg.color,
opacity: 0.5,
},
});
const decorator3 = group.addShape('circle', {
attrs: {
x: point.x,
y: point.y,
r: 10,
fill: cfg.color,
opacity: 0.5,
},
});
decorator1.animate(
{
r: 20,
opacity: 0,
},
{
duration: 1800,
easing: 'easeLinear',
repeat: true,
}
);
decorator2.animate(
{
r: 20,
opacity: 0,
},
{
duration: 1800,
easing: 'easeLinear',
repeat: true,
delay: 600,
}
);
decorator3.animate(
{
r: 20,
opacity: 0,
},
{
duration: 1800,
easing: 'easeLinear',
repeat: true,
delay: 1200,
}
);
group.addShape('circle', {
attrs: {
x: point.x,
y: point.y,
r: 6,
fill: cfg.color,
opacity: 0.7,
},
});
group.addShape('circle', {
attrs: {
x: point.x,
y: point.y,
r: 1.5,
fill: cfg.color,
},
});
}
return group;
},
});
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/cpu-data.json')
.then((res) => res.json())
.then((data) => {
const plot = new Line('container', {
autoFit: true,
height: 500,
data,
meta: {
cpu: {
time: { type: 'cat' },
max: 100,
min: 0,
},
},
xField: 'time',
yField: 'cpu',
seriesField: 'date',
tooltip: { showMarkers: false },
point: {
shape: 'breath-point',
},
});
plot.render();
});
条件样式折线图
在这里插入图片描述
import { Line } from '@antv/g2plot';
fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
.then((res) => res.json())
.then((data) => {
const line = new Line('container', {
data,
padding: 'auto',
xField: 'Date',
yField: 'scales',
annotations: [
// 低于中位数颜色变化
{
type: 'regionFilter',
start: ['min', 'median'],
end: ['max', '0'],
color: '#F4664A',
},
{
type: 'text',
position: ['min', 'median'],
content: '中位数',
offsetY: -4,
style: {
textBaseline: 'bottom',
},
},
{
type: 'line',
start: ['min', 'median'],
end: ['max', 'median'],
style: {
stroke: '#F4664A',
lineDash: [2, 2],
},
},
],
});
line.render();
});
自定义标记折线图
在这里插入图片描述
import { Line, G2 } from '@antv/g2plot';
import { each, findIndex } from '@antv/util';
const { InteractionAction, registerInteraction, registerAction } = G2;
const data = [
{ year: '1991', value: 3 },
{ year: '1992', value: 4 },
{ year: '1993', value: 3.5 },
{ year: '1994', value: 5 },
{ year: '1995', value: 4.9 },
{ year: '1996', value: 6 },
{ year: '1997', value: 7 },
{ year: '1998', value: 9 },
{ year: '1999', value: 13 },
];
G2.registerShape('point', 'custom-point', {
draw(cfg, container) {
const point = { x: cfg.x, y: cfg.y };
const group = container.addGroup();
group.addShape('circle', {
name: 'outer-point',
attrs: {
x: point.x,
y: point.y,
fill: cfg.color || 'red',
opacity: 0.5,
r: 6,
},
});
group.addShape('circle', {
name: 'inner-point',
attrs: {
x: point.x,
y: point.y,
fill: cfg.color || 'red',
opacity: 1,
r: 2,
},
});
return group;
},
});
export class CustomMarkerAction extends InteractionAction {
active() {
const view = this.getView();
const evt = this.context.event;
if (evt.data) {
// items: 数组对象,当前 tooltip 显示的每条内容
const { items } = evt.data;
const pointGeometries = view.geometries.filter((geom) => geom.type === 'point');
each(pointGeometries, (pointGeometry) => {
each(pointGeometry.elements, (pointElement, idx) => {
const active = findIndex(items, (item) => item.data === pointElement.data) !== -1;
const [point0, point1] = pointElement.shape.getChildren();
if (active) {
// outer-circle
point0.animate(
{
r: 10,
opacity: 0.2,
},
{
duration: 1800,
easing: 'easeLinear',
repeat: true,
}
);
// inner-circle
point1.animate(
{
r: 6,
opacity: 0.4,
},
{
duration: 800,
easing: 'easeLinear',
repeat: true,
}
);
} else {
this.resetElementState(pointElement);
}
});
});
}
}
reset() {
const view = this.getView();
const points = view.geometries.filter((geom) => geom.type === 'point');
each(points, (point) => {
each(point.elements, (pointElement) => {
this.resetElementState(pointElement);
});
});
}
resetElementState(element) {
const [point0, point1] = element.shape.getChildren();
point0.stopAnimate();
point1.stopAnimate();
const { r, opacity } = point0.get('attrs');
point0.attr({ r, opacity });
const { r: r1, opacity: opacity1 } = point1.get('attrs');
point1.attr({ r: r1, opacity: opacity1 });
}
getView() {
return this.context.view;
}
}
registerAction('custom-marker-action', CustomMarkerAction);
registerInteraction('custom-marker-interaction', {
start: [
{
trigger: 'tooltip:show',
action: 'custom-marker-action:active',
},
],
end: [
{
trigger: 'tooltip:hide',
action: 'custom-marker-action:reset',
},
],
});
const line = new Line('container', {
data,
xField: 'year',
yField: 'value',
label: {},
point: {
size: 5,
shape: 'custom-point',
style: {
fill: 'white',
stroke: '#5B8FF9',
lineWidth: 2,
},
},
tooltip: { showMarkers: false },
state: {
active: {
style: {
shadowBlur: 4,
stroke: '#000',
fill: 'red',
},
},
},
interactions: [{ type: 'custom-marker-interaction' }],
});
line.render();
领取专属 10元无门槛券
私享最新 技术干货