G2 如何绘制一个常见的折柱饼图

Question

折柱饼图系列是我们最常用的几个图表，在 BI 数据分析产品了，折柱饼系列图表的占比可以超过 80%。学会使用 G2 绘制这几个图，基本了解 G2 的使用，也可以满足很多的业务需求了。

在做图之前，我们可以先了解一下 G2 是什么？

G2 是一套基于图形语法理论的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。

准备阶段

安装

使用之前我们需要安装一下 G2。可以使用 npm install，也可以直接使用 script 标签去引入远程的 CDN 资源。

$ npm install @antv/g2 --save

<!-- 引入在线资源，可以选择你需要的 g2 版本 -->
<script src="https://unpkg.com/@antv/g2"></script>

准备一个 DOM 节点

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

绘制图形

折线图

import { Chart } from '@antv/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 },
];

// 1. 新建图表实例
const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

// 2. 设置数据
chart.data(data);

// 3. 折线图
chart.line().position('year*value').label('value');

// 4. 渲染
chart.render();

柱形图

在折线图的代码示例基础上，做一下的代码变更。

- // 3. 折线图
- chart.line().position('year*value').label('value');
+ // 3. 柱形图
+ chart.interval().position('year*value').label('value');

饼图

在柱形图的基础上，做一下代码变更。

- // 3. 柱形图
- chart.interval().position('year*value').label('value');
+ // 设置坐标系
+ chart.coordinate('theta');
+ 
+ // 3. 饼图是由柱图经过坐标系变化而来的
+ chart.interval()
+   .position('value')
+   .adjust('stack')
+   .color('year')

总结一下

从这三个图的例子可以看出，使用 G2 绘制折柱饼的代码差异很小，为什么？**因为 G2 基于图形语法，图形语法通过几个互相正交的概念，就可以表达不同的可视化图表。**这些可视化概念主要有：

• scale 比例尺
• coordinate 坐标系
• geometry / marker 图形

更多图表的绘制以及教程文档，可以参考 G2 官网的 图表示例 和 教程 。