ECharts餅圖屬性設(shè)置

ECharts 圖表使用 pie 來實現(xiàn)餅圖，餅圖主要用于表現(xiàn)不同類目的數(shù)據(jù)在總和中的占比。每個的弧度表示數(shù)據(jù)數(shù)量的比例。餅圖更適合表現(xiàn)數(shù)據(jù)相對于總數(shù)的百分比等關(guān)系。如果只是表示不同類目數(shù)據(jù)間的大小，建議使用 柱狀圖，人們對于微小的弧度差別相比于微小的長度差別更不敏感，或者也可以通過配置 roseType 顯示成南丁格爾圖，通過半徑大小區(qū)分?jǐn)?shù)據(jù)的大小。

下面是自定義南丁格爾圖的示例：

點擊編輯實例 》》

series[i]-pie.type   |   string

[ default: 'pie' ]

series[i]-pie.name   |   string

系列名稱，用于tooltip的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據(jù)和配置項時用于指定對應(yīng)的系列。

series[i]-pie.legendHoverLink   |   boolean

[ default: true ]

是否啟用圖例 hover 時的聯(lián)動高亮。

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 ]

選中模式，表示是否支持多個選中，默認(rèn)關(guān)閉，支持布爾值和字符串，字符串取值可選'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），用于防止某個值過小導(dǎo)致扇區(qū)太小影響交互。

series[i]-pie.roseType   |   boolean, string

[ default: false ]

是否展示成南丁格爾圖，通過半徑區(qū)分?jǐn)?shù)據(jù)大小。可選擇兩種模式：

• 'radius' 扇區(qū)圓心角展現(xiàn)數(shù)據(jù)的百分比，半徑展現(xiàn)數(shù)據(jù)的大小。
• 'area' 所有扇區(qū)圓心角相同，僅通過半徑展現(xiàn)數(shù)據(jù)大小。

series[i]-pie.avoidLabelOverlap   |   boolean

[ default: true ]

是否啟用防止標(biāo)簽重疊策略，默認(rèn)開啟，在標(biāo)簽擁擠重疊的情況下會挪動各個標(biāo)簽的位置，防止標(biāo)簽間的重疊。

如果不需要開啟該策略，例如圓環(huán)圖這個例子中需要強制所有標(biāo)簽放在中心位置，可以將該值設(shè)為 false。

series[i]-pie.stillShowZeroSum   |   boolean

[ default: true ]

是否在數(shù)據(jù)和為0（一般情況下所有數(shù)據(jù)為0） 的時候不顯示扇區(qū)。

series[i]-pie.cursor   |   string

[ default: 'pointer' ]

鼠標(biāo)懸浮時在圖形元素上時鼠標(biāo)的樣式是什么。同 CSS 的 cursor。

series[i]-pie.label   |   Object

餅圖圖形上的文本標(biāo)簽，可用于說明圖形的一些數(shù)據(jù)信息，比如值，名稱等，label選項在 ECharts 2.x 中放置于itemStyle.normal下，在 ECharts 3 中為了讓整個配置項結(jié)構(gòu)更扁平合理，label 被拿出來跟 itemStyle 平級，并且跟 itemStyle 一樣擁有 normal, emphasis 兩個狀態(tài)。

series[i]-pie.labelLine   |   Object

標(biāo)簽的視覺引導(dǎo)線樣式，在 label 位置 設(shè)置為'outside'的時候會顯示視覺引導(dǎo)線。

series[i]-pie.itemStyle   |   Object

圖形樣式，有 normal 和 emphasis 兩個狀態(tài)。normal 是圖形在默認(rèn)狀態(tài)下的樣式；emphasis 是圖形在高亮狀態(tài)下的樣式，比如在鼠標(biāo)懸浮或者圖例聯(lián)動高亮?xí)r。

series[i]-pie.zlevel   |   number

[ default: 0 ]

所有圖形的 zlevel 值。

zlevel用于 Canvas 分層，不同zlevel值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設(shè)置成一個單獨的zlevel。需要注意的是過多的 Canvas 會引起內(nèi)存開銷的增大，在手機端上需要謹(jǐn)慎使用以防崩潰。

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%'] ]

餅圖的中心（圓心）坐標(biāo)，數(shù)組的第一項是橫坐標(biāo)，第二項是縱坐標(biāo)。

支持設(shè)置成百分比，設(shè)置成百分比時第一項是相對于容器寬度，第二項是相對于容器高度。

使用示例：

// 設(shè)置成絕對的像素值
center: [400, 300]
// 設(shè)置成相對的百分比
center: ['50%', '50%']

series[i]-pie.radius   |   Array

[ default: [0, '75%'] ]

餅圖的半徑，數(shù)組的第一項是內(nèi)半徑，第二項是外半徑。

支持設(shè)置成百分比，相對于容器高寬中較小的一項的一半。

可以將內(nèi)半徑設(shè)大顯示成圓環(huán)圖（Donut chart）。

series[i]-pie.markPoint   |   Object

圖表標(biāo)注。

series[i]-pie.markLine

圖表標(biāo)線。

series[i]-pie.markArea   |   Object

圖表標(biāo)域，常用于標(biāo)記圖表中某個范圍的數(shù)據(jù)，例如標(biāo)出某段時間投放了廣告。

series[i]-pie.silent   |   boolean

[ default: false ]

圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件，默認(rèn)為 false，即響應(yīng)和觸發(fā)鼠標(biāo)事件。

series[i]-pie.animationType   |   string

[ default: 'expansion' ]

初始動畫效果，可選

• 'expansion' 默認(rèn)研圓弧展開的效果。
• 'scale' 縮放效果，配合設(shè)置 animationEasing='elasticOut' 可以做成 popup 的效果。

series[i]-pie.animation   |   boolean

[ default: true ]

是否開啟動畫。

series[i]-pie.animationThreshold   |   number

[ default: 2000 ]

是否開啟動畫的閾值，當(dāng)單個系列顯示的圖形數(shù)量大于這個閾值時會關(guān)閉動畫。

series[i]-pie.animationDuration   |   number

[ default: 1000 ]

初始動畫的時長，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果：

animationDuration: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

series[i]-pie.animationEasing   |   string

[ default: cubicOut ]

初始動畫的緩動效果。不同的緩動效果可以參考 緩動示例。

series[i]-pie.animationDelay   |   number, Function

[ default: 0 ]

初始動畫的延遲，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果。

如下示例：

animationDelay: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

也可以看該示例

series[i]-pie.animationDurationUpdate   |   number, Function

[ default: 300 ]

數(shù)據(jù)更新動畫的時長。

支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果：

animationDurationUpdate: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

series[i]-pie.animationEasingUpdate   |   string

[ default: cubicOut ]

數(shù)據(jù)更新動畫的緩動效果。

series[i]-pie.animationDelayUpdate   |   number, Function

[ default: 0 ]

數(shù)據(jù)更新動畫的延遲，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果。

如下示例：

animationDelayUpdate: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

也可以看該示例

series[i]-pie.tooltip

本系列特定的 tooltip 設(shè)定。