1、开始

<1> 简介

G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成。

特性:

📦 开箱即用、默认好用的高质量统计图表
🎨 提炼自企业级产品的视觉语言和设计规范
📊 响应式图表：致力于解决图表在任何数据和显示尺寸下的基本可读性问题
🔳 图层化设计方法：在 G2Plot 体系下，图表不仅仅只是各不相关的实例，图层概念的引入提供了多图表组合叠联动，共同讲述一个数据故事的可能性

<2> npm安装

$ npm install @antv/g2plot

<3> 使用

index.html

<div id="container"></div>

index.js

import { Bar } from '@antv/g2plot';

const data = [
  { year: '1951 年', value: 38 },
  { year: '1952 年', value: 52 },
  { year: '1956 年', value: 61 },
  { year: '1957 年', value: 45 },
  { year: '1958 年', value: 48 },
];

const bar = new Bar('container', {
  data,
  xField: 'value',
  yField: 'year',
  seriesField: 'year',
  legend: {
    position: 'top-left',
  },
});

bar.render();

package.json

{
  "name": "b4zgu5--run",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "@antv/g2plot": "2.3.39"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-scripts": "latest"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

<4> 开发

# 安装依赖性
$ npm install

# 运行测试用例
$ npm run test

# 建立和运行网站，观察文件变化
$ npm run start

<5> 浏览器引入

<!-- 引入在线资源 -->
<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
<script>
  const { Line } = G2Plot;
</script>

<!-- 下载到本地 引入本地脚本 -->
<script src="./g2plot.min.js"></script>
<script>
  const { Line } = G2Plot;
</script>

2、折线图

import { Line } from '@antv/g2plot';

<1> 快速上手

import { Line } from '@antv/g2plot';

const data = [
  { year: '2016 年', value: 1770 },
  { year: '2017 年', value: 2540 },
  { year: '2018 年', value: 1850 },
  { year: '2019 年', value: 4101 },
  { year: '2020 年', value: 3333 },
];

const line = new Line('container', {
	data,
	xField: 'year',
	yField: 'value',
});

line.render();

<2>.浏览器引入

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="container" />
		<!-- 下载到本地 引入本地脚本 -->
		<script src="g2plot.min.js"></script>
		<!-- 引入在线资源 -->
		<!-- <script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script> -->

		<script src="test5.js"></script>
	</body>
</html>

test1.js

 const { Line } = G2Plot;

const data = [
  { year: '2016 年', value: 1770 },
  { year: '2017 年', value: 2540 },
  { year: '2018 年', value: 1850 },
  { year: '2019 年', value: 4101 },
  { year: '2020 年', value: 3333 },
];

const line = new Line('container', {
	data,
	xField: 'year',
	yField: 'value',
});

line.render();

<3> 引入json数据

【1】外部引入json数据:

// index.js
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,
      xField: 'Date',
      yField: 'scales',
    });

    line.render();
  });

【2】内部引入json数据:

import {Line} from '@antv/g2plot';

fetch('http://127.0.0.1:5000/data.json')
	.then((res) => res.json())
	.then((data) => {
		const line = new Line('container', {
			data,
			xField: 'Date',
			yField: 'scales',
		});

		line.render();
	});

<3> 折线图特性

【1】曲线图

曲线图是用曲线将一系列的数据点连接的图表, 对应的只需要配置 smooth: true 属性即可。

const line = new Line('container', {
	data,
	xField: 'year',
	yField: 'value',
	smooth: true
});

【2】阶梯型直线图

对应的只需要配置 stepType 属性即可。

options: {
  stepType: 'vh' // 可选项：hv | vh | hvh | vhv
}

const line = new Line('container', {
	data,
	xField: 'year',
	yField: 'value',
	stepType: 'vh',
});

3、柱状图

import { Column } from '@antv/g2plot';

<1> 快速上手

npm 方式引入:import { Column } from '@antv/g2plot';
浏览器引入:const {Column} = G2Plot;

import { Column } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json')
  .then((data) => data.json())
  .then((data) => {
    const stackedColumnPlot = new Column('container', {
      data,
      isStack: true,
      xField: 'year',
      yField: 'value',
      seriesField: 'type',
      label: {
        // 可手动配置 label 数据标签位置
        position: 'middle', // 'top', 'bottom', 'middle'
        // 可配置附加的布局方法
        layout: [
          // 柱形图数据标签位置自动调整
          { type: 'interval-adjust-position' },
          // 数据标签防遮挡
          { type: 'interval-hide-overlap' },
          // 数据标签文颜色自动调整
          { type: 'adjust-color' },
        ],
      },
    });

    stackedColumnPlot.render();
  });

<2> 柱状图特性

【1】堆叠柱状图

使用颜色不同的堆叠的柱形来显示各维度的数值。横轴标示出第一个分类维度，颜色标示出第二个分类维度，纵轴显示相应的值。

