ECharts平行坐標(biāo)系(parallel)

2018-09-28 09:38 更新

parallel

在 ECharts 中平行坐標(biāo)系(parallel)是一種常用的可視化高維數(shù)據(jù)的圖表。平行坐標(biāo)系的具有良好的數(shù)學(xué)基礎(chǔ), 其射影幾何解釋和對(duì)偶特性使它很適合用于可視化數(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,從而里面能含有對(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』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』)。

平行坐標(biāo)系適用于對(duì)這種多維數(shù)據(jù)進(jìn)行可視化分析。每一個(gè)維度(每一列)對(duì)應(yīng)一個(gè)坐標(biāo)軸,每一個(gè)『數(shù)據(jù)項(xiàng)』是一條線,貫穿多個(gè)坐標(biāo)軸。在坐標(biāo)軸上,可以進(jìn)行數(shù)據(jù)選取等操作。如下:

在ECharts平行坐標(biāo)系進(jìn)行數(shù)據(jù)選取操作

點(diǎn)擊編輯實(shí)例 》》

平行坐標(biāo)系配置方式

『平行坐標(biāo)系』的 option 基本配置如下例:

option = {
    parallelAxis: [                     // 這是一個(gè)個(gè)『坐標(biāo)軸』的定義
        {dim: 0, name: schema[0].text}, // 每個(gè)『坐標(biāo)軸』有個(gè) 'dim' 屬性,表示坐標(biāo)軸的維度號(hà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

  • parallel:這個(gè)配置項(xiàng)是平行坐標(biāo)系的『坐標(biāo)系』本身。一個(gè)系列(series)或多個(gè)系列(如上圖中的『北京』、『上?!?、『廣州』分別各是一個(gè)系列)可以共用這個(gè)『坐標(biāo)系』。和其他坐標(biāo)系一樣,坐標(biāo)系也可以創(chuàng)建多個(gè)。位置設(shè)置,也是放在這里進(jìn)行。
  • parallelAxis:這個(gè)是『坐標(biāo)系』中的坐標(biāo)軸的配置。自然,需要有多個(gè)坐標(biāo)軸。其中有 parallelAxis.parallelIndex 屬性,指定這個(gè)『坐標(biāo)軸』在哪個(gè)『坐標(biāo)系』中。默認(rèn)使用第一個(gè)『坐標(biāo)系』。
  • series-parallel:這個(gè)是『系列』的定義。系列被畫到『坐標(biāo)系』上。其中有 series-parallel.parallelIndex 屬性,指定使用哪個(gè)『坐標(biāo)系』。默認(rèn)使用第一個(gè)『坐標(biāo)系』。

平行坐標(biāo)系配置注意項(xiàng)及實(shí)例

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

如果數(shù)據(jù)量很大并且發(fā)生卡頓的話,建議把 series-parallel.lineStyle.normal.width 設(shè)為 0.5(或更?。?, 可能顯著改善性能。

遇到維度較多的數(shù)據(jù)的顯示時(shí),比如有 50+ 的維度,那么就會(huì)有 50+ 個(gè)軸。那么可能會(huì)頁(yè)面顯示不下。

那么,可以通過 parallel.axisExpandable 來(lái)改善顯示效果,如下例子:

ECharts改善平行坐標(biāo)軸顯示效果

點(diǎn)擊編輯實(shí)例 》》
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)