parallel坐標(biāo)軸組件的使用

ECharts 中設(shè)置 parallel 坐標(biāo)軸的方法有兩種，分別是使用 parallel 坐標(biāo)軸組件（parallelAxis）和 parallelAxisDefault。后一種方法我們已經(jīng)講解過(guò)來(lái)，本節(jié)介紹如何使用 parallelAxis 組件設(shè)置平行坐標(biāo)系的坐標(biāo)軸。

parallelAxis.dim   |   number

設(shè)置 parallel 坐標(biāo)軸的維度序號(hào)。

例如 series-parallel.data 中有如下數(shù)據(jù)：

[
    [1,  55,  9,   56,  0.46,  18,  6,  '良'],
    [2,  25,  11,  21,  0.65,  34,  9,  '優(yōu)'],
    [3,  56,  7,   63,  0.3,   14,  5,  '良'],
    [4,  33,  7,   29,  0.33,  16,  6,  '優(yōu)'],
    { // 數(shù)據(jù)項(xiàng)也可以是 Object，從而里面能含有對(duì)線條的特殊設(shè)置。
        value: [5,  42,  24,  44,  0.76,  40,  16, '優(yōu)']
        lineStyle: {...},
    }
    ...
]

數(shù)據(jù)中，每一行是一個(gè)『數(shù)據(jù)項(xiàng)』，每一列屬于一個(gè)『維度』。（例如上面數(shù)據(jù)每一列的含義分別是：『日期』,『AQI指數(shù)』, 『PM2.5』, 『PM10』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』）。

dim 定義了數(shù)據(jù)的哪個(gè)維度（即哪個(gè)『列』）會(huì)對(duì)應(yīng)到此坐標(biāo)軸上。

從 0 開(kāi)始計(jì)數(shù)。例如，假設(shè)坐標(biāo)軸的 dim 為 1，則表示數(shù)據(jù)中的第二列會(huì)對(duì)應(yīng)到此坐標(biāo)軸上。

parallelAxis.parallelIndex   |   number

[ default: 0 ]

用于定義『坐標(biāo)軸』對(duì)應(yīng)到哪個(gè)『坐標(biāo)系』中。

比如有如下配置：

myChart.setOption({
    parallel: [
        {...},                      // 第一個(gè)平行坐標(biāo)系
        {...}                       // 第二個(gè)平行坐標(biāo)系
    ],
    parallelAxis: [
        {parallelIndex: 1, ...},    // 第一個(gè)坐標(biāo)軸，對(duì)應(yīng)到第二個(gè)平行坐標(biāo)系
        {parallelIndex: 0, ...},    // 第二個(gè)坐標(biāo)軸，對(duì)應(yīng)到第一個(gè)平行坐標(biāo)系
        {parallelIndex: 1, ...},    // 第三個(gè)坐標(biāo)軸，對(duì)應(yīng)到第二個(gè)平行坐標(biāo)系
        {parallelIndex: 0, ...}     // 第四個(gè)坐標(biāo)軸，對(duì)應(yīng)到第一個(gè)平行坐標(biāo)系
    ],
    ...
});

只有一個(gè)平行坐標(biāo)系時(shí)可不用設(shè)置，自動(dòng)取默認(rèn)值 0。

parallelAxis.realtime   |   boolean

[ default: true ]

是否坐標(biāo)軸刷選的時(shí)候，實(shí)時(shí)刷新視圖。如果設(shè)為 false，則在刷選動(dòng)作結(jié)束時(shí)候，才刷新視圖。

大數(shù)據(jù)量時(shí)，建議設(shè)置成 false，從而避免卡頓。

parallelAxis.type   |   string

[ default: value ]

設(shè)定 parallel 坐標(biāo)軸的類型。

可選：

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

parallelAxis.name   |   string

設(shè)置 parallel 坐標(biāo)軸名稱。

parallelAxis.nameLocation   |   string

[ default: 'end' ]

設(shè)置 parallel 坐標(biāo)軸名稱顯示位置。

可選：

• 'start'
• 'middle' 或者 'center'
• 'end'

parallelAxis.nameTextStyle   |   Object

設(shè)置 parallel 坐標(biāo)軸名稱的文字樣式。

