9102 年，螞蟻金服前端是怎麼寫圖表的?
相信很多開發者都有過被圖表搞得很抓狂瞬間：業務壓力大，想快速上個圖表，折騰半天配出來卻醜的不能看；Demo 裡明明看著很美，換成真實數據立刻變成買家秀了..... 很長一段時間裡，這些問題也在困擾著螞蟻的前端，寫個輕量級圖表，怎麼就那麼難？
為了讓圖表開發過程變得更加簡單、愉悅，螞蟻金服可視化團隊結合阿里經濟體內外20000+ 業務系統和日均千萬級UV 產品中提煉出來的業務場景和圖表需求，提煉出一套通用統計圖表庫— G2Plot 。
有了它，螞蟻金服前端使用圖表的日常是這樣的：
前端小K今天收到了一個時間比較緊的業務需求— 在系統快速搭建一個面板，用圖表展示某個產品的銷售情況。小K跟PD過了一下，決定使用G2Plot比較經典的面積圖、條形圖、環圖這三個圖表類型。
美麗直觀的面積圖
面積圖是小K要製作的第一個圖表，他將使用堆疊面積圖來展現多個指標的時間變化趨勢。
Step1:引入圖表類型
import { StackArea } from '@antv/g2plot';Step2:準備數據
G2Plot 的數據源格式是JSON 數組，數組的每個元素是一個標準JSON 對象。
下面這份數據描述了2016年-2018 年，每個地區每季度的銷售額。展示空間有限，僅以一個季度為例展示數據樣本。
constdata=[{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，讓更多人看到這個開源項目：