這一次，用 AntV 給你的老闆畫個餅

https://juejin.im/post/5e57b9b1e51d4526f55f06a7

做者 新茗 螞蟻金服·數據體驗技術團隊

TL;DR G2Plot 是一個注重於細節體驗的通用統計圖表庫。

背景

餅圖，或稱餅狀圖，是一個劃分爲幾個扇形的圓形統計圖表。在餅圖中，每一個扇形的弧長（以及圓心角和麪積）大小，表示該種類佔整體的比例，且這些扇形合在一塊兒恰好是一個徹底的圓形。

做爲最多見的圖表之一，餅圖大量的用於各行各業的報告中。例如，研報中常常會出現市場份額的分析。據中金公司研報，2017年我國的餐飲業營收額中，火鍋佔到22%，其次是自助餐（12%）、川菜（8%）、小吃快餐（8%）、西餐（6%）。這5種類型的餐飲，營收額佔到了整個市場的56%，尤爲以火鍋佔據絕對優點。

體驗細琢

在實際的業務場景下，因爲業務數據的千差萬別，咱們遇到了不少可視化展現的問題，其中在餅圖中， label 問題較爲凸顯，有時甚至影響數據洞察。

inner 數據標籤佈局

🔥功能加強： label offset 可設置百分比，表示內置標籤與圓弧距離 N%
🔥體驗細琢：label 標籤遮擋躲避，當label標籤發生遮擋時，

echarts		❌直接遮擋顯示 ❌沒法開啓自動躲避、隱藏 ❌標籤只能顯示在 -50% 處，沒法設置
highcharts		❌默認不進行躲避、隱藏，✅可開啓自動躲避、隱藏
G2Plot		✅自動躲避、隱藏 ✅可開啓所有顯示

outer 數據標籤的碰撞躲避

echarts		❌標籤很是多的狀況下，發生遮擋和重疊
highcharts		✅自動隱藏放置不下的標籤，避免遮擋重疊 ❌標籤軌道是圓形軌道，隨着半徑的減少，可放置的標籤數量會更少，致使準確性缺失
G2Plot		✅自動隱藏放置不下的標籤，避免遮擋重疊 ✅動態變換標籤軌道爲橢圓形軌道，放置更多的數據標籤

outer 數據標籤的溢出隱藏 & 省略

echarts		❌直接溢出、裁剪
highcharts		❌標籤部分省略、但也有部分直接裁剪
G2Plot		**[省略規則] ** 🔥顯示優先級：視覺標記≥數值≥百分比≥分類名稱 ✅當標籤溢出時，優先顯示百分比，其次對分類名稱進行省略顯示

佈局算法

根據 AntV 設計原則，餅圖的label佈局算法主要有如下幾個創新點：

1）BBox計算，像素級別碰撞檢測，保證精確性；
2）碰撞偏移時，取偏離距離最小的方向做爲目標方向，提升標籤信息的有效性
3）碰撞偏移處理後，仍殘存的遮擋或溢出標籤，默認會進行隱藏，保證美觀性；

下面拿 inner 佈局爲例，簡單介紹下算法的處理過程

inner label 算法

算法方案

• 爲了保證美觀的目的，標準的 label 中心位置鏈接起來，實際上是一個圓狀軌道，每一個 label 都在圓心和圓弧的中心鏈接軌道上
• 當 label 發生遮擋的時候，會對 label 作一個偏移處理，保證 label 始終在圓心和圓弧的中心鏈接軌道上，與對應的餅圖切片關聯起來

執行過程
能夠看到 label 在碰撞遮擋時的處理過程

體驗加強

加強一：合併極小項

合併項的明細數據，能夠在 tooltip 顯示，便於看全數據（此方案適用於數據總量很少很多，尾部數據佔比較小且明細數據也有洞察價值的狀況）。

該功能在 DeepInsight 中能夠開啓使用了，後續會沉澱到 G2Plot 中

加強二：多 label 類型組合

同時，對於 標籤信息的位置，提供多種label類型組合，讓信息傳達更加明確

敬請期待

最後

餅圖優化先後的一個對比狀況以下：

上述對於餅圖的優化點，都沉澱在** G2Plot **中，而且徹底開源。G2Plot 是基於 G2 圖形語法基礎上，造成的一套注重圖表細節體驗、易用性的上統計圖表庫，從中提煉的 **AntV 設計原則 **是基於  Ant Design  設計體系衍生的，具備數據可視化特性的指導原則。它遵循 Ant Design 設計價值觀的同時，對數據可視化領域的進一步解讀，如色彩、字體的指引。

咱們通過大量的項目實踐和經驗總結，總結了如下四條核心原則，並以重要等級進行排序，四條原則相輔相成且呈遞進關係，但願你在設計時也能夠採納：

• 準確：從數據轉化到可視表達時不歪曲，不誤導，不遺漏，忠實反映數據裏包含的信息。
• 有效：信息傳達有重點，剋制不冗餘，避免信息過載，用最適量的數據-油墨比（Data-ink Ratio）表達對用戶最有用的信息
• 清晰：表現方式清楚易讀，具條理性，能夠幫助用戶快速達成目標，在最少的時間內獲取更多的信息。
• 美：對數據的完美表達，合理利用視覺元素進行藝術創做，不過分修飾，給用戶優雅的體驗。

最後，很是歡迎參入 issue 討論或者代碼 PR：github.com/antvis/G2Pl…。