echarts时间轴应用

越来越好。

已于 2022-10-13 11:40:07 修改

阅读量2.6w

点赞数 21

分类专栏： echarts可视化前端文章标签： echarts 前端 javascript

于 2021-01-04 10:48:04 首次发布

本文链接：https://blog.csdn.net/qq_38880700/article/details/112169922

版权

前端同时被 2 个专栏收录

133 篇文章 3 订阅

订阅专栏

echarts可视化

10 篇文章 0 订阅

订阅专栏

echarts时间轴应用的两种方法

第一种，x轴设置type为value，然后还需要把x轴显示的时间戳通过格式化函数(formatter)转换为日期类型，series中的data转换为时间戳。数据类型一般较为常用的是二位数组的方式如: [ ['时间戳','y轴值'], ['时间戳','y轴值'] ] ；
第二种，x轴设置type为time(不需要转换X轴显示的文字) 正常情况下还应该定义一个x轴的起始范围，数据格式如： max: "2021-01-04 08:24:38" ， min: "2021-01-04 08:14:36"，然后series中的 data也应该设置为二位数组类型如：[ ["2021-01-04 08:14:36", 60],["2021-01-04 08:14:46", 56] ]。

第一种实现代码

option = {
  xAxis: {
    type: 'value',
    min:1651370400,
    max:1651377600,
    axisLabel:{
      formatter:function(e){
        return timestampToTime(e);
      },
      rotate:30
    }
  },
  yAxis: {
    type: 'value',
    min:0,
    max:80
  },
  series: [
    {
      data: [[1651372200,20],[1651373400,40],[1651377000,35]],
      type: 'line',
    }
  ]
};

  function timestampToTime(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = (date.getDate() < 10 ? '0'+ date.getDate() : date.getDate()) + ' ';
        var h = (date.getHours() < 10 ? '0'+ date.getHours() : date.getHours()) + ':';
        var m = (date.getMinutes() < 10 ? '0'+ date.getMinutes() : date.getMinutes()) + ':';
        var s = (date.getSeconds() < 10 ? '0'+ date.getSeconds() : date.getSeconds());
        return M+D+h+m+s;
    }

效果

第二种实现代码

option = {
  xAxis: {
    type: 'time',
    min: "2021-01-04 08:14:36",
    max: "2021-01-04 08:24:38",
  },
  yAxis: {
    type: 'value',
},
  series: [
    {
      data: [ ["2021-01-04 08:14:36", 60],["2021-01-04 08:14:46", 56],["2021-01-04 08:20:46", 23],["2021-01-04 08:22:46", 40] ],
      type: 'line'
    }
  ]
};

效果