timeLine 的使用

最新推荐文章于 2024-05-13 15:37:52 发布

墨语轩

最新推荐文章于 2024-05-13 15:37:52 发布

阅读量897

点赞数

分类专栏： echarts相关文章标签： echarts timeLine

本文链接：https://blog.csdn.net/MFWSCQ/article/details/120278207

版权

echarts相关专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了如何在ECharts的时间轴组件中，确保动画按时间顺序播放而非原始数据顺序。通过实例演示了如何对时间数据进行排序，并给出了配置选项和关键步骤，帮助开发者解决在Timeline上时间轴动画播放问题。

摘要由CSDN通过智能技术生成

timeLine 的 type 可以是 value，time，category 当我们使用 time 时，data 里面的时刻数据会按照时间先后顺序自动从小到大排序到时间轴上，比如，你的数据是：

[
'2021-08-13 08:00:00',
'2021-08-13 09:00:00',
'2021-08-13 10:00:00',
'2021-08-13 11:00:00',
'2021-08-13 12:00:00',
'2021-08-13 06:00:00'
]

那么时间轴上会将最后一个数据 06:00:00 排在最前面。

这样做只是显示时间轴是没有问题的，但是如果你点击播放按钮时，他并不会按照时间先后顺序播放动画，而是按照你的 data 数据里面的顺序播放动画，所以需要你对时间数据进行排序之后再放到 data 中

配置项：

option = {
  baseOption: {
    timeline: {
      top: 200,
      left: 100,
      right: 100,
      axisType: 'time',
      // realtime: false,
      // loop: false,
      autoPlay: true,
      // currentIndex: 2,
      playInterval: 1000,
      // controlStyle: {
      //     position: 'left'
      // },
      data: [
        '2021-08-17 00:00', '2021-08-17 02:00',
        '2021-08-17 04:00', '2021-08-17 06:00',
        '2021-08-17 08:00', '2021-08-17 10:00',
        '2021-08-17 12:00', '2021-08-17 14:00',
      ],
      label: {
        position: 'bottom',
        textStyle: {
          color: '#dfdfdf'
        },
        formatter : function(time) {
          time = new Date(time)
          let str = String(time.getMonth() + 1).padStart(2, '0') + '-'
          + String(time.getDate()).padStart(2, '0') + ' '
          + String(time.getHours()).padStart(2, '0') + ':00'
          return str
        }
      },
      symbol: 'diamond',
      symbolSize: 14,
      itemStyle: {
        color: '#c00'
      },
      checkpointStyle: {
        color: '#c00',
        symbol: 'diamond',
        symbolSize: 16
      },
      lineStyle: {
        color: '#ccc',
        width: 2,
        type: 'dashed'
      }
    },
    tooltip: {},
    calculable : true,
  },
};

// 计算时间轴的数据，传入初始时间,和时刻表
computedTimeLine (startDate, dataTime) {
  startDate = new Date(startDate).getTime()
  let timeLineArr = []
  // 生成未来 24 小时的时间轴数据
  for (let i = 0; i < 24; i++) {
    let time = new Date(startDate + 3600*1000*i)
    let timeItem = time.getFullYear() + '-' 
      + String(time.getMonth() + 1).padStart(2, '0')
      + '-' + String(time.getDate()).padStart(2, '0') + ' '
      + String(time.getHourse()).padStart(2, '0') + ':00'
    timeLineArr.push(timeItem)
  }
  // 详细时刻表也放到二十四小时当中
  dataTime = dataTime.map(item => {
    return {
      value: item,
      symbol: 'arrow',
      symbolSize: 14,
      itemStyle: {
        normal: {
          color: '#c00'
        }
      }
    }
  })
  timeLineArr.push(...dataTime)
  return timeLineArr
}

// 给时间排序
sortTime (timeLineArr) {
  timeLineArr.sort((a, b) => {
    if (a.value && b.value) {
      return a.value.localeCompare(b.value)
    } else if (a.value && !b.value) {
      return a.value.localeCompare(b)
    } else if (!a.value && b.value) {
      return a.localeCompare(b.value)
    } else {
      return a.localeCompare(b)
    }
  })
}