Echarts數據可視化：圖表篇（3）—— 餅圖

系列推薦

《JavaScript設計模式與開發實踐》最全知識點彙總大全

問題概覽

1. 餅圖的種類有哪幾種，它們之間的區別。如何進行轉換？
2. 餅圖和柱圖、折線圖有什麼區別？

介紹

餅圖種類分爲面積餅圖、環形餅圖、南丁格爾玫瑰圖

設置餅圖前，須要瞭解餅圖的基本元素構成

1. 餅圖的中心（和座標軸圖表不一樣，餅圖能夠自定義其在容器中的位置）
2. 餅圖的半徑（確認餅圖的大小，設置兩個值時能夠將普通餅圖轉換爲環形餅圖）
3. roseType（是否爲南丁格爾圖）

與其餘圖表的不一樣

屬性	餅圖	座標軸圖表（柱圖、折線圖...）
標籤的視覺引導線	有	無
tooltip懸浮提示類型	item、none	item、axis、none

這裏就會引入一個概念，類目軸，能夠理解爲維度（文字）軸。通常指的X軸，條形圖中便是Y軸

常見屬性

視覺引導線：labelLine

視覺引導線分紅兩段，只有在標籤（label）位置（position）爲‘outside’時纔會生效。擁有normal（普通）、emphasis（高亮）兩個狀態

相關屬性

1. length：視覺引導線第一段長度
2. length2：視覺引導線第二段長度
3. smooth：是否平滑展現
4. lineStyle：引導線樣式（能夠設置顏色、寬度、類型...）

標籤：label

做爲引導線的前置條件，標籤。能夠說明餅圖的一些額外信息，也擁有normal（普通）、emphasis（高亮）兩個狀態

相關屬性

1. position：標籤的位置，爲‘outside’時，展現在餅圖外側，inside和inner則在餅圖內側。center通常用於環形圖，標籤位於餅圖中心
2. rich：富文本樣式，能夠自定義一些特殊效果

環形圖

將普通餅圖轉換成環形圖，須要將radius（餅圖半徑）設置兩個值，分別表明內半徑、外半徑

玫瑰圖

將普通餅圖轉換成玫瑰圖，須要將roseType設置爲‘radius’或者‘area’

模式區別

1. radius：扇區圓心角展現數據百分比，半徑展現數據大小
2. area：扇區圓心角相同，僅經過半徑展現數據大小

項目地址