導讀：餅圖也是一種常用的基本圖表，主要用來展示各項的比重。

作者：王大偉

來源：大數據DT（ID：hzdashuju）

下面制作一幅基礎的餅圖，將Echarts中series的type參數值設置為pie，如圖4-14所示。

代碼如下：

option?=?{title:?{text:?'各商品銷量占比',subtext:?'A商場情況分析',left:?'center'},tooltip:?{trigger:?'item',formatter:?'{a}?<br/>?:?{c}?(ze8trgl8bvbq%)'},legend:?{orient:?'vertical',left:?'left',data:?['A商品',?'B商品',?'C商品',?'D商品',?'E商品']},series:?[{name:?'所售商品',type:?'pie',data:?[{value:?343,?name:?'A商品'},{value:?250,?name:?'B商品'},{value:?509,?name:?'C商品'},{value:?108,?name:?'D商品'},{value:?948,?name:?'E商品'}],}] };

▲圖4-14 餅圖

在上述代碼中，將legend設置為vertical，是為了避免水平顯示后會與標題重疊。這里將tooltip的顯示格式設置為：formatter: '{a} <br/> : {c} (ze8trgl8bvbq%)'，各參數在餅圖中的具體含義為：{a}（系列名稱），（數據項名稱），{c}（數值），ze8trgl8bvbq（百分比）。當鼠標懸停在某塊餅上時，該塊餅會突出顯示且按照formatter的格式顯示文字和數值。

需要注意的是，當我們點擊餅圖的legend時，如點擊C商品的legend時，C商品的圖例會變為灰色，同時，餅圖中將不再顯示C商品餅塊，且會重新計算百分比，如圖4-15所示。

▲圖4-15 餅圖顯示控制

除了基本的餅圖，我們也常常會用到環形圖。在ECharts中，在series中加上radius參數即可繪制環形圖，例如下面代碼中的radius: ['50%', '70%']，代表環內部半徑和外部半徑的比例分別為50%、70%。

option?=?{title:?{text:?'各商品銷量占比',subtext:?'A商場情況分析',left:?'center'},tooltip:?{trigger:?'item',formatter:?'{a}?<br/>?:?{c}?(ze8trgl8bvbq%)'},legend:?{orient:?'vertical',left:?'left',data:?['A商品',?'B商品',?'C商品',?'D商品',?'E商品']},series:?[{name:?'所售商品',type:?'pie',radius:?['50%',?'70%'],data:?[{value:?343,?name:?'A商品'},{value:?250,?name:?'B商品'},{value:?509,?name:?'C商品'},{value:?108,?name:?'D商品'},{value:?948,?name:?'E商品'}],}] };

環形圖可視化結果如圖4-16所示。

▲圖4-16 環形圖

關于作者：王大偉，畢業于華東理工大學，碩士學歷，目前就職于平安金融壹賬通，從事數據挖掘算法工作，擅長ECharts、Python、自然語言處理、數據分析挖掘、機器學習。曾獲微軟最有價值專家（MVP）榮譽稱號。

本文摘編自《ECharts數據可視化：入門、實戰與進階》，經出版方授權發布。

延伸閱讀《ECharts數據可視化》

長按上方二維碼了解及購買

轉載請聯系微信：DoctorData

推薦語：ECharts官方推薦，系統全面、由淺入深、注重實操，帶領讀者快速從新人到高手。

看看作者怎么說

????

最新！Apache ECharts 5 將于 2021.01.28 20:00 進行線上發布會。發布會將為大家詳細介紹 ECharts 5 的新功能，包括動態排序柱狀圖（bar-racing）等更高級玩法。????

劃重點????

干貨直達????

• 終于有人把智能語音處理講明白了
  

• 終于有人把5G+人工智能講明白了
  

• 終于有人把條件概率和貝葉斯公式講明白了
  

• 手把手教你用ECharts畫柱狀圖

更多精彩????

在公眾號對話框輸入以下關鍵詞

查看更多優質內容！

PPT?|?讀書?|?書單?|?硬核?|?干貨?|?講明白?|?神操作

大數據?|?云計算?|?數據庫?|?Python?|?可視化

AI?|?人工智能?|?機器學習?|?深度學習?|?NLP

5G?|?中臺?|?用戶畫像?|?1024?|?數學?|?算法?|?數字孿生

據統計，99%的大咖都完成了這個神操作

????

總結

以上是生活随笔為你收集整理的手把手教你用ECharts画饼图和环形图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。