G2Plot官網| GitHub開源地址https:// github.com/antvis/G2Plo t

G2 是一個基於圖形語法，面向數據分析的統計圖表引擎。 G2Plot 是在G2 基礎上，屏蔽複雜概念的前提下，保留G2 強大圖形能力，封裝出業務上常用的統計圖表庫。

G2Plot是一個基於配置、體驗優雅、面向數據分析的統計圖表庫，幫助開發者以最小成本繪製高質量統計圖表。

G2Plot 最初誕生於阿里經濟體BI 產品真實場景的業務訴求。

動態數據量、數據場景不確定是BI 產品和中台系統業務數據的一個普遍特徵，而這種特徵對統計圖表的功能和體驗提出了巨大的挑戰。如何能夠幫助報表系統和一線前端在復雜數據條件下快速高效地創建統計圖表，同時保證圖表在各種顯示空間和數據狀態下的可讀性和可用性？為解決這兩個痛點問題，AntV 與DeepInsight、QuickBI 和FBI，阿里經濟體多個優秀的數據BI 產品技術團隊聯手打造了G2Plot。

G2Plot 2.0 帶來了什麼？

G2Plot 2.0版本，我們開啟了全新技術架構，全面依賴G2。一圖一做擴展常見的業務圖表，也提供了自定義擴展能力，滿足自定義個性化圖表的訴求。下面讓我們來看下，主要帶來的重要的能力和特性。

開箱即用的統計圖表

2020年AntV的slogan是利業·立業，這也是G2棧今年一直在做的事情，立足業務，盈利業務。我們按照業務上優先級和使用量佔比，排列優先級，優先做了以下圖表：

折線圖、面積圖、柱形圖系列（堆積、分組、區間、百分比、條圖）、餅環圖、雙軸圖、散點圖、雷達圖、詞云圖、直方圖、瀑布圖、子彈圖、儀錶盤、水波圖、漏斗圖、mini 折柱餅、進度環/條圖、熱力圖、旭日圖...

其中上述頭部超過50% 在內部的重型BI 產品、搭建產品中實踐和使用，排除和解決基本的設計問題和技術漏洞。當然還有一些開發階段的圖表，大家可以試用並提出自己的需求，我們會開發階段充分參考大家的意見和建議。

全新啟航的技術架構

新的G2Plot 架構將全面依賴G2，G2Plot 層僅僅是基於G2 強大的圖形、交互、事件、動畫能力，去一圖一做的擴展不同的常見業務圖表。

整體核心架構開發一個圖表最主要的核心工作就是開發Adaptor，所以圖表，無論是常規統計圖表，還是開發擴展的自定義業務圖表，都按照這樣的模式開發，形成統一的開發心智。 **

這樣做將帶來：

1. 降低架構複雜圖，降低開發入門門檻，提升可維護性。
2. 充分利用和發揮G2 能力，保障技術概念上和G2 一模一樣，一次學習，整體技術棧收益，降低用戶使用門檻。
3. 通過一圖一做，來沉澱、打磨G2 的圖形、交互語法能力。

✨ 創意無限的開放能力

G2Plot 內置的是業務中使用量佔比超過90% 的常規統計圖表，而對於業務產品來說，定制不可避免，這個時候，用戶將面臨選擇：① 使用G2 去開發② 建議G2Plot 增加圖表，抑或是③ 使用其他圖表庫、或者自研...

而我們作為G2Plot 開發團隊，也陷入一些問題：

1. 這個圖表通用嗎？是不是太跟隨業務了？如何抽象配置項？
2. 開發者基於G2 開發了，能開源給其他需要的用戶使用嗎？

基於這些問題，我們將G2Plot 基於G2 開發圖表的Adaptor 模式直接開放出來，業務同學可以基於這一個模式去使用G2 封裝定製圖表，如果需要給其他業務復用，直接發包，在G2Plot 的模式上去使用。舉個例子：

以上是一個真實的基於G2 按照G2Plot 的模式開發一個QRCode 圖形能力，整體代碼100 行左右。基於這樣的模式，目前具備有以下的社區擴展，可以到如何開發自定義擴展圖表。

隨手查閱的交互文檔

G2 棧基於圖形語法，具備有很強的靈活性，G2 是麵粉，G2Plot 是麵條。而在靈活性的背後，確必然存在很大的學習成本。之前的G2 文檔是被吐槽最多的點。這一次針對G2, G2Plot 的特殊性，我們推出交互式文檔，嘗試去解決文檔問題，降低文檔查找的成本，幫助開發者提效。為完成這一目標，我們主要進行了以下三步改造：

第一步，教程瘦身，在教程部分重點講述相關的可視化概念及其配合用法，以達到“舉一”的作用，而將“反三”交給API文檔，盡量避免訊息重複透出使開發者在API 文檔和教程之間來回橫跳；

