ECharts餅圖屬性設(shè)置

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

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

點(diǎn)擊編輯實(shí)例 》》

series[i]-pie.type   |   string

[ default: 'pie' ]

series[i]-pie.name   |   string

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

series[i]-pie.legendHoverLink   |   boolean

[ default: true ]

是否啟用圖例 hover 時(shí)的聯(lián)動(dòng)高亮。

series[i]-pie.hoverAnimation   |   boolean

[ default: true ]

是否開(kāi)啟 hover 在扇區(qū)上的放大動(dòng)畫(huà)效果。

series[i]-pie.hoverOffset   |   number

[ default: 10 ]

高亮扇區(qū)的偏移距離。

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

[ default: false ]

選中模式，表示是否支持多個(gè)選中，默認(rèn)關(guān)閉，支持布爾值和字符串，字符串取值可選'single'，'multiple'，分別表示單選還是多選。

series[i]-pie.selectedOffset   |   number

[ default: 10 ]

選中扇區(qū)的偏移距離。

series[i]-pie.clockwise   |   boolean

[ default: true ]

餅圖的扇區(qū)是否是順時(shí)針排布。

series[i]-pie.startAngle   |   number

[ default: 90 ]

起始角度，支持范圍[0, 360]。

series[i]-pie.minAngle   |   number

[ default: 0 ]

最小的扇區(qū)角度（0 ~ 360），用于防止某個(gè)值過(guò)小導(dǎo)致扇區(qū)太小影響交互。

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

[ default: false ]

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

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

series[i]-pie.avoidLabelOverlap   |   boolean

[ default: true ]

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

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

series[i]-pie.stillShowZeroSum   |   boolean

[ default: true ]

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

series[i]-pie.cursor   |   string

[ default: 'pointer' ]

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

series[i]-pie.label   |   Object

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

series[i]-pie.labelLine   |   Object

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

series[i]-pie.itemStyle   |   Object

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

series[i]-pie.zlevel   |   number

[ default: 0 ]

所有圖形的 zlevel 值。

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

zlevel 大的 Canvas 會(huì)放在 zlevel 小的 Canvas 的上面。

series[i]-pie.z   |   number

[ default: 2 ]

組件的所有圖形的z值?？刂茍D形的前后順序。z值小的圖形會(huì)被z值大的圖形覆蓋。

z相比zlevel優(yōu)先級(jí)更低，而且不會(huì)創(chuàng)建新的 Canvas。

series[i]-pie.center   |   Array

[ default: ['50%', '50%'] ]

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

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

使用示例：

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

series[i]-pie.radius   |   Array

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

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

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

可以將內(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)記圖表中某個(gè)范圍的數(shù)據(jù)，例如標(biāo)出某段時(shí)間投放了廣告。

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

初始動(dòng)畫(huà)效果，可選

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

series[i]-pie.animation   |   boolean

[ default: true ]

是否開(kāi)啟動(dòng)畫(huà)。

series[i]-pie.animationThreshold   |   number

[ default: 2000 ]

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

series[i]-pie.animationDuration   |   number

[ default: 1000 ]

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

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

series[i]-pie.animationEasing   |   string

[ default: cubicOut ]

初始動(dòng)畫(huà)的緩動(dòng)效果。不同的緩動(dòng)效果可以參考 緩動(dòng)示例。

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

[ default: 0 ]

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

如下示例：

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

也可以看該示例

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

[ default: 300 ]

數(shù)據(jù)更新動(dòng)畫(huà)的時(shí)長(zhǎng)。

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

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

series[i]-pie.animationEasingUpdate   |   string

[ default: cubicOut ]

數(shù)據(jù)更新動(dòng)畫(huà)的緩動(dòng)效果。

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

[ default: 0 ]

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

如下示例：

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

也可以看該示例

series[i]-pie.tooltip

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