timeline在线demo https://echarts.apache.org/examples/zh/editor.html?c=doc-example/mix-timeline-all
timeline参数配置 https://echarts.apache.org/zh/option.html#timeline.axisType
image.png

baseOption

baseOption就是默认的 option，和普通的 options没有区别；区别在于 timeline属性

  • options数组的每一项，就是一个 timeline的数据
  • �有多少个 timeline，options就有多少个配置
  • options中的每项会merge覆盖 baseOption的配置项
    • baseOption是静态配置
    • options的每项是动态配置

timelineOption配置

  1. // 兼容 echarts5.x
  2. const config = {
  3.   timeline: {},
  4.   baseOption: {},
  5.   options: []
  6. }
  8. // 兼容 echarts4.x
  9. const option = {
  10.   baseOption: {
  11.     timeline: {},
  12.     series: [],
  13.   },
  14.   options: []
  15. };

options配置文档 https://echarts.apache.org/zh/option.html#options
数组的每一项是一个 echarts option ECUnitOption

timeline常用配置

  1. function timeline(cities) {
  2.   return {
  3.     data: cities,
  4.     axisType: 'category', // 坐标轴类型
  5.     realtime: true, // 拖动时是否实时渲染视图
  6.     rewind: false, // 是否启动反向播放，需要将loop置为true
  7.     // loop: false, // 是否循环播放
  8.     autoPlay: false, // 是否自动播放
  9.     currentIndex: 0, // 起始位置
  10.     // playInterval:3000, // 播放间隔
  11.     left: 24, // timeline的位置
  12.     bottom: 24,
  13.     width: '80%',
  14.     label: { // 文字样式控制
  15.       normal: {
  16.         position: 16,
  17.         textStyle: {
  18.           color: '#ddd',
  19.           fontSize: 24
  20.         }
  21.       },
  22.       // emphasis: {
  23.       //   textStyle: { color: '#fff', fontSize: 24,}
  24.       // }
  25.     },
  26.     progress: { // 选中后的样式
  27.       label: {
  28.         fontSize: 24
  29.       }
  30.     },
  31.     // 以下都是 timeline的样式
  32.     symbolSize: 16,
  33.     lineStyle: { color: '#555' },
  34.     checkpointStyle: { // 选中的样式
  35.       borderColor: '#fff',
  36.       borderWidth: 2
  37.     },
  38.     controlStyle: { // 左右箭头控制
  39.       showNextBtn: true,
  40.       showPrevBtn: true,
  41.       normal: {
  42.         color: '#666',
  43.         borderColor: '#666'
  44.       },
  45.       emphasis: {
  46.         color: '#fff',
  47.         borderColor: '#fff',
  48.         fontSize: 24,
  49.       }
  50.     },
  51.   }
  52. }
  54. export default timeline;

vue timeline

timeline https://echarts.apache.org/zh/option.html#timeline

  1. <template>
  2.   <div className="chart" ref="box"/>
  3. </template>
  5. <script>
  6. import {
  7.   onMounted, getCurrentInstance,
  8.   defineComponent
  9. } from 'vue';
  10. import * as echarts from 'echarts';
  12. export default defineComponent({
  13.   setup() {
  14.     onMounted(() => {
  15.       const { ctx } = getCurrentInstance();
  16.       const element = ctx.$refs.box;
  18.       // 基于准备好的dom，初始化echarts实例
  19.       const myChart = echarts.init(element);
  20.       // 绘制图表
  21.       myChart.setOption({
  22.         baseOption: {
  23.           timeline: {
  24.             axisType: 'category', // 坐标轴类型
  25.             realtime: true, // 拖动时是否实时渲染视图
  26.             rewind: false, // 是否启动反向播放，需要将loop置为true
  27.             loop: true, // 是否循环播放
  28.             autoPlay: false, // 是否自动播放
  29.             inverse: false, // 反向置放timeline
  30.             currentIndex: 0, // 起始位置
  31.             playInterval: 2000, // 播放间隔
  32.             controlStyle: {
  33.               position: 'left'
  34.             }, // 播放控制器位置
  35.             data: [
  36.               '2002-01-01', '2003-01-01', '2004-01-01',
  37.               {
  38.                 value: '2005-01-01',
  39.                 tooltip: {
  40.                   formatter: '{b} GDP达到一个高度'
  41.                 },
  42.                 symbol: 'diamond',
  43.                 symbolSize: 16
  44.               },
  45.               '2006-01-01', '2007-01-01', '2008-01-01', '2009-01-01', '2010-01-01',
  46.               {
  47.                 value: '2011-01-01',
  48.                 tooltip: {
  49.                   formatter(params) {
  50.                     return `${params.name}GDP达到又一个高度`
  51.                   }
  52.                 },
  53.                 symbol: 'diamond',
  54.                 symbolSize: 18
  55.               }
  56.             ], // timeline数据源
  57.             label: {
  58.               formatter(s) {
  59.                 return (new Date(s)).getFullYear()
  60.               }
  61.             } // timeline坐标值
  62.           }
  63.         },
  64.         options: []
  65.       });
  67.       console.log('tx', element);
  68.     });
  69.   },
  70. });
  71. </script>
  73. <style scoped>
  74. .chart {
  75.   height: 320px;
  76.   background-color: rgba(153, 0, 255, 0.2);
  77. }
  78. </style>