创新互联ECharts教程：ECharts系列列表：平行坐标系

series[i]-parallel

设置 ECharts 平行坐标系的系列。

创新互联为客户提供专业的网站建设、成都网站建设、程序、域名、空间一条龙服务，提供基于WEB的系统开发. 服务项目涵盖了网页设计、网站程序开发、WEB系统开发、微信二次开发、成都手机网站制作等网站方面业务。

什么是平行坐标系？平行坐标系（Parallel Coordinates）指的是一种常用的可视化高维数据的图表。

例如 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教程：ECharts系列列表：平行坐标系
网站地址：http://www.shufengxianlan.com/qtweb/news15/403965.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容