9102 年，螞蟻金服前端是怎麼寫圖表的?

相信不少開發者都有過被圖表搞得很抓狂瞬間：業務壓力大，想快速上個圖表，折騰半天配出來卻醜的不能看；Demo 裏明明看着很美，換成真實數據馬上變成買家秀了..... 很長一段時間裏，這些問題也在困擾着螞蟻的前端，寫個輕量級圖表，怎麼就那麼難？

爲了讓圖表開發過程變得更加簡單、愉悅，螞蟻金服可視化團隊結合阿里經濟體內外 20000+ 業務系統和日均千萬級 UV 產品中提煉出來的業務場景和圖表需求，提煉出一套通用統計圖表庫— G2Plot。

有了它，螞蟻金服前端使用圖表的平常是這樣的：

前端小K今天收到了一個時間比較緊的業務需求 — 在系統快速搭建一個面板，用圖表展現某個產品的銷售狀況。小K跟 PD 過了一下，決定使用 G2Plot 比較經典的面積圖、條形圖、環圖這三個圖表類型。

美麗直觀的面積圖

面積圖是小K要製做的第一個圖表，他將使用 堆疊面積圖 來展示多個指標的時間變化趨勢。

Step1: 引入圖表類型

import { StackArea } from '@antv/g2plot';複製代碼

Step2: 準備數據

G2Plot 的數據源格式是 JSON 數組，數組的每一個元素是一個標準 JSON 對象。

下面這份數據描述了 2016年-2018 年，每一個地區每季度的銷售額。展現空間有限，僅以一個季度爲例展現數據樣本。

const data = [
  { time: '2018季1', area: '東北', value: 190567 },
  { time: '2018季1', area: '華北', value: 80122 },
  { time: '2018季1', area: '華東', value: 223720 },
  { time: '2018季1', area: '西北', value: 157845 },
  { time: '2018季1', area: '中南', value: 60343 },
  { time: '2018季1', area: '西南', value: 98810 },
];複製代碼

Step3: 生成圖表   掛載數據源，使用數據中的 'time' 字段做爲 X 軸，'value' 字段做爲 Y 軸，以 'area' 字段將數據分組並堆疊。

const area = new StackArea(
  document.getElementById('area-container'), // 獲取圖表容器
  {
    data,
    xField: 'time',
    yField: 'value',
    stackField: 'area'
  } // 圖表配置項
);
area.render();複製代碼

Done!   只須要7行代碼！AntV 強大的設計體系加持下，能夠看到默認渲染出的圖表質量已經至關高了。

不太小K是個精益求精的前端，他還要對圖表的一些細節作進一步優化：

step4: 加個標題

爲圖表添加 標題和描述 可以幫助用戶更直觀的得到圖表要表達的主題信息。

const area = new StackArea(document.getElementById('area-container'), {
  title: {
    visible: true,
    text: '地區銷售趨勢',
  },
  data,
  xField: 'time',
  yField: 'value',
  stackField: 'area'
});
area.render();複製代碼

step5: 座標軸優化

正待完工之際，PD 和設計師一齊表示他們還有話要說。兩人都以爲圖表Y軸有優化空間：設計師認爲 Y 軸的刻度太密，4 個刻度在視覺上比較美觀，而 PD 以爲 Y 軸的標籤用千分位顯示更標準。面對這些需求，小K表示本身情緒穩定。

const area = new StackArea(document.getElementById('area-container'), {
  title: {
    visible: true,
    text: '地區銷售趨勢',
  },
  data,
  xField: 'time',
  yField: 'value',
  stackField: 'area',
  yAxis: {
    tickCount: 4,
    label: {
      formatter: (v) => {
        return Math.floor(v / 1000) + 'k';
      },
    },
  },
});
area.render();複製代碼

完工，只須要不到 20行 代碼，輕鬆生成堆疊面積圖。

言簡意賅的條形圖

接下來要製做的第二個圖表是 堆疊條形圖 ，它將用來展現各產品品類在地區間的銷量對比。生成圖表的前置步驟跟堆疊面積圖同樣，咱們直接來到核心環節：

引入圖表類型：

import { StackBar } from '@antv/g2plot';複製代碼

生成圖表：掛載數據源，配置標題，指定數據中的 'count' 字段做爲 X 軸，'area' 字段做爲 Y 軸，以 'cat' 字段進行堆疊。一些影響體驗的小細節已經默認作好： 圖形標籤顯示空間不夠時自動隱藏、根據底色自動調整字體顏色以保證可讀性等等。

const bar = new StackBar(document.getElementById('bar-container'), {
  data,
  xField: 'count',
  yField: 'area',
  stackField: 'cat',
});
bar.render();複製代碼

更換色板：

設計師認爲這個圖表比較的是品類數據，而不是地區數據，因此在色彩上不該該跟堆疊面積圖使用一個色板。沒有問題，換色板也很輕鬆：

color: ['#945fb9', '#1e9493', '#ff9845']複製代碼

靈活生動的環圖

環圖 是本次小K要製做的最後一個圖表，中心的鏤空部分和可以與圖形交互的指標卡是它的優點所在。

引入圖表類型：

import { Ring } from '@antv/g2plot';複製代碼

生成圖表：指定數據中的 'bill' 字段決定環圖的切片大小，'area' 字段決定切片的顏色。

const ring = new Ring(document.getElementById('ring-container'), {
  data,
  angleField: 'bill',
  colorField: 'area',
});複製代碼

加入環圖中心的指標卡：

triggerOn 配置項定義了指標卡與圖形聯動的方式。

statistic:{
  visible: true,
    triggerOn:'mouseenter'
  }
});複製代碼

至此，小K的圖表面板製做完成了，使用 G2Plot 只用了不到 50 行代碼。省下的時間學點東西打個遊戲擼擼貓很差嗎？

G2Plot 一直以開源的方式持續迭代，除了服務螞蟻金服衆多業務以外，還但願這套通過企業級場景打磨錘鍊出的圖表庫可以幫助更多的人解決製做圖表的痛點問題。

最後

關於 G2Plot 的更多技術細節、詳細進展，請經過如下途徑關注咱們👇。也歡迎你們來給點點 Star，讓更多人看到這個開源項目：

• GitHub：github.com/antvis/g2pl…
• 官網：antv-g2plot.gitee.io/zh