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,                  // 线阴影的模糊大小
            shadowColor:'red',              // 线的阴影颜色
            shadowOffsetX:10,               // 阴影水平偏移量
            shadowOffsetY:10,               // 阴影竖直偏移量
            opacity:0.5,                    // 图形的透明度
        },
        // timeline 轴的文本标签样式
        label:{
            position:'auto',                // 标签的显示位置
            show:true,                      // 标签是否显示
            interval:'auto',                // 标签的间隔
            rotate:90,                      // 标签的旋转角度
            formatter:function (value, index) {    // 标签显示文本的设置
               return value + 'kg';
            },
            color:'red',                     // 标签文本颜色
            fontStyle:'normal',              // 文字字体的风格
            fontWeight:'normal',             // 文字粗细
            fontFamily:'serif',              // 字体系列
            fontSize:12,                     // 字体大小
            align:'center',                  // 文字水平对齐方式
            verticalAlign:'center',          // 文字竖直对齐方式
            lineHeight:56,                   // 行高
            width:10,                      //文字显示宽度
            height:10,                     //文字显示高度
            textBorderColor:'red',         //文本描边颜色
            textBorderWidth:10,            //文本描边宽度
            textBorderType:'solid',        //描边类型
            textBorderDashOffset:10,       //描边为虚线时的偏移量
            textShadowColor:'transparent', //文字阴影颜色
            textShadowBlur:10,             //文字阴影长度
            textShadowOffsetX:10,          //文字阴影水平偏移量
            textShadowOffsetY:10,          //文字阴影竖直偏移量
            overflow:'none',               //文字超出是否截断
            ellipsis:'···',                //文字截断时末尾显示内容
            padding:[5,5,5,5],             //文本标签内边距 
                        
            backgroundColor:'auto',        //文本标签的背景颜色
            borderColor:'red',             //文本标签的边框颜色
            borderWidth:20,                //文本标签的边框宽度
            borderType:'solid',            //文本标签边框描边类型
            borderDashOffset:10,           //描边为虚线时，虚线偏移量
            borderRadius:10,               //文本标签的圆角
            shadowBlur:20,                 //文本标签阴影大小
            shadowColor:'red',             //阴影颜色
            shadowOffsetX:20,              //文本标签的阴影水平偏移
            shadowOffsetY:20,              //文本标签的阴影竖直偏移   
            // 富文本 自定义文本样式 并在上面的 formatter 中使用
            rich:{
                 style1:{
                     // 关于文本的基本样式都可以定义                 
                 }           
            },                              
        },
        // timeline 图形的样式
        itemStyle:{
            color:'red',                      // 图形颜色 优先级低于 areaColor
            borderWidth:2,                    // 图形描边宽度
            borderColor:'red',                // 图形描边颜色
            borderType:'solid',               // 图形描边线类型
            borderDashOffset:10,              // 描边线为虚线时的虚线偏移量
            borderCap:'round',                // 指定线段末端绘制方法
            borderJoin:'bevel',               // 两个线段相连端形状
            borderMiterLimit:10,              // borderJoin 为 miter 时,斜接面比例
            shadowBlur:10,                    // 图形的阴影大小
            shadowColor:'red',                // 图形阴影的颜色
            shadowOffsetX:5,                  // 阴影水平偏移量  
            shadowOffsetY:5,                  // 阴影竖直偏移量    
            opacity:0.5,                      // 图形透明度         
        },
        // 当前项的图形样式
        checkpointStyle:{
            symbol:'pin',                     // 标记的图形形状
            symbolSize: 10,                   // 标记图形大小
            symbolRotate:90,                  // 标记图形旋转角度
            symbolKeepAspect:true,            // 如果symbol 为自定义的 path:// 格式，图形是否等比缩放
            symbolOffset:[10,10],             // 相对于原本位置的偏移
            animation:true,                   // 当前节点切换时是否有动画
            animationDuration:300,            // 当前节点切换动画时长
            animationEasing:'quinticInOut',   // 当前节点动画的缓动效果
            // 剩余的样式内容和 itemStyle 中的一致                
        },
        // 按钮样式
        controlStyle:{
            show:true,                         // 是否显示控制按钮
            showPlayBtn:true,                  // 是否显示播放按钮
            showPrevBtn:true,                  // 是否显示后退按钮
            showNextBtn:true,                  // 是否显示前进按钮
            itemSize:24,                       // 控制按钮的大小
            itemGap:12,                        // 控制按钮的间隔
            position:'left',                   // 控制按钮的位置
            playIcon:'image://url',            // 播放按钮的图形
            stopIcon:'image://url',            // 停止按钮的图形
            prevIcon:'image://url',            // 后退按钮的图形
            nextIcon:'image://url',            // 前进按钮的图形
            color:'red',                      // 图形颜色 优先级低于 areaColor
            borderWidth:2,                    // 图形描边宽度
            borderColor:'red',                // 图形描边颜色
            borderType:'solid',               // 图形描边线类型
            borderDashOffset:10,              // 描边线为虚线时的虚线偏移量
            borderCap:'round',                // 指定线段末端绘制方法
            borderJoin:'bevel',               // 两个线段相连端形状
            borderMiterLimit:10,              // borderJoin 为 miter 时,斜接面比例
            shadowBlur:10,                    // 图形的阴影大小
            shadowColor:'red',                // 图形阴影的颜色
            shadowOffsetX:5,                  // 阴影水平偏移量  
            shadowOffsetY:5,                  // 阴影竖直偏移量    
            opacity:0.5,                      // 图形透明度                      
        },
        // 进度条中当前节点之前的的线条，拐点，标签的样式
        progress:{
                 // 进度条中的线条样式，和上面的 lineStyle 配置内容一致
                 lineStyle:{},
                 // 进度条中的标记点图形样式，和上面的 itemStyle 配置内容一致
                 itemStyle:{},
                 // 进度条中的标签样式  这个配置视乎不太完整，很多 label 值在 progress 中是无效的
                 label:{},   
        },
        // timeline 中高亮样式配置
        emphasis:{
            // 标签高亮样式，和上面的 label 配置内容一致
            label:{},
            // 进度条中的标记点图形高亮样式，和上面的 itemStyle 配置内容一致
            itemStyle:{},
            // 当前项，高亮状态样式，与上 checkpointStyle 配置相同
            checkpointStyle:{},
            // 控制按钮高亮状态样式，与上 controlStyle 配置相同
            controlStyle:{}     
        },
        // timeline 数据项
        data:[
            '2021',
            '2022',
            '2023',
            {
                value:'2024',
                // 单独配置指示器内容
                tooltip:{
                    formatter:function(params){
                        return params.name +'年'            
                    }                
                },
                // 单独配置图标
                symbol:'diamond',        // 图标图形
                symbolSize:12,           // 图标大小
                symbolOffset:[5,5],      // 图标偏移量
                symbolRotate:90,         // 图标旋转角度
                // 单独配置文本标签样式
                label:{
                    // 与上面配置的 label 内容一致                                    
                },
                // 单独配置图形样式
                itemStyle:{
                    // 配置内容与上方的 itemStyle 一致                
                },
                // 单独配置高亮状态
                emphasis:{
                    // 配置内容与上方的 emphasis 一致                                    
                }          
            }        
        ]                                                                                                                                                                                                                                
    }
    }
}

