設(shè)置多個ECharts平行坐標(biāo)軸

2018-09-28 10:46 更新

parallel.parallelAxisDefault   |   Object

ECharts 中配置多個 parallelAxis 時,有些值一樣的屬性,如果書寫多遍則比較繁瑣,那么可以放置在 parallel.parallelAxisDefault 里。在坐標(biāo)軸初始化前,parallel.parallelAxisDefault 里的配置項,會分別融合進(jìn) parallelAxis,形成最終的坐標(biāo)軸的配置。

參見此示例

parallel.parallelAxisDefault.type   |   string

[ default: value ]

坐標(biāo)軸類型。

可選:

  • 'value' 數(shù)值軸,適用于連續(xù)數(shù)據(jù)。
  • 'category' 類目軸,適用于離散的類目數(shù)據(jù),為該類型時必須通過 data 設(shè)置類目數(shù)據(jù)。
  • 'time' 時間軸,適用于連續(xù)的時序數(shù)據(jù),與數(shù)值軸相比時間軸帶有時間的格式化,在刻度計算上也有所不同,例如會根據(jù)跨度的范圍來決定使用月,星期,日還是小時范圍的刻度。
  • 'log' 對數(shù)軸。適用于對數(shù)數(shù)據(jù)。

parallel.parallelAxisDefault.name   |   string

平行坐標(biāo)軸名稱。

parallel.parallelAxisDefault.nameLocation   |   string

[ default: 'end' ]

平行坐標(biāo)軸名稱顯示位置。

可選:

  • 'start'
  • 'middle'
  • 'end'

parallel.parallelAxisDefault.nameTextStyle   |   Object

平行坐標(biāo)軸名稱的文字樣式,在此屬性中,您可以設(shè)置 parallel 坐標(biāo)軸名稱的顏色、字體、文字對齊方式等。

parallel.parallelAxisDefault.nameGap   |   number

[ default: 15 ]

坐標(biāo)軸名稱與軸線之間的距離。

parallel.parallelAxisDefault.nameRotate   |   number

[ default: null ]

坐標(biāo)軸名字旋轉(zhuǎn),角度值。

parallel.parallelAxisDefault.inverse   |   boolean

[ default: false ]

是否是反向坐標(biāo)軸。ECharts 3 中新加。

parallel.parallelAxisDefault.boundaryGap   |   boolean, Array

坐標(biāo)軸兩邊留白策略,類目軸和非類目軸的設(shè)置和表現(xiàn)不一樣。

類目軸中 boundaryGap 可以配置為 true 和 false。默認(rèn)為 true,這時候刻度只是作為分隔線,標(biāo)簽和數(shù)據(jù)點都會在兩個刻度之間的帶(band)中間。

非類目軸,包括時間,數(shù)值,對數(shù)軸,boundaryGap是一個兩個值的數(shù)組,分別表示數(shù)據(jù)最小值和最大值的延伸范圍,可以直接設(shè)置數(shù)值或者相對的百分比,在設(shè)置 min 和 max 后無效。 示例:

boundaryGap: ['20%', '20%']

parallel.parallelAxisDefault.min   |   number, string, function

[ default: null ]

坐標(biāo)軸刻度最小值。

可以設(shè)置成特殊值 'dataMin',此時取數(shù)據(jù)在該軸上的最小值作為最小刻度。

不設(shè)置時會自動計算最小值保證坐標(biāo)軸刻度的均勻分布。

在類目軸中,也可以設(shè)置為類目的序數(shù)(如類目軸 data: ['類A', '類B', '類C'] 中,序數(shù) 2 表示 '類C'。也可以設(shè)置為負(fù)數(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)軸的最小值。

parallel.parallelAxisDefault.max   |   number, string

[ default: null ]

坐標(biāo)軸刻度最大值。

可以設(shè)置成特殊值 'dataMax',此時取數(shù)據(jù)在該軸上的最大值作為最大刻度。

不設(shè)置時會自動計算最大值保證坐標(biāo)軸刻度的均勻分布。

在類目軸中,也可以設(shè)置為類目的序數(shù)(如類目軸 data: ['類A', '類B', '類C'] 中,序數(shù) 2 表示 '類C'。也可以設(shè)置為負(fù)數(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)軸的最大值。

parallel.parallelAxisDefault.scale   |   boolean

[ default: false ]

只在數(shù)值軸中(type: 'value')有效。

是否是脫離 0 值比例。設(shè)置成 true 后坐標(biāo)刻度不會強制包含零刻度。在雙數(shù)值軸的散點圖中比較有用。

在設(shè)置 min 和 max 之后該配置項無效。

parallel.parallelAxisDefault.splitNumber   |   number

[ default: 5 ]

坐標(biāo)軸的分割段數(shù),需要注意的是這個分割段數(shù)只是個預(yù)估值,最后實際顯示的段數(shù)會在這個基礎(chǔ)上根據(jù)分割后坐標(biāo)軸刻度顯示的易讀程度作調(diào)整。

在類目軸中無效。

parallel.parallelAxisDefault.minInterval   |   number

[ default: 0 ]

自動計算的坐標(biāo)軸最小間隔大小。

例如可以設(shè)置成1保證坐標(biāo)軸分割刻度顯示成整數(shù)。

{
    minInterval: 1
}

只在數(shù)值軸或時間軸中(type: 'value' 或 'time')有效。

parallel.parallelAxisDefault.maxInterval   |   number

自動計算的坐標(biāo)軸最大間隔大小。

例如,在時間軸((type: 'time'))可以設(shè)置成 3600 * 24 * 1000 保證坐標(biāo)軸分割刻度最大為一天。

{
    maxInterval: 3600 * 24 * 1000
}

只在數(shù)值軸或時間軸中(type: 'value' 或 'time')有效。

parallel.parallelAxisDefault.interval   |   number

強制設(shè)置坐標(biāo)軸分割間隔。

因為 splitNumber 是預(yù)估的值,實際根據(jù)策略計算出來的刻度可能無法達(dá)到想要的效果,這時候可以使用 interval 配合 min、max 強制設(shè)定刻度劃分,一般不建議使用。

無法在類目軸中使用。在時間軸(type: 'time')中需要傳時間戳,在對數(shù)軸(type: 'log')中需要傳指數(shù)值。

parallel.parallelAxisDefault.logBase   |   number

[ default: 10 ]

對數(shù)軸的底數(shù),只在對數(shù)軸中(type: 'log')有效。

parallel.parallelAxisDefault.silent   |   boolean

[ default: false ]

坐標(biāo)軸是否是靜態(tài)無法交互。

parallel.parallelAxisDefault.triggerEvent   |   boolean

[ default: false ]

坐標(biāo)軸的標(biāo)簽是否響應(yīng)和觸發(fā)鼠標(biāo)事件,默認(rèn)不響應(yīng)。

事件參數(shù)如下:

{
    // 組件類型,xAxis, yAxis, radiusAxis, angleAxis
    // 對應(yīng)組件類型都會有一個屬性表示組件的 index,例如 xAxis 就是 xAxisIndex
    componentType: string,
    // 未格式化過的刻度值, 點擊刻度標(biāo)簽有效
    value: '',
    // 坐標(biāo)軸名稱, 點擊坐標(biāo)軸名稱有效
    name: ''
}
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號