vue中实现当前时间echarts图表时间轴动态的数据(实例代码)

下面为您详细讲解vue中实现当前时间echarts图表时间轴动态的数据的完整攻略：

1. 确认需求

首先我们需要明确需求：在echarts的时间轴中，通过动态的数据来展示当前时间的图表数据。因此我们需要掌握以下的知识点：

• Echarts的时间轴相关配置
• Vue中通过生命周期函数获取当前时间，并将时间作为图表数据的X轴

2. 确定技术栈

在实现这个需求时，我们需要用到两个重要的技术栈：Vue.js和Echarts。因此需要确保开发环境中有Vue和Echarts的依赖。我们可以通过CDN引入它们，也可以在项目中使用npm安装它们。

3. 初始化Echarts图表

在Vue的Mounted生命周期函数中，我们初始化Echarts图表，并且设置时间轴等必要的配置。

mounted () {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('chart'))
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '示例'
    },
    tooltip: {},
    legend: {
      data: ['人数']
    },
    xAxis: {
      type: 'time',
      splitLine: {
        show: false
      }
    },
    yAxis: {},
    series: [{
      name: '人数',
      type: 'line',
      data: []
    }]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
  this.myChart = myChart
}

4. 更新图表数据

在Vue的Created生命周期函数中，我们通过setInterval函数定时刷新图表数据。通过Echarts提供的addData()函数，我们可以动态的增加数据。注意，每次更新时需要清空之前的数据。

created () {
  // 获取当前时间，并将时间格式化为指定格式
  function getTime () {
    var now = new Date()
    var year = now.getFullYear()
    var month = now.getMonth() + 1
    var date = now.getDate()
    var hour = now.getHours()
    var minute = now.getMinutes()
    var second = now.getSeconds()
    return [year, month, date].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
  }
  // 格式化时间
  function formatNumber (n) {
    n = n.toString()
    return n[1] ? n : '0' + n
  }
  // 定义初始值
  var baseValue = Math.random() * 50
  var time = getTime()
  var data = []
  data.push({
    value: [
      time,
      baseValue
    ]
  })

  // 更新图表数据
  var self = this
  setInterval(function () {
    // 得到当前时间
    time = getTime()
    // 随机生成一个数据
    var randomNum = Math.random() * 10
    if (data.length > 10) {
      data.shift()
    }
    data.push({
      value: [
        time,
        baseValue + randomNum
      ]
    })
    // 更新echarts数据
    self.myChart.setOption({
      series: [{ data: data }]
    })
  }, 1000)
}

示例说明

上面这个示例演示了如何通过Vue和Echarts实现当前时间动态展示图表数据。在代码中我们通过获取当前时间并每秒更新一次图表。你也可以根据自己的需求来改变更新的时间间隔。

下面提供另一个示例：如果你想展示每个月每天的访问量，而不是每秒更新一次，你可以在获取时间时只保留月日，不保留小时分钟秒数。在更新数据时，增加一个变量或参数可以表示今天已经更新了多少次，每当这个变量或参数超过1天时，你可以清空数据并且重新计数。在Vue的Created生命周期函数中改变更新的时间间隔，将1000改成一天的时间即可。

created () {
  var self = this
  // 获取当前时间，并将时间格式化为指定格式
  function getTime () {
    var now = new Date()
    var year = now.getFullYear()
    var month = now.getMonth() + 1
    var date = now.getDate()
    return [year, month].map(formatNumber).join('/') + ' ' + [date].map(formatNumber).join('')
  }
  // 格式化时间
  function formatNumber (n) {
    n = n.toString()
    return n[1] ? n : '0' + n
  }
  // 定义初始值
  var baseValue = Math.random() * 50
  var time = getTime()
  var data = []
  data.push({
    value: [
      time,
      baseValue
    ]
  })
  var count = 0
  var timer = setInterval(function () {
    // 得到当前时间
    var curTime = getTime()
    // 随机生成一个数据
    var randomNum = Math.random() * 10
    // 若时间不同，清空数组并重新计数
    if (curTime !== time) {
      data = []
      count = 0
    }
    count++
    if (count > 1440) {
      data = []
      count = 1
    }
    if (data.length > 1440) {
      data.shift()
    }
    data.push({
      value: [
        curTime,
        baseValue + randomNum
      ]
    })
    // 更新echarts数据
    self.myChart.setOption({
      series: [{ data: data }]
    })
    time = curTime
  }, 60000) // 每分钟更新一次
}

以上，就是在Vue中实现当前时间Echarts图表时间轴动态数据的完整攻略，希望对您有所帮助。