ECharts平行坐标系属性

本节将介绍 ECharts 平行坐标系系列的属性以及这些属性分别有什么作用。

平行坐标系属性

type

在平行坐标系中 type 值为'parallel'。

coordinateSystem

该系列使用的坐标系，可选值：

• 'parallel'：使用平行坐标系，通过 parallelIndex 指定相应的平行坐标系组件。

parallelIndex

使用的平行坐标系的 index，在单个图表实例中存在多个平行坐标系的时候有用。

name

系列名称，用于 tooltip 的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。

lineStyle

设置平行坐标系线条的样式。

inactiveOpacity

框选时，未被选中的条线会设置成这个『透明度』（从而可以达到变暗的效果），默认取值 0.05。

activeOpacity

框选时，选中的条线会设置成这个『透明度』（从而可以达到高亮的效果），默认取值为 1。

realtime

是否实时刷新，默认为 true。

data[i]

例如 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』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』）。

zlevel

平行坐标所有图形的 zlevel 值，默认为 0。

zlevel 用于 Canvas 分层，不同 zlevel 值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

z

平行坐标组件的所有图形的 z 值，默认为 2。控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖。

z 相比 zlevel 优先级更低，而且不会创建新的 Canvas。

silent

图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。

animation

是否开启动画，默认为 true。

animationThreshold

是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画，默认阈值为 2000。

animationDuration

初始动画的时长，默认时长为 1000，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果：

animationDuration: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

animationEasing

初始动画的缓动效果，默认为 linear。不同的缓动效果可以参考 缓动示例。

animationDelay

初始动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例：

animationDelay: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

animationDurationUpdate

数据更新动画的时长，默认值为 300。

支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果：

animationDurationUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

animationEasingUpdate

数据更新动画的缓动效果，默认为 cubicOut。

animationDelayUpdate

数据更新动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例：

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例