parallelAxis.nameGap   |   number

[ default: 15 ]

設(shè)置 parallel 坐標(biāo)軸名稱與軸線之間的距離。

parallelAxis.nameRotate   |   number

[ default: null ]

設(shè)置 parallel 坐標(biāo)軸名字旋轉(zhuǎn)，角度值。

parallelAxis.inverse   |   boolean

[ default: false ]

是否是反向坐標(biāo)軸。這個(gè)屬性是 ECharts 3 中新加的。

parallelAxis.boundaryGap   |   boolean, Array

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

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

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

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

parallelAxis.min   |   number, string, function

[ default: null ]

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

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

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

在類目軸中，也可以設(shè)置為類目的序數(shù)（如類目軸 data: ['類A', '類B', '類C'] 中，序數(shù) 2 表示 '類C'。也可以設(shè)置為負(fù)數(shù)，如 -3）。

當(dāng)設(shè)置成 function 形式時(shí)，可以根據(jù)計(jì)算得出的數(shù)據(jù)最大最小值設(shè)定坐標(biāo)軸的最小值。如：

min: function(value) {
    return value.min - 20;
}

其中 value 是一個(gè)包含 min 和 max 的對(duì)象，分別表示數(shù)據(jù)的最大最小值，這個(gè)函數(shù)應(yīng)該返回坐標(biāo)軸的最小值。

parallelAxis.max   |   number, string

[ default: null ]

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

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

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

在類目軸中，也可以設(shè)置為類目的序數(shù)（如類目軸 data: ['類A', '類B', '類C'] 中，序數(shù) 2 表示 '類C'。也可以設(shè)置為負(fù)數(shù)，如 -3）。

當(dāng)設(shè)置成 function 形式時(shí)，可以根據(jù)計(jì)算得出的數(shù)據(jù)最大最小值設(shè)定坐標(biāo)軸的最小值。如：

max: function(value) {
    return value.max - 20;
}

其中 value 是一個(gè)包含 min 和 max 的對(duì)象，分別表示數(shù)據(jù)的最大最小值，這個(gè)函數(shù)應(yīng)該返回坐標(biāo)軸的最大值。

parallelAxis.scale   |   boolean

[ default: false ]

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

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

在設(shè)置 min 和 max 之后該配置項(xiàng)無(wú)效。

parallelAxis.splitNumber   |   number

[ default: 5 ]

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

在類目軸中無(wú)效。

parallelAxis.minInterval   |   number

[ default: 0 ]

自動(dòng)計(jì)算的坐標(biāo)軸最小間隔大小。

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

{
    minInterval: 1
}

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

parallelAxis.maxInterval   |   number

自動(dòng)計(jì)算的坐標(biāo)軸最大間隔大小。

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

{
    maxInterval: 3600 * 24 * 1000
}

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

parallelAxis.interval   |   number

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

因?yàn)?nbsp;splitNumber 是預(yù)估的值，實(shí)際根據(jù)策略計(jì)算出來(lái)的刻度可能無(wú)法達(dá)到想要的效果，這時(shí)候可以使用 interval 配合 min、max 強(qiáng)制設(shè)定刻度劃分，一般不建議使用。

無(wú)法在類目軸中使用。在時(shí)間軸（type: 'time'）中需要傳時(shí)間戳，在對(duì)數(shù)軸（type: 'log'）中需要傳指數(shù)值。

parallelAxis.logBase   |   number

[ default: 10 ]

對(duì)數(shù)軸的底數(shù)，只在對(duì)數(shù)軸中（type: 'log'）有效。

parallelAxis.silent   |   boolean

[ default: false ]

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

parallelAxis.triggerEvent   |   boolean

[ default: false ]

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

事件參數(shù)如下：

{
    // 組件類型，xAxis, yAxis, radiusAxis, angleAxis
    // 對(duì)應(yīng)組件類型都會(huì)有一個(gè)屬性表示組件的 index，例如 xAxis 就是 xAxisIndex
    componentType: string,
    // 未格式化過(guò)的刻度值, 點(diǎn)擊刻度標(biāo)簽有效
    value: '',
    // 坐標(biāo)軸名稱, 點(diǎn)擊坐標(biāo)軸名稱有效
    name: ''
}