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

2018-11-28 09:24 更新

本節(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,在單個圖表實例中存在多個平行坐標(biāo)系的時候有用。

name

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

lineStyle

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

inactiveOpacity

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

activeOpacity

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

realtime

是否實時刷新,默認(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ù)項也可以是 Object,從而里面能含有對線條的特殊設(shè)置。
        value: [5,  42,  24,  44,  0.76,  40,  16, '優(yōu)']
        lineStyle: {...},
    }
    ...
]

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

zlevel

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

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

zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。

z

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

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

silent

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

animation

是否開啟動畫,默認(rèn)為 true。

animationThreshold

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

animationDuration

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

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

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

animationDelay

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

如下示例:

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

也可以看該示例

animationDurationUpdate

數(shù)據(jù)更新動畫的時長,默認(rèn)值為 300。

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

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

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

animationDelayUpdate

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

如下示例:

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

也可以看該示例

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號