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

  • 时间格式化使用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时时间戳
      // 若想要将time改为x轴数据最小值,则var time = moment(value.min).format('YYYY-MM-DD HH:mm:ss');
      var time = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');
      return new Date(time).getTime();
    },
    max: function (value) {
      // 设置x轴最大值,为当天23:59:59时时间戳
      // 若想要将time改为x轴数据最大值,则var time = moment(value.max).format('YYYY-MM-DD HH:mm:ss');
      var time = moment().endOf('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]] // 测试用例数据,格式为[时间戳, 数据]
  }]
}
posted @ 2022-12-30 11:45  仲夏今天也在写前端  阅读(2400)  评论(0编辑  收藏  举报