AntV G2可视化引擎, 有用过嘛？

[HerryLo]

Antv 蚂蚁金福提供的数据可视化解决方案，是一系列的解决方案的集合，包含 G2、G6、F2、L7 以及一套完整的图表使用和设计规范。由于有大厂支持，AntV迭代稳定，文档和示例非常的齐全，这次因为业务需求的原因使用到了AntV G2数据可视化引擎，所以想记录下自己使用和学习的心得。

G2 一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。

G2 使用

npm 安装

npm install @antv/g2 --save

下面将G2 基础折线图作为示例代码分析([email protected]版本):

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 },
];

// 初始化,指定容器DOM id、高度
const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

// data 数据
chart.data(data);
// scale 度量配置, 生成坐标轴刻度值
chart.scale({
  year: {
    range: [0, 1],
  },
  value: {
    min: 0,
    nice: true,
  },
});

// tooltip 提示信息，是指当鼠标悬停在图形上时，以提示框的形式展示该点的数据
chart.tooltip({
  showCrosshairs: true, // 展示 Tooltip 辅助线
  shared: true,
});

// 几何图形 Geometry;
// 使用 line 绘制折线图
// 使用 position 通道将对应的变量映射到 x 和 y 位置空间上；
// 使用label 展示value值；
chart.line().position('year*value').label('value');

// 使用 point 绘制点
// 使用 position 将对应的变量映射到 x 和 y 位置空间上；
chart.point().position('year*value');

// 渲染
chart.render();

以上代码取自官方示例代码，Antv G2 基础折线图。会发现G2图表调用是通过函数链式调用来完成，相对于Echart，我个人觉得G2这样的开发流程相对的顺手，使用方法觉得比较舒适。（不分前端框架，使用起来都很香）。

以上只是拿折线图作为示例，大致说明了一下创建G2图表的大致调用过程。当然G2 也是支持其他类型的图表。下面就以我使用过的饼状图、柱状图作为例子，来梳理一下G2使用的大致脉络。

G2饼状图/柱状图

下面的例子中不会出现data数据变量，相关的实际图表可以参考完成示例代码

## 饼状图，完整示例参考：https://g2.antv.vision/zh/examples/pie/basic#labelline

const chart = new window.G2.Chart({
  container: domID,
  forceFit: true,
  height: 210,
  width: 230
});
chart.data(data);

// coordinate 坐标系
// theta：一种特殊的极坐标系，半径长度固定，仅仅将数据映射到角度，常用于饼图的绘制；
chart.coordinate('theta');

// tooltip 提示
// 不展示提示标题；
chart.tooltip({
  showTitle: false
});

// 几何图形 Geometry
// 使用 interval 绘制饼图；
// 使用 position 通道 将对应的变量映射percent上；
// 使用 color 通道 根据 item 字段的数据值进行颜色的映射；
// 使用 adjust 调整数据 将同一个分类的数据值累加起来；
chart.interval().position('percent').color('item').adjust('stack');

// legend 图例
// 不展示图例;
chart.legend(false);

chart.render();

几何图形 GeometryAPI——interval用于绘制柱状图、直方图、南丁格尔玫瑰图、饼图、条形环图（玉缺图）、漏斗图等，而position、color均是 几何图形 Geometry的通道映射规则。

图例 legend、提示 tooltip、坐标系 coordinate、数据 data均是单独控制图表。

## 柱状图，完整示例参考：https://g2.antv.vision/zh/examples/column/basic#basic
const chart = new window.G2.Chart({
  container: domID,
  autoFit: true,
  height: 200,
  width: 400
});
chart.data(data1);

// scale 度量
// num是y轴的值，nice=true是自动调整y轴刻度
chart.scale('num', {
  nice: true
});

chart.tooltip({
  showMarkers: false
});

// interaction 交互
// 鼠标在画布上移动是，对应的区域出现背景框
chart.interaction('active-region');

// 几何图形 Geometry
// 使用 interval 绘制柱状图；
chart.interval().position('gydw_mc*num');

chart.render();

G2 基类

上面出现新的方法 交互 interaction用来调整图表与用户的交互展示。

几何图形 Geometry—— line、point、interval、area（绘制线、点、饼/柱、面积图）等
数据 data
度量 scale
图例 legend
提示 tooltip
交互 interaction
坐标系 coordinate

这些是在例子中出现的方法，如果按照官方的介绍，以上就是G2 图表中的基类，当然，上面只包含部分，还有其他基类，如 坐标轴 Axis、滚动条 Scrollbar...等。

window.G2.Chart创建图表之后，即可通过图表实例，调用相关的基类方法，对图表进行定制化，最后render渲染即可。对于不同的配置，只需要找到相关基类属性方法即可。只要了解了相关基类配置，对于图表的使用也会相当顺手。

现在再来看下面这串代码，你是否会特别清晰

let chart = window.G2.Chart({container: domID});

chart.data(data);

chart.scale({
    x: {nice: true},
    x: {nice: true}
});

chart.interval().position('gydw_mc*num');
chart.line().position('year*value').label('value');
chart.point().position('year*value');

chart.tooltip({
    showMarkers: false
});
chart.legend(false)

chart.render();

希望上面的内容对你使用antv G2 有所帮助，希望可以帮到你。

参考：

Antd G2 官方文档

书栈网：G2 4.x 官方教程