ECharts平行坐標(biāo)系屬性

本節(jié)將介紹 ECharts 平行坐標(biāo)系系列的屬性以及這些屬性分別有什么作用。

平行坐標(biāo)系屬性

type

在平行坐標(biāo)系中 type 值為'parallel'。

coordinateSystem

該系列使用的坐標(biāo)系，可選值：

• 'parallel'：使用平行坐標(biāo)系，通過 parallelIndex 指定相應(yīng)的平行坐標(biāo)系組件。

parallelIndex

使用的平行坐標(biāo)系的 index，在單個(gè)圖表實(shí)例中存在多個(gè)平行坐標(biāo)系的時(shí)候有用。

name

系列名稱，用于 tooltip 的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列。

lineStyle

設(shè)置平行坐標(biāo)系線條的樣式。

inactiveOpacity

框選時(shí)，未被選中的條線會(huì)設(shè)置成這個(gè)『透明度』（從而可以達(dá)到變暗的效果），默認(rèn)取值 0.05。

activeOpacity

框選時(shí)，選中的條線會(huì)設(shè)置成這個(gè)『透明度』（從而可以達(dá)到高亮的效果），默認(rèn)取值為 1。

realtime

是否實(shí)時(shí)刷新，默認(rèn)為 true。

data[i]

例如 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』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』）。

zlevel

平行坐標(biāo)所有圖形的 zlevel 值，默認(rèn)為 0。

zlevel 用于 Canvas 分層，不同 zlevel 值的圖形會(huì)放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動(dòng)畫）的組件設(shè)置成一個(gè)單獨(dú)的zlevel。需要注意的是過多的 Canvas 會(huì)引起內(nèi)存開銷的增大，在手機(jī)端上需要謹(jǐn)慎使用以防崩潰。

zlevel 大的 Canvas 會(huì)放在 zlevel 小的 Canvas 的上面。

z

平行坐標(biāo)組件的所有圖形的 z 值，默認(rèn)為 2?？刂茍D形的前后順序。z 值小的圖形會(huì)被 z 值大的圖形覆蓋。

z 相比 zlevel 優(yōu)先級(jí)更低，而且不會(huì)創(chuàng)建新的 Canvas。

silent

圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件，默認(rèn)為 false，即響應(yīng)和觸發(fā)鼠標(biāo)事件。

animation

是否開啟動(dòng)畫，默認(rèn)為 true。

animationThreshold

是否開啟動(dòng)畫的閾值，當(dāng)單個(gè)系列顯示的圖形數(shù)量大于這個(gè)閾值時(shí)會(huì)關(guān)閉動(dòng)畫，默認(rèn)閾值為 2000。

animationDuration

初始動(dòng)畫的時(shí)長，默認(rèn)時(shí)長為 1000，支持回調(diào)函數(shù)，可以通過每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的初始動(dòng)畫效果：

animationDuration: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

animationEasing

初始動(dòng)畫的緩動(dòng)效果，默認(rèn)為 linear。不同的緩動(dòng)效果可以參考 緩動(dòng)示例。

animationDelay

初始動(dòng)畫的延遲，支持回調(diào)函數(shù)，可以通過每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的初始動(dòng)畫效果。

如下示例：

animationDelay: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

也可以看該示例

animationDurationUpdate

數(shù)據(jù)更新動(dòng)畫的時(shí)長，默認(rèn)值為 300。

支持回調(diào)函數(shù)，可以通過每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫效果：

animationDurationUpdate: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

animationEasingUpdate

數(shù)據(jù)更新動(dòng)畫的緩動(dòng)效果，默認(rèn)為 cubicOut。

animationDelayUpdate

數(shù)據(jù)更新動(dòng)畫的延遲，支持回調(diào)函數(shù)，可以通過每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫效果。

如下示例：

animationDelayUpdate: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

也可以看該示例