ECharts 入门教程 ECharts平行坐标系属性

2024-02-25 开发教程 ECharts 入门教程匿名 4℃

本节将介绍 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 值，默认为 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;
}

也可以看该示例

上一节： ECharts系列列表：平行坐标系

下一节： ECharts线图：绘制线数据

"ECharts 入门教程"的目录

ECharts 入门教程 ECharts平行坐标系属性

平行坐标系属性