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