快速上手ECharts时间轴组件

ECharts 中时间轴组件包含了可以在多个 ECharts option 间进行切换、播放等操作的功能。ECharts 时间轴组件适用的范围是：非动态数据，坐标轴的数据已经确定好数据才便于展示，当然要实现动态数据也是可行的。那么如何才能快速上手 ECharts 时间轴组件呢？让我们先来看一个示例。

示例效果如下：

点击编辑实例 》》

timeline 和其他组件有些不同，它需要操作“多个option”。 假设，我们把 ECharts 的传统的 option 称为 “原子 option”，那么使用 timeline 时，传入 ECharts 的 option 就成为了一个集合多个原子 option 的复合option。如下示例：

// 如下，baseOption 是一个 『原子option』，options 数组中的每一项也是一个 『原子option』。
// 每个『原子option』中就是本文档中描述的各种配置项。
myChart.setOption(
    {
        baseOption: {
            timeline: {
                ...,
                data: ['2002-01-01', '2003-01-01', '2004-01-01']
            },
            title: {
                subtext: '数据来自国家统计局'
            },
            grid: {...},
            xAxis: [...],
            yAxis: [...],
            series: [
                { // 系列一的一些其他配置
                    type: 'bar',
                    ...
                },
                { // 系列二的一些其他配置
                    type: 'line',
                    ...
                },
                { // 系列三的一些其他配置
                    type: 'pie',
                    ...
                }
            ]
        },
        options: [
            { // 这是'2002-01-01' 对应的 option
                title: {
                    text: '2002年统计值'
                },
                series: [
                    {data: []}, // 系列一的数据
                    {data: []}, // 系列二的数据
                    {data: []}  // 系列三的数据
                ]
            },
            { // 这是'2003-01-01' 对应的 option
                title: {
                    text: '2003年统计值'
                },
                series: [
                    {data: []},
                    {data: []},
                    {data: []}
                ]
            },
            { // 这是'2004-01-01' 对应的 option
                title: {
                    text: '2004年统计值'
                },
                series: [
                    {data: []},
                    {data: []},
                    {data: []}
                ]
            }
        ]
    }
);

在上例中，timeline.data 中的每一项，对应于 options 数组中的每个 option。

使用注意与最佳实践：

• 公有的配置项，推荐配置在 baseOption 中。timeline 播放切换时，会把 options 数组中的对应的 option，与 baseOption 进行 merge 形成最终的 option。
• options 数组中，如果某一数组项中配置了某个属性，那么其他数组项中也必须配置某个属性，而不能缺省。否则这个属性的执行效果会遗留。
• 复合 option 中的 options 不支持 merge。也就是说，当第二（或三、四、五 ...）次 chart.setOption(rawOption) 时，如果 rawOption 是复合 option（即包含 options 列表），那么新的 rawOption.options 列表不会和老的 options 列表进行 merge，而是简单替代。当然，rawOption.baseOption 仍然会正常和老的 option 进行merge。

与 ECharts 2 的兼容性：

• ECharts 3 中不再支持 timeline.notMerge 参数，也就是不支持 notMerge 模式。如果遇到这种场景需要使用，可在外部进行option管理，并用 setOption(option, true) 这样的notMerge方式设置。
• ECharts 3 和 ECharts 2 相比，timeline 属性的定义位置有所不同，移到了 baseOption 中，统一作为一个普通的组件看待。但是，仍然兼容 ECharts2 的 timeline 定义位置，只是不再推荐这样写。

timeline.show   |   boolean

[ default: true ]

是否显示时间轴组件。如果设置为 false，不会显示，但是功能还存在。

timeline.type   |   string

[ default: 'slider' ]

这个属性目前只支持为 slider，不需要更改。

timeline.axisType   |   string

[ default: 'time' ]

轴的类型。可选值为：

• 'value' 数值轴，适用于连续数据。
• 'category' 类目轴，适用于离散的类目数据。
• 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。

timeline.currentIndex   |   number

[ default: 0 ]

表示当前选中项是哪项。比如，currentIndex 为 0 时，表示当前选中项为 timeline.data[0]（即使用 options[0]）。

timeline.autoPlay   |   boolean

[ default: false ]

表示是否自动播放。

timeline.rewind   |   boolean

[ default: false ]

表示是否反向播放。

timeline.loop   |   boolean

[ default: true ]

表示是否循环播放。

timeline.playInterval   |   number

[ default: 2000 ]

表示播放的速度（跳动的间隔），单位毫秒（ms）。

timeline.realtime   |   boolean

[ default: true ]

拖动圆点的时候，是否实时更新视图。

timeline.controlPosition   |   string

[ default: 'left' ]

表示『播放』按钮的位置。可选值：'left'、'right'。

timeline.zlevel   |   number

[ default: 0 ]

所有图形的 zlevel 值。

zlevel 用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。

需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。

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

timeline.z   |   number

[ default: 2 ]

时间轴组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

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

timeline.left   |   string, number

[ default: 'auto' ]

时间轴组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。

timeline.top   |   string, number

[ default: 'auto' ]

时间轴组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。

timeline.right   |   string, number

[ default: 'auto' ]

时间轴组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

timeline.bottom   |   string, number

[ default: 'auto' ]

时间轴组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

timeline.padding   |   number, Array

[ default: 5 ]

时间轴组件的内边距，单位为 px，默认各方向内边距为 5px，接受数组分别设定上右下左边距。

使用示例：

// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5，左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
    5,  // 上
    10, // 右
    5,  // 下
    10, // 左
]

timeline.orient   |   string

[ default: 'horizontal' ]

摆放方式，可选值有：

• 'vertical'：竖直放置。
• 'horizontal'：水平放置。

timeline.inverse   |   boolean

[ default: false ]

• 是否反向放置 timeline，反向则首位颠倒过来。

timeline.symbol   |   string

[ default: 'emptyCircle' ]

timeline 标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片，其中 url 为图片的链接，或者 dataURI。

可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

timeline.symbolSize   |   number, Array

[ default: 10 ]

timeline 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。

timeline.symbolRotate   |   number

timeline 标记的旋转角度。

注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

timeline.symbolOffset   |   Array

[ default: [0, 0] ]

timeline 标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置，但是如果 symbol 是自定义的矢量路径或者图片，就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移，可以是绝对的像素值，也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置，在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。