19-Echarts 配置系列之： timeline 动态切换

前言：

timeline 动态切换 作用：在同一个图表上展示不同时间段的数据，并实现动态切换的效果。

简介原理：在 timeline 中定义显示节点并与相应的数据结构绑定，然后调用 ECharts 提供的方法，重新渲染图表。

options 对象用来配置图表的主要选项对象，包括了图表的数据、样式、交互行为等。

baseOption 是option对象的一个子集，定义图表的基本配置选项。一般来说这个属性是在出现多个option 时，用 baseOption 来定义其中公共的配置，减少重复的定义实现一些配置的复用和统一管理。

一、配置代码：

option={
    //  baseOption 中定义公共的 option 配置
    baseOption:{
    timeline:{
        show:true,                          // 是否显示 timeline
        type:'slider',                      // 属性类别仅这种类别
        axisType:'time',                    // 轴的类型
        currentIndex:0,                     // 当前显示的options 组，0时表示展示options[0] 的数据
        autoPlay:true,                      // 是否自动播放
        rewind:true,                        // 是否方向播放
        loop:true,                          // 是否循环播放
        playInterval:100,                   // 数据切换、跳动的间隔，单位毫秒
        realtime:true,                      // 点击还在拖拽圆点的时候，是否事实更新视图
        replaceMerge:undefined,             // 合并方法，用来处理数据切换时，是将数据叠加还是重新绘制。
        controlPosition:'left',             // 该组件的播放按钮的位置
        zlevel:0,                           // 组件所有图形的渲染等级
        z:0,                                // 组件所有图形的 z 值，控制图形的前后顺序。
        left:'auto',                        // 组件距离容器的左侧距离
        right:'auto',                       // 组件距离容器的右侧距离
        top:'10%',                          // 组件距离容器的顶部距离
        bottom:'10%',                       // 组件距离容器的底部距离
        padding:5,                          // 组件内边距
        orient:'horizontal',                // 组件的展示方式，竖直或者水平
        inverse:true,                       // 是否方向放置
        symbol:'rect',                      // 标记的图形
        symbolSize:10,                      // 标记图形的大小
        symbolRotate:10,                    // 标记图形的旋转角度
        symbolKeepAspect:true,              //
        symbolOffset:[0,0],                 //  标记相当于原本位置的偏移
        
        //  timeline 轴线的样式
        lineStyle:{
            show:true,                      // 是否显示轴线
            color:'#DAE1F5',                // 线的颜色
            width:2,                        // 线的宽度
            type:'solid',                   // 线的类别
            dashOffset:10,                  // 线为虚线时，虚线的偏移量
            cap:'butt',                     // 指定线段末端的绘制方法
            join:'bevel',                   // 设置两个长度不为 0 的相连部分如何连接
            miterLimit:10,                  // 设置斜截面限制比例
            shadowBlur:10,                  // 线阴影的模糊大小