通过指定 seriesField 且设置 isStack: true 就可以创建堆叠柱状图。

const stackedColumnPlot = new Column('container', {
	data,
	isStack: true,
	/*...*/
});

const {Column} = G2Plot;
const data = [{
		"year": "1991",
		"value": 3,
		"type": "Lon"
	},
	{
		"year": "1992",
		"value": 4,
		"type": "Lon"
	},
	{
		"year": "1993",
		"value": 3.5,
		"type": "Lon"
	},
	{
		"year": "1994",
		"value": 5,
		"type": "Lon"
	},
	{
		"year": "1995",
		"value": 4.9,
		"type": "Lon"
	},
	{
		"year": "1996",
		"value": 6,
		"type": "Lon"
	},
	{
		"year": "1997",
		"value": 7,
		"type": "Lon"
	},
	{
		"year": "1998",
		"value": 9,
		"type": "Lon"
	},
	{
		"year": "1999",
		"value": 13,
		"type": "Lon"
	},
	{
		"year": "1991",
		"value": 3,
		"type": "Bor"
	},
	{
		"year": "1992",
		"value": 4,
		"type": "Bor"
	},
	{
		"year": "1993",
		"value": 3.5,
		"type": "Bor"
	},
	{
		"year": "1994",
		"value": 5,
		"type": "Bor"
	},
	{
		"year": "1995",
		"value": 4.9,
		"type": "Bor"
	},
	{
		"year": "1996",
		"value": 6,
		"type": "Bor"
	},
	{
		"year": "1997",
		"value": 7,
		"type": "Bor"
	},
	{
		"year": "1998",
		"value": 9,
		"type": "Bor"
	},
	{
		"year": "1999",
		"value": 13,
		"type": "Bor"
	}
];

const stackedColumnPlot = new Column('container', {
	data,
	isStack: true,
	xField: 'year',
	yField: 'value',
	seriesField: 'type',
	label: {
		// 可手动配置 label 数据标签位置
		position: 'middle', // 'top', 'bottom', 'middle'
		// 可配置附加的布局方法
		layout: [
			// 柱形图数据标签位置自动调整
			{type: 'interval-adjust-position'},
			// 数据标签防遮挡
			{type: 'interval-hide-overlap'},
			// 数据标签文颜色自动调整
			{type: 'adjust-color'},
		],
	},
});

stackedColumnPlot.render();

【2】分组柱状图

const stackedColumnPlot = new Column('container', {
  data,
  isGroup: true,
  /*...*/
});

const {Column} = G2Plot;

const data = [
  {
    name: 'London',
    月份: 'Jan.',
    月均降雨量: 18.9,
  },
  {
    name: 'London',
    月份: 'Feb.',
    月均降雨量: 28.8,
  },
  {
    name: 'London',
    月份: 'Mar.',
    月均降雨量: 39.3,
  },
  {
    name: 'London',
    月份: 'Apr.',
    月均降雨量: 81.4,
  },
  {
    name: 'London',
    月份: 'May',
    月均降雨量: 47,
  },
  {
    name: 'London',
    月份: 'Jun.',
    月均降雨量: 20.3,
  },
  {
    name: 'London',
    月份: 'Jul.',
    月均降雨量: 24,
  },
  {
    name: 'London',
    月份: 'Aug.',
    月均降雨量: 35.6,
  },
  {
    name: 'Berlin',
    月份: 'Jan.',
    月均降雨量: 12.4,
  },
  {
    name: 'Berlin',
    月份: 'Feb.',
    月均降雨量: 23.2,
  },
  {
    name: 'Berlin',
    月份: 'Mar.',
    月均降雨量: 34.5,
  },
  {
    name: 'Berlin',
    月份: 'Apr.',
    月均降雨量: 99.7,
  },
  {
    name: 'Berlin',
    月份: 'May',
    月均降雨量: 52.6,
  },
  {
    name: 'Berlin',
    月份: 'Jun.',
    月均降雨量: 35.5,
  },
  {
    name: 'Berlin',
    月份: 'Jul.',
    月均降雨量: 37.4,
  },
  {
    name: 'Berlin',
    月份: 'Aug.',
    月均降雨量: 42.4,
  },
];

const stackedColumnPlot = new Column('container', {
  data,
  isGroup: true,
  xField: '月份',
  yField: '月均降雨量',
  seriesField: 'name',
  /** 设置颜色 */
  // color: ['#1ca9e6', '#f88c24'],
  /** 设置间距 */
  // marginRatio: 0.1,
  label: {
    // 可手动配置 label 数据标签位置
    position: 'middle', // 'top', 'middle', 'bottom'
    // 可配置附加的布局方法
    layout: [
      // 柱形图数据标签位置自动调整
      { type: 'interval-adjust-position' },
      // 数据标签防遮挡
      { type: 'interval-hide-overlap' },
      // 数据标签文颜色自动调整
      { type: 'adjust-color' },
    ],
  },
});

