echarts中如何设置x轴label格式？

Question

复现链接如下
折线图问题复现

我的x轴数据是category类型的，是以YYYY-MM-DD HH:mm格式显示的日期

需求：
1、我要显示24小时以内的数据，但是日期格式太长，因此我想要在坐标轴显示成HH:mm形式，但是tooltip中依然能以YYYY-MM-DD HH:mm的形式显示

2、x轴label之间的间隔隔一个小时，但是现在给我隔了6个小时，如果设置interval:1,
那么label会重叠

Answer 1

这些东西无非就是个仔细看文档的过程
demo也给你写好了

1.label显示HH:mm：=>xAxis.axisLabel. formatter

axisLabel: {
    formatter: function (value: any) {
      return value.slice(11);
    }
}

2.tooltip中依然能以YYYY-MM-DD HH:mm的形式显示=>tooltip.formatter

tooltip: {
    trigger: "axis",
    formatter: function (params: any) {
      let str = "<span>" + params[0].name + "</span><br/>";
      for (let i = 0; i < params.length; i++) {
        str +=
          params[i].marker +
          params[i].seriesName +
          '：<span style="float:right;font-weight:600">' +
          params[i].value +
          "</span><br/>";
      }
      return str;
    }
}

3.x轴label重叠，旋转下就好了=>xAxis.axisLabel.rotate

axisLabel: {
    interval: 0,
    rotate: 25
}

Answer 2

引入moment.js一行代码搞定

或者echart本身的字符串模版

year: '{yyyy}',
month: '{MMM}',
day: '{d}',
hour: '{HH}:{mm}',
minute: '{HH}:{mm}',
second: '{HH}:{mm}:{ss}',
millisecond: '{hh}:{mm}:{ss} {SSS}',
none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'