W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
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ù)的大小。
下面是自定義南丁格爾圖的示例:
[ default: 'pie' ]
系列名稱,用于tooltip的顯示,legend 的圖例篩選,在 setOption 更新數(shù)據(jù)和配置項時用于指定對應(yīng)的系列。
[ default: true ]
是否啟用圖例 hover 時的聯(lián)動高亮。
[ default: true ]
是否開啟 hover 在扇區(qū)上的放大動畫效果。
[ default: 10 ]
高亮扇區(qū)的偏移距離。
[ default: false ]
選中模式,表示是否支持多個選中,默認(rèn)關(guān)閉,支持布爾值和字符串,字符串取值可選'single','multiple',分別表示單選還是多選。
[ default: 10 ]
選中扇區(qū)的偏移距離。
[ default: true ]
餅圖的扇區(qū)是否是順時針排布。
[ default: 90 ]
起始角度,支持范圍[0, 360]。
[ default: 0 ]
最小的扇區(qū)角度(0 ~ 360),用于防止某個值過小導(dǎo)致扇區(qū)太小影響交互。
[ default: false ]
是否展示成南丁格爾圖,通過半徑區(qū)分?jǐn)?shù)據(jù)大小。可選擇兩種模式:
[ default: true ]
是否啟用防止標(biāo)簽重疊策略,默認(rèn)開啟,在標(biāo)簽擁擠重疊的情況下會挪動各個標(biāo)簽的位置,防止標(biāo)簽間的重疊。
如果不需要開啟該策略,例如圓環(huán)圖這個例子中需要強制所有標(biāo)簽放在中心位置,可以將該值設(shè)為 false。
[ default: true ]
是否在數(shù)據(jù)和為0(一般情況下所有數(shù)據(jù)為0) 的時候不顯示扇區(qū)。
[ default: 'pointer' ]
鼠標(biāo)懸浮時在圖形元素上時鼠標(biāo)的樣式是什么。同 CSS 的 cursor。
餅圖圖形上的文本標(biāo)簽,可用于說明圖形的一些數(shù)據(jù)信息,比如值,名稱等,label選項在 ECharts 2.x 中放置于itemStyle.normal下,在 ECharts 3 中為了讓整個配置項結(jié)構(gòu)更扁平合理,label 被拿出來跟 itemStyle 平級,并且跟 itemStyle 一樣擁有 normal, emphasis 兩個狀態(tài)。
標(biāo)簽的視覺引導(dǎo)線樣式,在 label 位置 設(shè)置為'outside'的時候會顯示視覺引導(dǎo)線。
圖形樣式,有 normal 和 emphasis 兩個狀態(tài)。normal 是圖形在默認(rèn)狀態(tài)下的樣式;emphasis 是圖形在高亮狀態(tài)下的樣式,比如在鼠標(biāo)懸浮或者圖例聯(lián)動高亮?xí)r。
[ default: 0 ]
所有圖形的 zlevel 值。
zlevel用于 Canvas 分層,不同zlevel值的圖形會放置在不同的 Canvas 中,Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁(例如有動畫)的組件設(shè)置成一個單獨的zlevel。需要注意的是過多的 Canvas 會引起內(nèi)存開銷的增大,在手機端上需要謹(jǐn)慎使用以防崩潰。
zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。
[ default: 2 ]
組件的所有圖形的z值??刂茍D形的前后順序。z值小的圖形會被z值大的圖形覆蓋。
z相比zlevel優(yōu)先級更低,而且不會創(chuàng)建新的 Canvas。
[ default: ['50%', '50%'] ]
餅圖的中心(圓心)坐標(biāo),數(shù)組的第一項是橫坐標(biāo),第二項是縱坐標(biāo)。
支持設(shè)置成百分比,設(shè)置成百分比時第一項是相對于容器寬度,第二項是相對于容器高度。
使用示例:
// 設(shè)置成絕對的像素值
center: [400, 300]
// 設(shè)置成相對的百分比
center: ['50%', '50%']
[ default: [0, '75%'] ]
餅圖的半徑,數(shù)組的第一項是內(nèi)半徑,第二項是外半徑。
支持設(shè)置成百分比,相對于容器高寬中較小的一項的一半。
可以將內(nèi)半徑設(shè)大顯示成圓環(huán)圖(Donut chart)。
圖表標(biāo)注。
圖表標(biāo)線。
圖表標(biāo)域,常用于標(biāo)記圖表中某個范圍的數(shù)據(jù),例如標(biāo)出某段時間投放了廣告。
[ default: false ]
圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件,默認(rèn)為 false,即響應(yīng)和觸發(fā)鼠標(biāo)事件。
[ default: 'expansion' ]
初始動畫效果,可選
[ default: true ]
是否開啟動畫。
[ default: 2000 ]
是否開啟動畫的閾值,當(dāng)單個系列顯示的圖形數(shù)量大于這個閾值時會關(guān)閉動畫。
[ default: 1000 ]
初始動畫的時長,支持回調(diào)函數(shù),可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果:
animationDuration: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}
[ default: cubicOut ]
初始動畫的緩動效果。不同的緩動效果可以參考 緩動示例。
[ default: 0 ]
初始動畫的延遲,支持回調(diào)函數(shù),可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果。
如下示例:
animationDelay: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}
也可以看該示例
[ default: 300 ]
數(shù)據(jù)更新動畫的時長。
支持回調(diào)函數(shù),可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果:
animationDurationUpdate: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}
[ default: cubicOut ]
數(shù)據(jù)更新動畫的緩動效果。
[ default: 0 ]
數(shù)據(jù)更新動畫的延遲,支持回調(diào)函數(shù),可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}
也可以看該示例
本系列特定的 tooltip 設(shè)定。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: