Echarts 如何设置x轴为时间轴，y轴为该时间段内的相关数据？

一只普通的程序员

于 2024-07-18 16:19:24 发布

阅读量808

点赞数 8

文章标签：前端 vue.js javascript echarts html5 css node.js

本文链接：https://blog.csdn.net/weixin_58583205/article/details/140524923

版权

效果图

1.echarts官网新增一个普通的示例，放在vue组件中


  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]

2.将X轴的type改为：'time',Y轴不变。

xAxis: {
     type: 'time',
     min: startTime,
     max: endTime,
}

3.并且根据项目需要可以设置开始时间，和结束时间。我这边开始时间为当天的0点，结束时间为当前时间的整点。

var date = new Date()
const startTime = new Date().setHours(0, 0, 0)
const endTime = date.setHours(date.getHours(), 0, 0, 0);

4.如果X轴时间格式不对，需要处理成自己想要的格式，我这边需要的时+分，处理方式可以参考如下：

 // 时间戳转字符串YYYY/MM/DD HH:mm:ss
      function backTime(value) {
        let date = new Date(value);
        // 获取年份、月份和日期  
        let year = date.getFullYear();
        let month = date.getMonth() + 1; // 月份从 0 开始，需要加 1  
        let day = date.getDate();

        let hours = date.getHours();
        let minutes = date.getMinutes();
        let seconds = date.getSeconds();

        // 格式化月份和日期为两位数（不足两位时补零）  
        month = month < 10 ? '0' + month : month;
        day = day < 10 ? '0' + day : day;
        hours = hours < 10 ? '0' + hours : hours;
        minutes = minutes < 10 ? '0' + minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;

        // 返回格式化后的字符串  
        return hours + ':' + minutes;
      }

5.最重要的是处理series，将后端返回的data数据处理为以下格式（第一个代表时间，第二个代表当前时间的值）：

var data = [
      ['2024-7-18 8:00:00', 1],
      ['2024-7-18 8:10:00', 3],
      ['2024-7-18 8:20:00', 5],
   ]

6.现在的全部基础代码为（其他样式可以自己更改）：

xAxis: {
    type: 'time',
    min: startTime,
    max: endTime,
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: "下行",
      data: data,
      type: 'line'
    }
  ]