首页 > 其他分享 >echartsX轴时间轴固定显示0-24小时

echartsX轴时间轴固定显示0-24小时

时间:2022-12-30 11:57:06浏览次数:47  
标签:24 00 格式化 format HH moment 时间轴 59 echartsX

  • 时间格式化使用moment.js,按需求添加,如不需要请手动格式化至相应格式

npm install moment --save

  • 获取当天起始时间

moment().startOf('day').format('YYYY-MM-DD HH:mm:ss') // 格式化为 2022-12-30 00:00:00 格式

  • 获取当天结束时间

moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') // 格式化为 2022-12-30 23:59:59 格式

option = {
  xAxis: {
    show: true,
    type: "time", // 这里使用时间轴模式
    axisLabel: {
      // 格式化x轴显示
      formatter: function(value, index) {
        // 如果时间是 23:59:59 , 格式化为 24:00
        if (value === new Date(moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')).getTime()) {
          return moment(value).format("24:00");
        } else {
          // 其他的时间返回格式化 00:00
          return moment(value).format("HH:mm");
        }
      }
    },
    interval: 3600 * 2 * 1000, // 设置x轴分隔间隔,我使用的是毫秒时间戳间隔两小时,如使用秒时间戳不需要x1000
    min: function (value) {
      // 设置x轴最小值,为当天00:00:00时时间戳
      var time = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');
      return new Date(time).getTime();
    },
    min: function (value) {
      // 设置x轴最大值,为当天23:59:59时时间戳
      var time = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');
      return new Date(time).getTime();
    }
  },
  series: [{
     name: "测试用例",
     type: "line",
     data: [[1672329600000, 1], [1672333200000, 2], [1672336800000, 3], [1672340400000, 4], [1672344000000, 5], [1672347600000, 6], [1672351200000, 7]] // 测试用例数据,格式为[时间戳, 数据]
  }]
}

标签:24,00,格式化,format,HH,moment,时间轴,59,echartsX
From: https://www.cnblogs.com/lzb1234/p/17014525.html

相关文章