时间轴组件完全指南 - timeline

📋 概述

时间轴（Timeline） 组件用于展示数据随时间变化的动态过程，支持自动播放、手动切换、循环播放等功能。它是制作数据演示、历史回顾、趋势分析的利器。

核心价值

• 动态展示：数据随时间变化的动画效果
• 交互控制：播放、暂停、前进、后退
• 多帧对比：不同时间点的数据对比
• 叙事性强：适合演示和汇报场景

---

🎯 核心概念

1. 基础时间轴

option = {
  baseOption: {
    // 基础配置（所有帧共用）
    title: { text: '动态数据展示' },
    xAxis: { type: 'category', data: ['A', 'B', 'C'] },
    yAxis: { type: 'value' }
  },
  
  timeline: {
    data: ['2020', '2021', '2022', '2023'],
    currentIndex: 0
  },
  
  options: [
    { // 2020年数据
      series: [{ data: [10, 20, 30] }]
    },
    { // 2021年数据
      series: [{ data: [15, 25, 35] }]
    },
    { // 2022年数据
      series: [{ data: [20, 30, 40] }]
    },
    { // 2023年数据
      series: [{ data: [25, 35, 45] }]
    }
  ]
};

2. 自动播放

timeline: {
  autoPlay: true,        // 自动播放
  playInterval: 2000,    // 每2秒切换一次
  loop: true,            // 循环播放
  rewind: false          // 不往回播放
}

---

🔧 详细配置项

完整时间轴配置

option = {
  baseOption: {
    title: {
      text: '全国GDP变化趋势',
      left: 'center'
    },
    
    tooltip: {
      trigger: 'axis'
    },
    
    legend: {
      data: ['东部', '中部', '西部'],
      top: 40
    },
    
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    
    xAxis: {
      type: 'category',
      data: ['北京', '上海', '广东', '江苏', '浙江']
    },
    
    yAxis: {
      type: 'value',
      name: 'GDP（万亿元）'
    }
  },
  
  timeline: {
    // === 基础配置 ===
    axisType: 'category', // 'category' | 'time' | 'number'
    data: ['2018', '2019', '2020', '2021', '2022', '2023'],
    currentIndex: 0,      // 当前索引
    
    // === 布局 ===
    orient: 'horizontal', // 'horizontal' | 'vertical'
    left: '10%',
    right: '10%',
    bottom: 10,
    height: 40,
    
    // === 外观 ===
    lineStyle: {
      color: '#5470c6',
      width: 2
    },
    label: {
      color: '#333',
      fontSize: 12
    },
    
    // === 控制点样式 ===
    checkpointStyle: {
      color: '#5470c6',
      borderColor: '#fff',
      borderWidth: 2,
      symbol: 'circle',
      symbolSize: 13
    },
    
    // === 控制按钮 ===
    controlStyle: {
      show: true,
      showPlayBtn: true,   // 显示播放按钮
      showPrevBtn: true,   // 显示上一帧按钮
      showNextBtn: true,   // 显示下一帧按钮
      itemSize: 15,
      itemGap: 10
    },
    
    // === 播放配置 ===
    autoPlay: false,       // 是否自动播放
    playInterval: 2000,    // 播放间隔（毫秒）
    loop: true,            // 是否循环
    rewind: false,         // 是否往回播放
    
    // === 其他 ===
    symbol: 'emptyCircle',
    symbolSize: 8,
    inactiveColor: '#ccc'
  },
  
  options: [
    { // 2018
      series: [
        { name: '东部', type: 'bar', data: [3.0, 3.2, 9.7, 9.3, 5.6] },
        { name: '中部', type: 'bar', data: [1.8, 1.5, 2.0, 2.2, 1.9] },
        { name: '西部', type: 'bar', data: [1.5, 1.3, 1.8, 1.7, 1.6] }
      ]
    },
    { // 2019
      series: [
        { name: '东部', type: 'bar', data: [3.2, 3.5, 10.2, 9.9, 6.0] },
        { name: '中部', type: 'bar', data: [1.9, 1.6, 2.1, 2.3, 2.0] },
        { name: '西部', type: 'bar', data: [1.6, 1.4, 1.9, 1.8, 1.7] }
      ]
    },
    { // 2020
      series: [
        { name: '东部', type: 'bar', data: [3.4, 3.7, 10.8, 10.3, 6.4] },
        { name: '中部', type: 'bar', data: [2.0, 1.7, 2.2, 2.4, 2.1] },
        { name: '西部', type: 'bar', data: [1.7, 1.5, 2.0, 1.9, 1.8] }
      ]
    },
    { // 2021
      series: [
        { name: '东部', type: 'bar', data: [3.6, 3.9, 11.5, 10.8, 6.8] },
        { name: '中部', type: 'bar', data: [2.1, 1.8, 2.3, 2.5, 2.2] },
        { name: '西部', type: 'bar', data: [1.8, 1.6, 2.1, 2.0, 1.9] }
      ]
    },
    { // 2022
      series: [
        { name: '东部', type: 'bar', data: [3.8, 4.1, 12.2, 11.3, 7.2] },
        { name: '中部', type: 'bar', data: [2.2, 1.9, 2.4, 2.6, 2.3] },
        { name: '西部', type: 'bar', data: [1.9, 1.7, 2.2, 2.1, 2.0] }
      ]
    },
    { // 2023
      series: [
        { name: '东部', type: 'bar', data: [4.0, 4.3, 12.9, 11.8, 7.6] },
        { name: '中部', type: 'bar', data: [2.3, 2.0, 2.5, 2.7, 2.4] },
        { name: '西部', type: 'bar', data: [2.0, 1.8, 2.3, 2.2, 2.1] }
      ]
    }
  ]
};