第二步，結構化API文檔，從使用視角出發，以調用模塊為單元全量羅列API內容。同時在文檔內還加入了可以執行的代碼區塊，看文檔的同時想試一下效果？ so easy～

第三步， Demo +文檔，除代碼區和預覽區外，將API文檔也放到一起，方便使用者在看demo的同時查閱文檔，避免反复橫跳。同時升級了代碼編輯器，可以進行代碼提示和類型查看。另外我們還有一個隱藏功能，可以選中- 右建- search in document 快速定位到相關描述哦。

匠心延續的體驗打磨

G2Plot 是一個注重細節體驗的通用統計圖表庫，在之前版本中和實際業務中，我們花費了大量精力打磨各個圖表的細節體驗。在v2 版本中，我們把通用的體驗優從業務實現抽取出來，通用化配置化，把大部分體驗優化方案內置到G2 中，讓G2 和G2Plot 的用戶都可以直接配置開啟各個圖表的體驗優化，用戶可以方便地通過配置和選項來開啟默認內置的體驗優化和優化方案。

• 坐標軸標籤優化

你是不是也遇到過在坐標軸數據密集或者動態變化的時候，坐標軸標籤出來重疊遮擋的問題？在實際業務場景中數據可能動態變化，設置固定的旋轉角度並不難一勞永逸的解決問題；因此在v2版本中，我們內置了自動抽樣隱藏( autoHide )、自動旋轉( autoRotate )等內置的佈局方案，用戶可簡單的通過配置開啟，在不同數據情況下動態的解決坐標軸標籤的重疊問題。

• 數據標籤優化

數據標籤是可視化圖標的一個重要組成部分，但在實際業務場景中，實際的業務圖表中的數據標籤卻體驗非常差，經常出現數據標籤和數據標籤之間的重疊遮擋，數據標籤配色造成的可閱讀體驗差等問題。此前，我們在實際業務中實踐了大量的數據標籤優化方案，在v2版本中，我們把比較通用的優化方案抽取內置到G2中，作為數據標籤的可選佈局方案，用戶可以通過layout配置來開啟希望使用的優化方案。在下面範例中:

• interval-hide-overlap: 適用與柱形圖和條形圖系列圖形，開啟後可避免數據標籤之間的遮擋問題
• adjust-color: 適用與所有含有內部數據標籤的圖形，開啟後可自動調整數據標籤文本顏色，提升可閱讀性
• pie-spider: 適用與餅圖，開啟後可適用餅圖數據標籤蜘蛛佈局

更多layout配置和使用可以參照G2Plot 文檔和範例。

還帶來什麼？

Ant Design Charts

Ant Design Charts基於G2Plot，彌補Ant Design組件庫在統計圖表上的缺失，作為Ant Design的官方圖表組件解決方案。在圖表能力上，和G2Plot 保持一致，不修改技術概念，不修改配置結構。不僅降低這個模塊的維護成本，同時降低開發者使用的開發理解成本。

節省400kb, 瘋狂瘦身

包大小是前端底層模塊，非常重要的指標。這次版本，我們將原包大小從1.3 Mb 降低到800 Kb 內，瘋狂減包接近40%。如果業務中只使用G2Plot 部分圖表，通過按需引入打包，將降低到更小。未來我們會繼續在G2 的基礎上進行進一步的精細化拆分，進一步降低包大小。

95%+ 單元測試覆蓋率

代碼質量和穩定性，不論是底層模塊，還是產品業務，對技術同學來說，都是無限追求。為了解決之前版本帶來的穩定性問題，我們在2.0 開始之初，就強制要求有效的單元測試覆蓋率，並且在後續的迭代中，不斷提升覆蓋率要求

目前的CI覆蓋率狀況： 97%+

除此之外，我們近期會開發自動化回歸腳本，在每次發布版本前，回歸網站上的DEMO 範例，進行像素級的自動對比，來決定此次發布是否帶來重大問題，是否符合質量要求。

深思熟慮的圖表配置

在一圖一做，封裝圖表過程中，我們看到很多的圖表，具備相同的數據表達能力，自然在配置上也會體現出類似的感覺。我們在圖表配置API 上，盡量做到統一，讓開發者在熟悉一些圖表之後，對於新圖表，下意識認知上，可以基本知道如何去配置，這也是在解決之前版本中，不同圖表配置項各自獨立不同帶來的問題。包括：

• 顏色、style 配置統一
• 餅環圖、水波圖、儀錶盤、進度環圖中的統計文本類配置統一
• 多圖層圖形配置統一（對於多圖層配置，我們統一定義為: GeometryOptions，統一且方便擴展，如雙軸圖、對稱條形圖中使用多View 圖層，多Geometry 能力來渲染）

