echarts X轴刻度显示时间，第一个刻度显示日期不是时分

1、开发需求

在项目开发中，我们会遇到这样一个问题，即x轴刻度显示时间，且第一个刻度显示日期而不是时间，见下图：

2、代码

xAxis: [
 {
    type: 'time',
    min: new Date(beginDate).getTime() - 8 * 60 * 60 * 1000,
    max: new Date(endDate).getTime() + 16 * 60 * 60 * 1000,
    show: true,
    minInterval: 60 * 1 * 1000,   //这里是时间间隔
    axisLabel: {
      show: true,
      showMaxLabel: true,
      showMinLabel: true,
      formatter: function (value, index) {
        var date = new Date(value)
        if (date.getHours() === 0 && date.getMinutes() === 0) {
          // return [date.getMonth() + 1, date.getDate()].join('/')
          return date.getDate()
        } else {
          const hours = date.getHours().toString().padStart(2, '0')
          const minutes = date.getMinutes().toString().padStart(2, '0')
          return `${hours}:${minutes}`
        }
      }
    }
  },
  {
    gridIndex: 1,
    show: false,
    type: 'time',
    min: new Date(beginDate).getTime() - 8 * 60 * 60 * 1000,
    max: new Date(endDate).getTime() + 16 * 60 * 60 * 1000,
    minInterval: 60 * 1 * 1000,   //这里是时间间隔
    axisLabel: {
      show: true,
      showMaxLabel: true,
      showMinLabel: true,
      formatter: function (value, index) {
        var date = new Date(value)
        if (date.getHours() === 0 && date.getMinutes() === 0) {
          // return [date.getMonth() + 1, date.getDate()].join('/')
          return date.getDate()
        } else {
          const hours = date.getHours().toString().padStart(2, '0')
          const minutes = date.getMinutes().toString().padStart(2, '0')
          return `${hours}:${minutes}`
        }
      }
    },
  }
],

3、注意

1. beginDate为开始时间、endDate为结束时间，-8 * 60 * 60 * 1000为去除8小时市区问题；
2. minInterval: 60 * 1 * 1000 最小时间间隔为1min；
3. 由于type格式为time，series中data数据格式需为：[time, value]形式；

[
  ['2022-8-14 8:00:00', 1],
  ['2022-8-14 8:10:00', 3], 
  ['2022-8-14 8:20:00', 5], 
]

4. 如只需显示上面一个x轴坐标，将gridIndex: 1所在的对象设置show: false即可。