建站
咨詢
售后
建站咨詢
新聞中心
ECharts 圖表使用 pie 來實現餅圖，餅圖主要用于表現不同類目的數據在總和中的占比。每個的弧度表示數據數量的比例。餅圖更適合表現數據相對于總數的百分比等關系。如果只是表示不同類目數據間的大小，建議使用 柱狀圖，人們對于微小的弧度差別相比于微小的長度差別更不敏感，或者也可以通過配置 roseType 顯示成南丁格爾圖，通過半徑大小區(qū)分數據的大小。
專注于為中小企業(yè)提供做網站、網站設計服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)漾濞免費做網站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯網行業(yè)人才，有力地推動了上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網站建設實現規(guī)模擴充和轉變。
下面是自定義南丁格爾圖的示例：
點擊編輯實例 》》
series[i]-pie.type | string
[ default: 'pie' ]
series[i]-pie.name | string
系列名稱，用于tooltip的顯示，legend 的圖例篩選，在 setOption 更新數據和配置項時用于指定對應的系列。
series[i]-pie.legendHoverLink | boolean
[ default: true ]
是否啟用圖例 hover 時的聯動高亮。
series[i]-pie.hoverAnimation | boolean
[ default: true ]
是否開啟 hover 在扇區(qū)上的放大動畫效果。
series[i]-pie.hoverOffset | number
[ default: 10 ]
高亮扇區(qū)的偏移距離。
series[i]-pie.selectedMode | boolean, string
[ default: false ]
選中模式，表示是否支持多個選中，默認關閉，支持布爾值和字符串，字符串取值可選'single'，'multiple'，分別表示單選還是多選。
series[i]-pie.selectedOffset | number
[ default: 10 ]
選中扇區(qū)的偏移距離。
series[i]-pie.clockwise | boolean
[ default: true ]
餅圖的扇區(qū)是否是順時針排布。
series[i]-pie.startAngle | number
[ default: 90 ]
起始角度，支持范圍[0, 360]。
series[i]-pie.minAngle | number
[ default: 0 ]
最小的扇區(qū)角度（0 ~ 360），用于防止某個值過小導致扇區(qū)太小影響交互。
series[i]-pie.roseType | boolean, string
[ default: false ]
是否展示成南丁格爾圖，通過半徑區(qū)分數據大小?？蛇x擇兩種模式：
- 'radius' 扇區(qū)圓心角展現數據的百分比，半徑展現數據的大小。
- 'area' 所有扇區(qū)圓心角相同，僅通過半徑展現數據大小。
series[i]-pie.avoidLabelOverlap | boolean
[ default: true ]
是否啟用防止標簽重疊策略，默認開啟，在標簽擁擠重疊的情況下會挪動各個標簽的位置，防止標簽間的重疊。
如果不需要開啟該策略，例如圓環(huán)圖這個例子中需要強制所有標簽放在中心位置，可以將該值設為 false。
series[i]-pie.stillShowZeroSum | boolean
[ default: true ]
是否在數據和為0（一般情況下所有數據為0） 的時候不顯示扇區(qū)。
series[i]-pie.cursor | string
[ default: 'pointer' ]
鼠標懸浮時在圖形元素上時鼠標的樣式是什么。同 CSS 的 cursor。
series[i]-pie.label | Object
餅圖圖形上的文本標簽，可用于說明圖形的一些數據信息，比如值，名稱等，label選項在 ECharts 2.x 中放置于itemStyle.normal下，在 ECharts 3 中為了讓整個配置項結構更扁平合理，label 被拿出來跟 itemStyle 平級，并且跟 itemStyle 一樣擁有 normal, emphasis 兩個狀態(tài)。
series[i]-pie.labelLine | Object
標簽的視覺引導線樣式，在 label 位置 設置為'outside'的時候會顯示視覺引導線。
series[i]-pie.itemStyle | Object
圖形樣式，有 normal 和 emphasis 兩個狀態(tài)。normal 是圖形在默認狀態(tài)下的樣式；emphasis 是圖形在高亮狀態(tài)下的樣式，比如在鼠標懸浮或者圖例聯動高亮時。
series[i]-pie.zlevel | number
[ default: 0 ]
所有圖形的 zlevel 值。
zlevel用于 Canvas 分層，不同zlevel值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設置成一個單獨的zlevel。需要注意的是過多的 Canvas 會引起內存開銷的增大，在手機端上需要謹慎使用以防崩潰。
zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。
series[i]-pie.z | number
[ default: 2 ]
組件的所有圖形的z值?？刂茍D形的前后順序。z值小的圖形會被z值大的圖形覆蓋。
z相比zlevel優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。
series[i]-pie.center | Array
[ default: ['50%', '50%'] ]
餅圖的中心（圓心）坐標，數組的第一項是橫坐標，第二項是縱坐標。
支持設置成百分比，設置成百分比時第一項是相對于容器寬度，第二項是相對于容器高度。
使用示例：
// 設置成絕對的像素值
center: [400, 300]
// 設置成相對的百分比
center: ['50%', '50%']series[i]-pie.radius | Array
[ default: [0, '75%'] ]
餅圖的半徑，數組的第一項是內半徑，第二項是外半徑。
支持設置成百分比，相對于容器高寬中較小的一項的一半。
可以將內半徑設大顯示成圓環(huán)圖（Donut chart）。
series[i]-pie.markPoint | Object
圖表標注。
series[i]-pie.markLine
圖表標線。
series[i]-pie.markArea | Object
圖表標域，常用于標記圖表中某個范圍的數據，例如標出某段時間投放了廣告。
series[i]-pie.silent | boolean
[ default: false ]
圖形是否不響應和觸發(fā)鼠標事件，默認為 false，即響應和觸發(fā)鼠標事件。
series[i]-pie.animationType | string
[ default: 'expansion' ]
初始動畫效果，可選
- 'expansion' 默認研圓弧展開的效果。
- 'scale' 縮放效果，配合設置 animationEasing='elasticOut' 可以做成 popup 的效果。
series[i]-pie.animation | boolean
[ default: true ]
是否開啟動畫。
series[i]-pie.animationThreshold | number
[ default: 2000 ]
是否開啟動畫的閾值，當單個系列顯示的圖形數量大于這個閾值時會關閉動畫。
series[i]-pie.animationDuration | number
[ default: 1000 ]
初始動畫的時長，支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的初始動畫效果：
animationDuration: function (idx) {
// 越往后的數據延遲越大
return idx * 100;
}series[i]-pie.animationEasing | string
[ default: cubicOut ]
初始動畫的緩動效果。不同的緩動效果可以參考 緩動示例。
series[i]-pie.animationDelay | number, Function
[ default: 0 ]
初始動畫的延遲，支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的初始動畫效果。
如下示例：
animationDelay: function (idx) {
// 越往后的數據延遲越大
return idx * 100;
}也可以看該示例
series[i]-pie.animationDurationUpdate | number, Function
[ default: 300 ]
數據更新動畫的時長。
支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的更新動畫效果：
animationDurationUpdate: function (idx) {
// 越往后的數據延遲越大
return idx * 100;
}series[i]-pie.animationEasingUpdate | string
[ default: cubicOut ]
數據更新動畫的緩動效果。
series[i]-pie.animationDelayUpdate | number, Function
[ default: 0 ]
數據更新動畫的延遲，支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的更新動畫效果。
如下示例：
animationDelayUpdate: function (idx) {
// 越往后的數據延遲越大
return idx * 100;
}也可以看該示例
series[i]-pie.tooltip
本系列特定的 tooltip 設定。
網頁題目：創(chuàng)新互聯ECharts教程：ECharts餅圖屬性設置
文章鏈接：http://www.5511xx.com/article/dpocjcj.html
