如何在Echarts中将x轴设置为时间类型并格式化为{hh:mm}？

Question

我希望将x轴设置为时间类型，并格式化为{hh:mm}，例如17:45。

在这个演示中，配置有效：

xAxis: {
    type: "time",
},

value: [
    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
    Math.round(value)
]

但这种方法行不通，这里有Echarts图库中的我的演示:

xAxis: {
    type: "time",
},

value: [
    [now.getHours(), now.getMinutes()].join(":"),
    Math.round(value)
]

我尝试了 type: "value"，但仍然不起作用。

- Tina Chen

Answer 1

如上所述，您需要使用xAxis.axisLabel.formatter。

这是您的示例。

// Horizontal axis
xAxis: [{
    type: 'time', 
    axisLabel: {
      formatter: (function(value){
        let label;
        if (value.getMinutes() < 10){ 
          label = value.getHours() + ":0" +value.getMinutes();
        }
        else {
          label = value.getHours() + ":" +value.getMinutes();
        }
        return label;
      })
    }
}],

- Conor

Answer 2

使用 xAxis.axisLabel.formatter。可以是一个格式化字符串或一个函数。

参考链接： https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter

- Mijago

Answer 3

我已经让你的演示工作了。 我已经将value更改为以下内容：

value: [
    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/') + 'T' +
    [now.getHours(), now.getMinutes()].join(':'),
    Math.round(value)
]

请看这张截图：

- Jin Lin

Answer 4

对于任何寻找答案的人，接受答案中提供的链接是正确的，但已经 404 了。

这是当前可用的链接：https://echarts.apache.org/zh/option.html#xAxis.axisLabel.formatter

- Lumen27