g2plot 基础折线图相关示例

基础折线图

在这里插入图片描述

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();