新聞中心
本節(jié)開始將詳細來講述在 ECharts 圖表中是如何設(shè)置徑向軸的屬性的。ECharts徑向軸常見的屬性包括其所在極坐標(biāo)系的索引、徑向軸的類型、判斷徑向軸是否反向、徑向軸名稱的顯示、徑向軸的刻度最值等等,這里就不一一列舉了,想要知道更加具體的內(nèi)容,您可以往下閱讀。

radiusAxis.polarIndex | number
[ default: 0 ]
徑向軸所在的極坐標(biāo)系的索引,默認使用第一個極坐標(biāo)系。
radiusAxis.type | string
[ default: 'value' ]
徑向軸的類型。
可選:
- 'value' :數(shù)值軸,適用于連續(xù)數(shù)據(jù)。
- 'category' :類目軸,適用于離散的類目數(shù)據(jù),為該類型時必須通過 data 設(shè)置類目數(shù)據(jù)。
- 'time' :時間軸,適用于連續(xù)的時序數(shù)據(jù),與數(shù)值軸相比時間軸帶有時間的格式化,在刻度計算上也有所不同,例如會根據(jù)跨度的范圍來決定使用月,星期,日還是小時范圍的刻度。
- 'log' :對數(shù)軸。適用于對數(shù)數(shù)據(jù)。
radiusAxis.name | string
徑向軸的名稱。在下節(jié)內(nèi)容中我們會對徑向軸名稱的文本樣式進行設(shè)置。
radiusAxis.nameLocation | string
[ default: 'end' ]
徑向軸名稱的顯示位置。
可選:
- 'start'
- 'middle'
- 'end'
radiusAxis.nameGap | number
[ default: 15 ]
徑向軸名稱與軸線之間的距離。
radiusAxis.nameRotate | number
[ default: null ]
徑向軸名稱旋轉(zhuǎn),角度值。
radiusAxis.inverse | boolean
[ default: false ]
是否是反向徑向軸。該屬性在 ECharts 3 中新加。
radiusAxis.boundaryGap | boolean, Array
徑向軸兩邊留白策略,類目軸和非類目軸的設(shè)置和表現(xiàn)不一樣。
類目軸中 boundaryGap 可以配置為 true 和 false。默認為 true,這時候刻度只是作為分隔線,標(biāo)簽和數(shù)據(jù)點都會在兩個刻度之間的帶(band)中間。
非類目軸,包括時間,數(shù)值,對數(shù)軸,boundaryGap是一個兩個值的數(shù)組,分別表示數(shù)據(jù)最小值和最大值的延伸范圍,可以直接設(shè)置數(shù)值或者相對的百分比,在設(shè)置 min 和 max 后無效。 示例:
boundaryGap: ['20%', '20%']
radiusAxis.min | number, string, function
[ default: null ]
徑向軸刻度的最小值。
可以設(shè)置成特殊值 'dataMin',此時取數(shù)據(jù)在該軸上的最小值作為最小刻度。
不設(shè)置時會自動計算最小值保證坐標(biāo)軸刻度的均勻分布。
在類目軸中,也可以設(shè)置為類目的序數(shù)(如類目軸 data: ['類A', '類B', '類C'] 中,序數(shù) 2 表示 '類C'。也可以設(shè)置為負數(shù),如 -3)。
當(dāng)設(shè)置成 function 形式時,可以根據(jù)計算得出的數(shù)據(jù)最大最小值設(shè)定坐標(biāo)軸的最小值。如:
min: function(value) { return value.min - 20;}其中 value 是一個包含 min 和 max 的對象,分別表示數(shù)據(jù)的最大最小值,這個函數(shù)應(yīng)該返回坐標(biāo)軸的最小值。
radiusAxis.max | number, string
[ default: null ]
徑向軸刻度的最大值。
可以設(shè)置成特殊值 'dataMax',此時取數(shù)據(jù)在該軸上的最大值作為最大刻度。
不設(shè)置時會自動計算最大值保證坐標(biāo)軸刻度的均勻分布。
在類目軸中,也可以設(shè)置為類目的序數(shù)(如類目軸 data: ['類A', '類B', '類C'] 中,序數(shù) 2 表示 '類C'。也可以設(shè)置為負數(shù),如 -3)。
當(dāng)設(shè)置成 function 形式時,可以根據(jù)計算得出的數(shù)據(jù)最大最小值設(shè)定坐標(biāo)軸的最小值。如:
max: function(value) { return value.max - 20;}其中 value 是一個包含 min 和 max 的對象,分別表示數(shù)據(jù)的最大最小值,這個函數(shù)應(yīng)該返回坐標(biāo)軸的最大值。
radiusAxis.scale | boolean
[ default: false ]
只在數(shù)值軸中(type: 'value')有效。
是否是脫離 0 值比例。設(shè)置成 true 后坐標(biāo)刻度不會強制包含零刻度。在雙數(shù)值軸的散點圖中比較有用。
在設(shè)置 min 和 max 之后該配置項無效。
radiusAxis.splitNumber | number
[ default: 5 ]
徑向軸的分割段數(shù),需要注意的是這個分割段數(shù)只是個預(yù)估值,最后實際顯示的段數(shù)會在這個基礎(chǔ)上根據(jù)分割后坐標(biāo)軸刻度顯示的易讀程度作調(diào)整。
在類目軸中無效。
radiusAxis.minInterval | number
[ default: 0 ]
自動計算的徑向軸最小間隔大小。
例如可以設(shè)置成1保證坐標(biāo)軸分割刻度顯示成整數(shù)。
{
minInterval: 1
}只在數(shù)值軸或時間軸中(type: 'value' 或 'time')有效。
radiusAxis.maxInterval | number
自動計算的徑向軸最大間隔大小。
例如,在時間軸((type: 'time'))可以設(shè)置成 3600 * 24 * 1000 保證坐標(biāo)軸分割刻度最大為一天。
{
maxInterval: 3600 * 24 * 1000
}只在數(shù)值軸或時間軸中(type: 'value' 或 'time')有效。
radiusAxis.interval | number
強制設(shè)置徑向軸分割間隔。
因為 splitNumber 是預(yù)估的值,實際根據(jù)策略計算出來的刻度可能無法達到想要的效果,這時候可以使用 interval 配合 min、max 強制設(shè)定刻度劃分,一般不建議使用。
無法在類目軸中使用。在時間軸(type: 'time')中需要傳時間戳,在對數(shù)軸(type: 'log')中需要傳指數(shù)值。
radiusAxis.logBase | number
[ default: 10 ]
對數(shù)軸的底數(shù),只在對數(shù)軸中(type: 'log')有效。
radiusAxis.silent | boolean
[ default: false ]
徑向軸是否是靜態(tài)無法交互。
radiusAxis.triggerEvent | boolean
[ default: false ]
徑向軸的標(biāo)簽是否響應(yīng)和觸發(fā)鼠標(biāo)事件,默認不響應(yīng)。
事件參數(shù)如下:
{
// 組件類型,xAxis, yAxis, radiusAxis, angleAxis
// 對應(yīng)組件類型都會有一個屬性表示組件的 index,例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化過的刻度值, 點擊刻度標(biāo)簽有效
value: '',
// 坐標(biāo)軸名稱, 點擊坐標(biāo)軸名稱有效
name: ''
}
radiusAxis.zlevel | number
[ default: 0 ]
徑向軸所有圖形的 zlevel 值。
zlevel用于 Canvas 分層,不同zlevel值的圖形會放置在不同的 Canvas 中,Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁(例如有動畫)的組件設(shè)置成一個單獨的zlevel。需要注意的是過多的 Canvas 會引起內(nèi)存開銷的增大,在手機端上需要謹(jǐn)慎使用以防崩潰。
zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。
radiusAxis.z | number
[ default: 0 ]
徑向軸組件的所有圖形的z值??刂茍D形的前后順序。z 值小的圖形會被z值大的圖形覆蓋。
z 相比 zleve l優(yōu)先級更低,而且不會創(chuàng)建新的 Canvas。
文章標(biāo)題:創(chuàng)新互聯(lián)ECharts教程:ECharts徑向軸的屬性設(shè)置
標(biāo)題網(wǎng)址:http://fisionsoft.com.cn/article/djejhgd.html


咨詢
建站咨詢