二、解剖图：

三、配置实例代码

使用：

代码：

option = {
  baseOption: {
    grid:{
      height:'60%'
    },
    tooltip:{},
    // 核心配置
    timeline:{
      bottom:'5%',
      symbolSize:24,
      // 文本标签样式
      label:{
       position:20,
        fontSize:24,
      },
      // 控制按钮样式
      controlStyle:{
        // itemSize:24,
        itemGap:32
      },
      
      checkpointStyle:{
        symbolSize:24,
      },
      // 进度条中的线条，拐点，标签的样式。
      progress:{
        label:{
               fontSize:24,
        show:false,
          textBorderColor:'red',
          textBorderWidth:5,
        },
      },
      // 高亮样式配置
      emphasis:{
       checkpointStyle:{
          color:'red',
      },
      },
      axisType: "category",
      autoPlay: true,
      playInterval: 10000,
      // 数据项配置
      data:[
          '2020',
          '2021',
          '2022',
          {
            value:'2023',
            tooltip:{
              formatter:'{b} GDP达到一个高度'
            },
            symbol:'diamond',
          }
      ],
      
    },
    title:{
       subtext: '数据来自撒娇的骑士'
    },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
  },
  yAxis: {
    type: 'value'
  },
  // 统一定义 series 的
  series: [
      {
        name: '快乐值',
        type: 'bar',
      },
      {
        name: '消费',
        type: 'line',
      }
    ]
  },
  // 设置 每个节点的 配置：标题，数据，图形类型等
  options:[
       {
      title: { text: '2020年平均数据' }, 
      series:[
        {
            data: [150, 230, 224, 218, 135, 147, 260]
        },
        {
           data: [120, 130, 254, 268, 175, 167, 280],
        },
        ]
    },
    {
      title: { text: '2021年平均数据' },
      series:[
         {
 
        data: [180, 250, 264, 298, 135, 147, 260]
      },
        {
     
        data: [110, 120, 244, 258, 185, 177, 270]
      }
        ]
      
    },
    {
      title: { text: '2022年平均数据' },
      series:[
        {
            data: [140, 230, 224, 222, 135, 147, 260]
        },
        {
           data: [125, 130, 254, 268, 180, 173, 285]
        }
        ]
    },
    {
      title: { text: '2023年平均数据' },
      series:[
        {
            data: [150, 230, 230, 218, 135, 147, 260]
        },
        {
           data: [120, 160, 280, 268, 195, 167, 280]
        }
        ]
    }
 
    ]
};