stackedColumnPlot.render();

【3】指定柱子最大宽度、最小宽度

const columnPlot = new Column('container', {
  /*...*/
  minColumnWidth: 20,
  maxColumnWidth: 50,
});

const {Column} = G2Plot;

const data = [
  {
    type: '家具家电',
    sales: 38,
  },
  {
    type: '粮油副食',
    sales: 52,
  },
  {
    type: '生鲜水果',
    sales: 61,
  },
  {
    type: '美容洗护',
    sales: 145,
  }
];

const columnPlot = new Column('container', {
  data,
  xField: 'type',
  yField: 'sales',
  xAxis: {
    label: {
      autoHide: true,
      autoRotate: false,
    },
  },
  meta: {
    type: {
      alias: '类别',
    },
    sales: {
      alias: '销售额',
    },
  },
  minColumnWidth: 20,
  maxColumnWidth: 50,
});

columnPlot.render();

【4】设置柱子的圆角

const column = new Column('container', {
	/*...*/
	columnStyle: {
		radius: [20, 20, 0, 0],
	},
});

const {Column} = G2Plot;
const data = [
  { "city": "杭州", "type": "水果", "value": 9000 },
  { "city": "杭州", "type": "米面", "value": 8500 },
  { "city": "杭州", "type": "特产零食", "value": 10000 },
  { "city": "杭州", "type": "茶叶", "value": 6000 },
  { "city": "北京", "type": "水果", "value": 17000 },
  { "city": "北京", "type": "米面", "value": 6000 },
  { "city": "北京", "type": "特产零食", "value": 7000 },
  { "city": "北京", "type": "茶叶", "value": 10000 },
  { "city": "上海", "type": "水果", "value": 18000 },
  { "city": "上海", "type": "米面", "value": 11000 },
  { "city": "上海", "type": "特产零食", "value": 15000 },
  { "city": "上海", "type": "茶叶", "value": 14000 }
];

const column = new Column('container', {
	data,
	xField: 'city',
	yField: 'value',
	seriesField: 'type',
	isGroup: 'true',
	columnStyle: {
		radius: [20, 20, 0, 0],
	},
});

column.render();

【5】设置柱子的背景样式

通过设置 columnBackground.style 可以指定柱子的背景样式。

const column = new Column('container', {
	/*...*/
	columnBackground: {
		style: {
			fill: 'rgba(170, 170, 255, 1.0)',
		},
	},
});

const {Column} = G2Plot;
const data = [
  { "city": "杭州", "type": "水果", "value": 9000 },
  { "city": "北京", "type": "茶叶", "value": 10000 },
  { "city": "上海", "type": "茶叶", "value": 14000 }
];

const column = new Column('container', {
	data,
	xField: 'city',
	yField: 'value',
	seriesField: 'type',
	isGroup: 'true',
	columnBackground: {
		style: {
			fill: 'rgba(170, 170, 255, 1.0)',
		},
	},
});

column.render();

4、条形图

import { Bar } from '@antv/g2plot';

<1>快速上手

const {Bar} = G2Plot

const data = [
  { year: '1951 年', value: 38 },
  { year: '1952 年', value: 52 },
  { year: '1956 年', value: 61 },
  { year: '1957 年', value: 145 },
  { year: '1958 年', value: 48 },
];

const bar = new Bar('container', {
  data,
  xField: 'value',
  yField: 'year',
  seriesField: 'year',
  legend: {
    position: 'top-left',
  },
});

bar.render();

<2> 条形图特性

【1】指定柱子最大宽度、最小宽度（同柱状图）

const barPlot = new Bar('container', {
  /*...*/
  minBarWidth: 20,
  maxBarWidth: 20,
});

【2】设置柱子的圆角（同柱状图）

const stackedBarPlot = new Bar('container', {
  /*...*/
  barStyle: { radius: [2, 2, 0, 0] },
});

5、面积图

import { Area } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/bmw-prod/360c3eae-0c73-46f0-a982-4746a6095010.json')
  .then((res) => res.json())
  .then((data) => {
    const area = new Area('container', {
      data,
      xField: 'timePeriod',
      yField: 'value',
      meta: {
        timePeriod: {
          range: [0, 1],
        },
      },
    });
    area.render();
  });

6、色块图 / 热力图

色块图，由小色块组成的图表。色块图的最大好处是，2 维画布上的空间利用率高。

7、仪表盘

import { Gauge } from '@antv/g2plot';

import { Gauge } from '@antv/g2plot';

