W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗(yàn)值獎勵
設(shè)置 ECharts 平行坐標(biāo)系的系列。
什么是平行坐標(biāo)系?平行坐標(biāo)系(Parallel Coordinates) 指的是一種常用的可視化高維數(shù)據(jù)的圖表。
例如 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,從而里面能含有對線條的特殊設(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』、『一氧化碳值』、『二氧化氮值』、『二氧化硫值』)。
平行坐標(biāo)系適用于對這種多維數(shù)據(jù)進(jìn)行可視化分析。每一個(gè)維度(每一列)對應(yīng)一個(gè)坐標(biāo)軸,每一個(gè)『數(shù)據(jù)項(xiàng)』是一條線,貫穿多個(gè)坐標(biāo)軸。在坐標(biāo)軸上,可以進(jìn)行數(shù)據(jù)選取等操作。如下:
平行坐標(biāo)系的 option 基本配置如下例:
option = {
parallelAxis: [ // 這是一個(gè)個(gè)『坐標(biāo)軸』的定義
{dim: 0, name: schema[0].text}, // 每個(gè)『坐標(biāo)軸』有個(gè) 'dim' 屬性,表示坐標(biāo)軸的維度號。
{dim: 1, name: schema[1].text},
{dim: 2, name: schema[2].text},
{dim: 3, name: schema[3].text},
{dim: 4, name: schema[4].text},
{dim: 5, name: schema[5].text},
{dim: 6, name: schema[6].text},
{dim: 7, name: schema[7].text,
type: 'category', // 坐標(biāo)軸也可以支持類別型數(shù)據(jù)
data: ['優(yōu)', '良', '輕度污染', '中度污染', '重度污染', '嚴(yán)重污染']
}
],
parallel: { // 這是『坐標(biāo)系』的定義
left: '5%', // 平行坐標(biāo)系的位置設(shè)置
right: '13%',
bottom: '10%',
top: '20%',
parallelAxisDefault: { // 『坐標(biāo)軸』的公有屬性可以配置在這里避免重復(fù)書寫
type: 'value',
nameLocation: 'end',
nameGap: 20
}
},
series: [ // 這里三個(gè)系列共用一個(gè)平行坐標(biāo)系
{
name: '北京',
type: 'parallel', // 這個(gè)系列類型是 'parallel'
data: [
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '優(yōu)'],
...
]
},
{
name: '上海',
type: 'parallel',
data: [
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '優(yōu)'],
...
]
},
{
name: '廣州',
type: 'parallel',
data: [
[4, 33, 7, 29, 0.33, 16, 6, '優(yōu)'],
[5, 42, 24, 44, 0.76, 40, 16, '優(yōu)'],
...
]
}
]
};
在配置過程中需要涉及到三個(gè)組件:parallel、parallelAxis、series-parallel
當(dāng)您配置不止一個(gè)的 parallelAxis 時(shí),為了避免重復(fù)的書寫具有相同值的屬性,您應(yīng)該將它們放置在 parallel.parallelAxisDefault 里。如此,進(jìn)行初始化坐標(biāo)軸之前,會將 parallel.parallelAxisDefault 中的配置項(xiàng)分別在 parallelAxis 中使用,以此形成您最終需要的坐標(biāo)軸配置。
建議:您可以將 series-parallel.lineStyle.normal.width 設(shè)為 0.5(或更?。?,這主要使用在數(shù)據(jù)量很大并且容易發(fā)生卡頓的時(shí)候,該設(shè)置能夠明顯的提高性能。
為了避免因?yàn)榫S度過多而不能完整在頁面中顯示的情況發(fā)生(比如:如果有 50 以上的維度,就會產(chǎn)生 50 個(gè)以上的軸)。您可以使用 parallel.axisExpandable 來改善顯示效果,如下例子:
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: