关于antv:AntV-G2可视化引擎-有用过嘛

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

下面呈现新的办法 交互 interaction用来调整图表与用户的交互展现。

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

这些是在例子中呈现的办法，如果依照官网的介绍，以上就是 G2 图表中的基类，当然，下面只蕴含局部，还有其余基类，如 坐标轴 Axis、滚动条 Scrollbar… 等。

window.G2.Chart创立图表之后，即可通过图表实例，调用相干的基类办法，对图表进行定制化，最初 render 渲染即可。对于不同的配置，只须要找到相干基类属性办法即可。只有理解了相干基类配置，对于图表的应用也会相当棘手。

参考：

Antd G2 官网文档

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