---

💡 实战案例

案例1：人口变化动态展示

const years = Array.from({length: 20}, (_, i) => 2004 + i);
const provinces = ['广东', '山东', '河南', '四川', '江苏'];

// 生成模拟人口数据
const populationData = years.map((year, index) => {
  return {
    series: provinces.map(province => ({
      name: province,
      type: 'line',
      smooth: true,
      areaStyle: { opacity: 0.2 },
      data: provinces.map(() => 5000 + Math.random() * 5000 + index * 200)
    }))
  };
});

option = {
  baseOption: {
    title: {
      text: '各省人口变化趋势',
      subtext: '2004-2023年',
      left: 'center'
    },
    
    tooltip: {
      trigger: 'axis'
    },
    
    legend: {
      data: provinces,
      top: 40
    },
    
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: provinces
    },
    
    yAxis: {
      type: 'value',
      name: '人口（万人）'
    }
  },
  
  timeline: {
    data: years.map(String),
    autoPlay: true,
    playInterval: 1500,
    loop: true,
    symbol: 'diamond',
    symbolSize: 10,
    lineStyle: {
      color: '#5470c6'
    },
    checkpointStyle: {
      color: '#ee6666',
      borderColor: '#fff',
      borderWidth: 2
    },
    label: {
      formatter: function(params) {
        return params.name + '年';
      }
    }
  },
  
  options: populationData
};

---

⚠️ 常见问题

问题1：时间轴不显示

解决：

// ❌ 错误：缺少options数组
option = {
  timeline: { data: [...] },
  series: [...] // 这样不会生效
}

// ✅ 正确：使用baseOption和options
option = {
  baseOption: { ... },
  timeline: { data: [...] },
  options: [...]
}

问题2：播放卡顿

解决：

timeline: {
  playInterval: 3000, // 增加间隔时间
  autoPlay: true
}

// 优化每帧渲染
series: [{
  type: 'bar',
  animationDuration: 500, // 缩短动画时长
  animationDurationUpdate: 300
}]

---

🎯 最佳实践

1. 响应式配置

// 根据屏幕调整时间轴高度
const isMobile = window.innerWidth < 768;

timeline: {
  height: isMobile ? 60 : 40,
  symbolSize: isMobile ? 12 : 8,
  label: {
    fontSize: isMobile ? 14 : 12
  }
}

2. 编程式控制

// 获取timeline组件
const timeline = chart.getModel().getComponent('timeline');

// 切换到指定帧
chart.dispatchAction({
  type: 'timelineChange',
  currentIndex: 5
});

// 播放/暂停
chart.dispatchAction({
  type: 'timelinePlayChange',
  play: true // 或 false
});

3. 自定义标签

timeline: {
  data: [
    { value: '2020', tooltip: '疫情爆发年' },
    { value: '2021', tooltip: '经济复苏年' },
    { value: '2022', tooltip: '稳步增长年' }
  ],
  label: {
    formatter: '{b}'
  }
}

---

📊 性能指标

帧数	内存占用	建议
<10帧	15MB	无限制
10-50帧	30MB	正常
>50帧	50MB+	考虑分页

---

🔗 相关链接

• dispatchAction控制
• 动画控制

---

💎 总结

时间轴核心价值：

• ✅ 动态展示数据变化
• ✅ 交互式播放控制
• ✅ 多帧数据对比
• ✅ 叙事性数据演示

适用场景：

• 历史数据回顾
• 发展趋势演示
• 年度报告展示
• 教学演示

掌握时间轴，让数据讲述时间故事！⏱️

时间轴动态展示

{
  "title": {
    "text": "历年数据对比",
    "left": "center"
  },
  "tooltip": {
    "trigger": "axis"
  },
  "baseOption": {
    "timeline": {
      "axisType": "category",
      "autoPlay": true,
      "playInterval": 3000,
      "data": [
        "2020",
        "2021",
        "2022",
        "2023",
        "2024"
      ]
    },
    "xAxis": {
      "type": "category",
      "data": [
        "Q1",
        "Q2",
        "Q3",
        "Q4"
      ]
    },
    "yAxis": {
      "type": "value"
    }
  },
  "options": [
    {
      "series": [
        {
          "type": "bar",
          "data": [
            100,
            120,
            145,
            160
          ]
        }
      ]
    },
    {
      "series": [
        {
          "type": "bar",
          "data": [
            110,
            135,
            160,
            180
          ]
        }
      ]
    },
    {
      "series": [
        {
          "type": "bar",
          "data": [
            125,
            150,
            175,
            200
          ]
        }
      ]
    },
    {
      "series": [
        {
          "type": "bar",
          "data": [
            140,
            165,
            190,
            220
          ]
        }
      ]
    },
    {
      "series": [
        {
          "type": "bar",
          "data": [
            155,
            180,
            210,
            245
          ]
        }
      ]
    }
  ]
}