timeline

timeline 组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。

    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.show: 是否显示 timeline 组件。如果设置为false，不会显示，但是功能还存在。
timeline.type: 这个属性目前只支持为 slider，不需要更改。

timeline.axisType: 轴的类型。

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

timeline.currentIndex: 表示当前选中项是哪项。比如，currentIndex 为 0 时，表示当前选中项为 timeline.data[0]（即使用 options[0]）。
timeline.autoPlay: 表示是否自动播放。
timeline.rewind: 表示是否反向播放。
timeline.loop: 表示是否循环播放。
timeline.playInterval: 表示播放的速度（跳动的间隔），单位毫秒（ms）。
timeline.realtime: true 拖动圆点的时候，是否实时更新视图。
timeline.controlPosition: 表示『播放』按钮的位置。可选值：'left'、'right'。
timeline.zlevel: 所有图形的 zlevel 值。
timeline.z: 组件的所有图形的z值。控制图形的前后顺序。
timeline.left: timeline组件离容器左侧的距离。
timeline.top: timeline组件离容器上侧的距离。
timeline.right: timeline组件离容器右侧的距离。
timeline.bottom: timeline组件离容器下侧的距离。

timeline.padding: timeline内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。

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

timeline.orient: 摆放方式

  可选值有：
  'vertical'：竖直放置。
  'horizontal'：水平放置。

timeline.inverse: 是否反向放置 timeline，反向则首位颠倒过来。
timeline.symbol: timeline标记的图形。可选自带的标记类型，有 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
timeline.symbolSize: timeline标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。
timeline.symbolRotate: timeline标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
timeline.symbolOffset: timeline标记相对于原本位置的偏移。
timeline.lineStyle: ...

timeline.label: 轴的文本标签。有 normal 和 emphasis 两个状态，normal 是文本正常的样式，emphasis 是文本高亮的样式，比如鼠标悬浮或者图例联动高亮的时候会使用 emphasis 作为文本的样式。

timeline.label.position:

  可选的配置方式：
  'auto'： 完全自动决定。
  'left'： 贴左边界放置。 当 timline.orient 为 'horizontal' 时有效。
  'right'：当 timline.orient 为 'horizontal' 时有效。 贴右边界放置。
  'top'： 贴上边界放置。 当 timline.orient 为 'vertical' 时有效。
  'bottom'： 贴下边界放置。 当 timline.orient 为 'vertical' 时有效。
  number： 指定某个数值时，表示 label 和轴的距离。为 0 时则和坐标轴重合，可以为正负值，决定 label 在坐标轴的哪一边。

timeline.label.normal
timeline.label.emphasis

timeline.itemStyle: timeline 图形样式，有 normal 和 emphasis 两个状态，normal 是图形正常的样式，emphasis 是图形高亮的样式，比如鼠标悬浮或者图例联动高亮的时候会使用 emphasis 作为图形的样式。...
timeline.checkpointStyle: 『当前项』（checkpoint）的图形样式。
timeline.controlStyle: 『控制按钮』的样式。『控制按钮』包括：『播放按钮』、『前进按钮』、『后退按钮』。

timeline.data: timeline 数据。Array 的每一项，可以是直接的数值。如果需要对每个数据项单独进行样式定义，则数据项写成 Object。Object中，value属性为数值。其他属性如下例子，可以覆盖 timeline 中的属性配置。

  如下例：
  [
      '2002-01-01',
      '2003-01-01',
      '2004-01-01',
      {
          value: '2005-01-01',
          tooltip: {          // 让鼠标悬浮到此项时能够显示 `tooltip`。
              formatter: '{b} xxxx'
          },
          symbol: 'diamond',  // 此项的图形的特别设置。
          symbolSize: 16      // 此项的图形大小的特别设置。
      },
      '2006-01-01',
      '2007-01-01',
      '2008-01-01',
      '2009-01-01',
      '2010-01-01',
      {
          value: '2011-01-01',
          tooltip: {          // 让鼠标悬浮到此项时能够显示 `tooltip`。
              formatter: function (params) {
                  return params.name + 'xxxx';
              }
          },
          symbol: 'diamond',
          symbolSize: 18
      },
  ]