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

user_tYDk6iCh
  • 63

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

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

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

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

回复
阅读 632
2 个回答
✓ 已被采纳

这些东西无非就是个仔细看文档的过程
demo也给你写好了
image.png
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
}

image.png

引入moment.js一行代码搞定

image.png
或者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}'
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