JSRUN 用代码说话

平行坐标系(parallel)

编辑教程

平行坐标系(parallel)

parallel

在 ECharts 中平行坐标系(parallel)是一种常用的可视化高维数据的图表。平行坐标系的具有良好的数学基础, 其射影几何解释和对偶特性使它很适合用于可视化数据分析。

例如

series-parallel.data 中有如下数据:

[
    [1,  55,  9,   56,  0.46,  18,  6,  '良'],
    [2,  25,  11,  21,  0.65,  34,  9,  '优'],
    [3,  56,  7,   63,  0.3,   14,  5,  '良'],
    [4,  33,  7,   29,  0.33,  16,  6,  '优'],
    { // 数据项也可以是 Object,从而里面能含有对线条的特殊设置。
        value: [5,  42,  24,  44,  0.76,  40,  16, '优']
        lineStyle: {...},

    }
    ...
]

数据中,每一行是一个『数据项』,每一列属于一个『维度』。(例如上面数据每一列的含义分别是:『日期』,『AQI指数』, 『PM2.5』, 『PM10』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』)。

平行坐标系适用于对这种多维数据进行可视化分析。每一个维度(每一列)对应一个坐标轴,每一个『数据项』是一条线,贯穿多个坐标轴。在坐标轴上,可以进行数据选取等操作。如下:

在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',           // 坐标轴也可以支持类别型数据
            data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
        }
    ],
    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,  '优'],
                ...
            ]
        },
        {
            name: '上海',
            type: 'parallel',
            data: [
                [3,  56,  7,   63,  0.3,   14,  5,  '良'],
                [4,  33,  7,   29,  0.33,  16,  6,  '优'],
                ...
            ]
        },
        {
            name: '广州',
            type: 'parallel',
            data: [
                [4,  33,  7,   29,  0.33,  16,  6,  '优'],
                [5,  42,  24,  44,  0.76,  40,  16, '优'],
                ...
            ]
        }
    ]
};

需要涉及到三个组件:parallel、parallelAxis、series-parallel

parallel:这个配置项是平行坐标系的『坐标系』本身。一个系列(series)或多个系列(如上图中的『北京』、『上海』、『广州』分别各是一个系列)可以共用这个『坐标系』。和其他坐标系一样,坐标系也可以创建多个。位置设置,也是放在这里进行。

parallelAxis:这个是『坐标系』中的坐标轴的配置。自然,需要有多个坐标轴。其中有 parallelAxis.parallelIndex 属性,指定这个『坐标轴』在哪个『坐标系』中。默认使用第一个『坐标系』。

series-parallel:这个是『系列』的定义。系列被画到『坐标系』上。其中有 series-parallel.parallelIndex 属性,指定使用哪个『坐标系』。默认使用第一个『坐标系』。

平行坐标系配置注意项及实例

配置多个 parallelAxis 时,有些值一样的属性,如果书写多遍则比较繁琐,那么可以放置在 parallel.parallelAxisDefault 里。在坐标轴初始化前,parallel.parallelAxisDefault 里的配置项,会分别融合进 parallelAxis,形成最终的坐标轴的配置。

如果数据量很大并且发生卡顿的话,建议把 series-parallel.lineStyle.normal.width 设为 0.5(或更小), 可能显著改善性能。

遇到维度较多的数据的显示时,比如有 50+ 的维度,那么就会有 50+ 个轴。那么可能会页面显示不下。

那么,可以通过 parallel.axisExpandable 来改善显示效果,如下例子:

ECharts改善平行坐标轴显示效果

JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