echarts中的timeline

当我拿到需求，想着如何在echart图表上展示多个数据，但由于数据不是连续的，并且展示一天内的数据过多（能有10多万条），考虑到优化，将所有的数据根据时间进行分组，通过二维数组进行实现，每当当前数据和下一个数据的时间相差10min以上，就把这段数据放入一个新的数组。
然后要对数组中的每一个数组中的数据渲染到echart中的折线图中，legend是无法实现的，于是看到了timeline组件。
将数组中长度小于10的元素过滤掉，因为展示数据量太少，没有意义。？？？这个有待考虑 适用性。
timeline组件中我配置了如下基本设置：

timeline: {
  axisType: 'category',  //轴的类型这里我设置了类目轴
  show: true, 
  autoPlay: false, //不自动播放
  data: timeLineData, //timeline坐标轴上展示的数据
  top: '3%',
  controlStyle:{
  	showPlayBtn: true //可以控制button播放是否显示
  },
  replaceMerge: 'series', //如果需要下一个时间刻度的 series 完全替换上一个时间刻度的 series 而不进行任何 merge ，可以设置 replaceMerge: 'series'，并且两个时间刻度的 series id 不相同或者没有 id 。
  realtime: true,  //拖动圆点的时候，实时更新试图。
  symbol: 'emptyCircle',//轴上点的显示类型
},

对二维数组遍历的时候，其中每一项配置到dataset上，

dataset: [
 {
   dimensions: [...columns.map(c => {
    return c.showName;
   }), "xAxis"],
   source: dataWithXaxis(item, columns), 
   sourceHeader: false
   }, ...dataYPlus.cfgs.map(cs => {
     return {
      transform: {
       type: "filter",
        config: {
          and: cs.length > 0 ? cs : [{dimension: 0, "!=": null}]
        }
       }
    };
  })
],

因为timeline中baseOption在merge的时候会跟option合并在一起，所以我们数据应该配置在options数组中。
写法仿照echarts中的官方文档里面的案例：

// 如下，baseOption 是一个 『原子option』，options 数组
// 中的每一项也是一个 『原子option』。
// 每个『原子option』中就是本文档中描述的各种配置项。
myChart.setOption({
    // `baseOption` 的属性.
    timeline: {
        ...,
        // `timeline.data` 中的每一项，对应于 `options`
        // 数组中的每个 `option`
        data: ['2002-01-01', '2003-01-01', '2004-01-01']
    },
    grid: { ... },
    xAxis: [ ... ],
    yAxis: [ ... ],
    series: [{
        // 系列一的一些其他配置
        type: 'bar',
        ...
    }, {
        // 系列二的一些其他配置
        type: 'line',
        ...
    }, {
        // 系列三的一些其他配置
        type: 'pie',
        ...
    }],
    // `switchableOption`s:
    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: [] }
        ]
    }]
});

效果图：