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

合集 - 前端开发(23)

1.第一次写博客，关于前端开发deMVC在js中的应用2016-07-122.react开发中的小细节2017-03-193.CSS开启硬件加速来提高网站性能2019-06-174.js中this的指向问题2019-06-105.Js面向对象构造函数继承2017-03-266.Js面向对象原型~构造函数2017-03-197.JavaScript如何工作：垃圾回收机制 + 常见的4种内存泄漏2019-10-288.Promise核心原理解析2019-09-279.图解javascript的this指向2019-09-1210.图解javascript原型链2019-09-0611.被闭包啪啪啪的打脸之 闭包的错误使用2019-08-2812.react解析: render的FiberRoot(三)2019-08-1013.个人小程序应用开发指南2019-07-2214.ES2019 / ES10有什么新功能?2019-06-2115.2022前端开发知识总结归纳（前端掌握知识）2022-10-3116.Axios源码解析：请求响应拦截器2021-12-02

17.AntV G2可视化引擎, 有用过嘛？2021-11-30

18.弄懂！ES6中的Iterator迭代器2020-06-1019.🔥[译] 正交设计组件的好处2020-01-0920.小程序开发指南之性能优化2019-12-0421.聊一聊，React开发中应该规避的点2019-11-2622.解析：让你弄懂redux原理2019-11-0523.关于Web GIS基础知识2024-03-26

收起

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

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

博文原文链接

G2 使用

npm 安装

npm install @antv/g2 --save

下面将G2 基础折线图作为示例代码分析(G2@4.0版本):

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 官方教程