ECharts平行坐标系属性

2018-11-28 09:24 更新

本节将介绍 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;
}

也可以看该示例

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号