series[i]-parallel

設置 ECharts 平行坐標系的系列。

創(chuàng)新互聯(lián)為客戶提供專業(yè)的網(wǎng)站建設、成都網(wǎng)站建設、程序、域名、空間一條龍服務，提供基于WEB的系統(tǒng)開發(fā). 服務項目涵蓋了網(wǎng)頁設計、網(wǎng)站程序開發(fā)、WEB系統(tǒng)開發(fā)、微信二次開發(fā)、成都手機網(wǎng)站制作等網(wǎng)站方面業(yè)務。

什么是平行坐標系？平行坐標系（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ù)項也可以是 Object，從而里面能含有對線條的特殊設置。
        value: [5,  42,  24,  44,  0.76,  40,  16, '優(yōu)']
        lineStyle: {...},
    }
    ...
]

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

平行坐標系適用于對這種多維數(shù)據(jù)進行可視化分析。每一個維度（每一列）對應一個坐標軸，每一個『數(shù)據(jù)項』是一條線，貫穿多個坐標軸。在坐標軸上，可以進行數(shù)據(jù)選取等操作。如下：

點擊編輯實例 》》

配置 ECharts 平行坐標系

平行坐標系的 option 基本配置如下例：

option = {
    parallelAxis: [                     // 這是一個個『坐標軸』的定義
        {dim: 0, name: schema[0].text}, // 每個『坐標軸』有個 'dim' 屬性，表示坐標軸的維度號。
        {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',           // 坐標軸也可以支持類別型數(shù)據(jù)
            data: ['優(yōu)', '良', '輕度污染', '中度污染', '重度污染', '嚴重污染']
        }
    ],
    parallel: {                         // 這是『坐標系』的定義
        left: '5%',                     // 平行坐標系的位置設置
        right: '13%',
        bottom: '10%',
        top: '20%',
        parallelAxisDefault: {          // 『坐標軸』的公有屬性可以配置在這里避免重復書寫
            type: 'value',
            nameLocation: 'end',
            nameGap: 20
        }
    },
    series: [                           // 這里三個系列共用一個平行坐標系
        {
            name: '北京',
            type: 'parallel',           // 這個系列類型是 '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)'],
                ...
            ]
        }
    ]
};

在配置過程中需要涉及到三個組件：parallel、parallelAxis、series-parallel

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

配置過程注意事項

當您配置不止一個的 parallelAxis 時，為了避免重復的書寫具有相同值的屬性，您應該將它們放置在 parallel.parallelAxisDefault 里。如此，進行初始化坐標軸之前，會將 parallel.parallelAxisDefault 中的配置項分別在 parallelAxis 中使用，以此形成您最終需要的坐標軸配置。

建議：您可以將 series-parallel.lineStyle.normal.width 設為 0.5（或更?。@主要使用在數(shù)據(jù)量很大并且容易發(fā)生卡頓的時候，該設置能夠明顯的提高性能。

如何顯示高維數(shù)據(jù)

為了避免因為維度過多而不能完整在頁面中顯示的情況發(fā)生（比如：如果有 50 以上的維度，就會產(chǎn)生 50 個以上的軸）。您可以使用 parallel.axisExpandable 來改善顯示效果，如下例子：

點擊編輯實例 》》

文章題目：創(chuàng)新互聯(lián)ECharts教程：ECharts系列列表：平行坐標系
文章鏈接：http://uogjgqi.cn/article/djscedo.html