實驗室：多圖層圖表

G2Plot 是基於G2，按照圖表分類學來進行一圖一做，降低使用門檻的同時，也限制了底層G2 的自定義能力。為了對圖形語法非常熟悉的同學，我們通過MultiView 多圖層圖表完全透漏出G2 80%+ 的圖形語法配置能力。

諾貝爾獎可視化（G2Plot 多圖層實驗室繪製）

這個可以用來做什麼？

1. 多圖層層疊圖表，例如：嵌套餅圖、折線圖+統計區間...
2. 多維圖
3. 組合圖：餅+柱混合圖

如下圖所示的一些複雜場景都可以使用MultiView Plot 來配置式的繪製。

目前在實驗室階段，具體使用方式請看官網DEMO

升級指南

2.0 版本和之前的版本，在核心架構和概念，有了非常大的轉變，我們深知這樣的break change 會帶來多大的業務升級迭代成本。但是我們還是堅定的要做這個事情，保證不給後續留下業務包袱，保證後續的可持續迭代。

為了降低之前老用戶的升級成本，我們非常用心的寫了CHANGELOG 和升級指南，幫助大家升級到最新的穩定、持續迭代的2.0 版本。

升級指南地址見： https:// g2plot.antv.vision/zh/d ocs/manual/upgrade

最後

非常感謝你的耐心閱讀。帶著我們對業務，對技術架構的理解，我們將G2Plot從1.0升級到2.0，歡迎在GitHub給我們反饋問題，更加歡迎有興趣的同學來參入貢獻。

---

附

AntV 2020 品牌日的發布詳情

• 利業·立業- AntV與業務的故事
• 技術專文
• G2Plot 2.0全新來襲
• F2Native 1.0新的起點
• G6 4.0圖可視分析如此簡單
• X6 1.0抱歉來晚
• L7 2.3業務為本完善生態
• AVA 1.0你的圖表參謀
• 設計專文
• 2020，貼地飛行的AntV設計

AntV 項目鏈接

歡迎關注我們的GitHub 項目，點亮star 了解我們的實時動態，期待PR：

• AntV官網： https:// antv.vision/
• G2 ： https:// github.com/antvis/g2 G2是一套基於可視化編碼的圖形語法，以數據驅動，具有高度的易用性和擴展性，用戶無需關注各種繁瑣的實現細節，一條語句即可構建出各種各樣的可交互的統計圖表。
• G2Plot： https:// github.com/antvis/g2plo t G2Plot的定位是開箱即用、易於配置、具有良好視覺和交互體驗的通用圖表庫。
• F2 ： https:// github.com/antvis/f2 F2是一個專注於移動，開箱即用的可視化解決方案，完美支持H5環境同時兼容多種環境（node,小程序，weex）。完備的圖形語法理論，滿足各種可視化需求。專業的移動設計指引為你帶來最佳的移動端圖表體驗。
• F2Native ： https:// github.com/antvis/F2Nat ive F__2Native是一個專注於客戶端，開箱即用、高性能的可視化解決方案，完備的圖形語法理論，滿足你的各種需求，專業的移動設計指引為你帶來最佳的移動端圖表體驗。
• G6 ： https:// github.com/antvis/g6 G6是AntV旗下的圖可視化與圖分析引擎， G來自於Graphic、Graph ，意味著我們要基於圖分析技術做圖可視化；6來自於《 六度分隔理論》，表達了我們對關係數據、關係網絡的敬畏和著迷。
• Graphin： https:// github.com/antvis/graph in Graphin是一個基於G6封裝的關係可視分析工具__，簡單，高效，開箱即用，取自Graph Insight，圖的分析洞察。
• X6 ： https:// github.com/antvis/X6 X6是AntV旗下的圖編輯引擎，提供了一系列開箱即用的交互組件和簡單易用的節點定制能力，方便我們快速搭建DAG圖、ER圖、流程圖等應用。
• L7 ： https:// github.com/antvis/l7 L7是一個基於WebGL的開源大規模地理空間數據可視分析開發框架。 L7中的L代表Location，7代表世界七大洲，寓意能為全球位置數據提供可視分析的能力。
• AVA ： https:// github.com/antvis/AVA AVA是為了更簡便的可視分析而生的智能可視化框架。
• G ： https:// github.com/antvis/g G是AntV幾個產品共同的底層2D渲染引擎，高效易用，專注於圖形的渲染、拾取、事件以及動畫機制，給上層G2、F2、G6提供統一的渲染機制。
• ChartCube ： https://chartcube.alipay.com ChartCube是一個可以快速完成圖表製作的在線工具，只需要三步就可以創建出高品質的圖表。