ECharts餅圖屬性設(shè)置

2018-10-20 10:39 更新

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è)定。

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號