const gauge = new Gauge('container', {
  percent: 0.75,
  range: {
    color: '#5B8FF9',
  },
  statistic: {
    content: {
      formatter: ({ percent }) => `Rate: ${(percent * 100).toFixed(0)}%`,
    },
  },
});

gauge.render();

<1>.自定义指示器的样式

通过设置 indicator 来自定义指示器的样式，指示器包含指针 pointer和指针针头pin样式。

import { Gauge } from '@antv/g2plot';

const gauge = new Gauge('container', {
  percent: 0.75,
  range: {
    color: '#30BF78',
  },
  indicator: {//自定义指示器的样式
    pointer: {
      style: {
        stroke: '#D0D0D0',
      },
    },
    pin: {
      style: {
        stroke: '#D0D0D0',
      },
    },
  },
  axis: {
    label: {
      formatter(v) {
        return Number(v) * 100;
      },
    },
    subTickLine: {
      count: 3,
    },
  },
  statistic: {
    content: {
      formatter: ({ percent }) => `Rate: ${(percent * 100).toFixed(0)}%`,
      style: {
        color: 'rgba(0,0,0,0.65)',
        fontSize: 48,
      },
    },
  },
});

gauge.render();

<2> 自定义辅助圆弧的样式

通过设置 range的 ‘ticks’’ 和 ‘color’ 来自定义辅助圆弧的样式

// 代表着，0 - 1/3: #F4664A, 1/3 - 2/3: #FAAD14, 2/3 - 1: #30BF78
{
  range: {
    ticks: [0, 1/3, 2/3, 1],
    color: ['#F4664A', '#FAAD14', '#30BF78'],
  },
}

import { Gauge } from '@antv/g2plot';

const gauge = new Gauge('container', {
  percent: 0.75,
  range: {
    ticks: [0, 1 / 3, 2 / 3, 1],
    color: ['#F4664A', '#FAAD14', '#30BF78'],
  },
  indicator: {
    pointer: {
      style: {
        stroke: '#D0D0D0',
      },
    },
    pin: {
      style: {
        stroke: '#D0D0D0',
      },
    },
  },
  statistic: {
    content: {
      style: {
        fontSize: '36px',
        lineHeight: '36px',
      },
    },
  },
});

gauge.render();

8、饼图

import { Pie } from '@antv/g2plot';

const data = [
  { type: '分类一', value: 27 },
  { type: '分类二', value: 25 },
  { type: '分类三', value: 18 },
  { type: '分类四', value: 15 },
  { type: '分类五', value: 10 },
  { type: '其他', value: 5 },
];

const piePlot = new Pie('container', {
  data,
  angleField: 'value',
  colorField: 'type',
});

piePlot.render();

<1> 饼图特性:

【1】环图

在 G2Plot 中，只需要指定innerRadius 就可以创建环形饼图

const piePlot = new Pie('container', {
	/*...*/
	innerRadius: 0.6
	/*...*/
)};

import { Pie } from '@antv/g2plot';

const data = [
  { type: '分类一', value: 27 },
  { type: '分类二', value: 25 },
  { type: '分类三', value: 18 },
  { type: '分类四', value: 15 },
  { type: '分类五', value: 10 },
  { type: '其他', value: 5 },
];

const piePlot = new Pie('container', {
  appendPadding: 10,
  data,
  angleField: 'value',
  colorField: 'type',
  radius: 1,
  innerRadius: 0.6,
  label: {
    type: 'inner',
    offset: '-50%',
    content: '{value}',
    style: {
      textAlign: 'center',
      fontSize: 14,
    },
  },
  interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
  statistic: {
    title: false,
    content: {
      style: {
        whiteSpace: 'pre-wrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
      },
      content: 'AntV\nG2Plot',
    },
  },
});

piePlot.render();

【3】扇形图

通过设置饼图的startAngle (开始角度) 和 endAngle (结束角度)，我们可以将饼图变成扇形图

const piePlot = new Pie('container', {
  /*...*/
  // 设置圆弧起始角度
  startAngle: Math.PI,
  endAngle: Math.PI * 1.5,
  /*...*/
});

import { Pie } from '@antv/g2plot';

const data = [
  { type: '分类一', value: 27 },
  { type: '分类二', value: 25 },
  { type: '分类三', value: 18 },
  { type: '分类四', value: 15 },
  { type: '分类五', value: 10 },
  { type: '其他', value: 5 },
];

const piePlot = new Pie('container', {
  appendPadding: 10,
  data,
  angleField: 'value',
  colorField: 'type',
  radius: 1,
  // 设置圆弧起始角度
  startAngle: Math.PI,
  endAngle: Math.PI * 1.5,
  label: {
    type: 'inner',
    offset: '-8%',
    content: '{name}',
    style: { fontSize: 18 },
  },
  interactions: [{ type: 'element-active' }],
  pieStyle: {
    lineWidth: 0,
  },
});

piePlot.render();