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

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