Echarts X轴类型为time时，X轴标签的细化（年月日时分秒）

先贴一个原来的标签效果

 原来这个标签可能会感觉内容有点少，一眼看去不能很清晰的知道这个标签的含义。后面发现可以对标签重新编辑，参考echarts官方示例Documentation - Apache ECharts

 首先，xAxis 的 type 类型要先确保是 time，注意不要写 data，时间类型的 data 是要和 yAxis 值组成数组元素存在 series 的 data 中的

 然后在 xAxis 下添加 axisLabel 对象

axisLabel: {
  formatter: (value, index) => {
    let dateTime = this.$utils.getFormatTime(value)
    dateTime = dateTime.substring(0, dateTime.length - 3)
    return dateTime.replace(' ', '\n')
  }
}

 这里 formatter 函数的形参 value 接受的是各标签的时间戳，需要先对时间戳进行转换，有需要的可以去查下相应的方法，我这边贴下我的方法

/**
 * 根据传入的时间戳获取格式化时间
 * @param {*} stamp 时间戳 可通过 new Date().getTime() 获取
 * @returns 
 */
export const getFormatTime = (stamp) => {
  let year = new Date(stamp).getFullYear()
  let month = new Date(stamp).getMonth() + 1
  month = month < 10 ? '0' + month : month
  let date = new Date(stamp).getDate()
  date = date < 10 ? '0' + date : date
  return year + '-' + month + '-' + date + ' ' + new Date(stamp).toLocaleTimeString('chinese',{hour12:false})
}

返回的格式为：年-月-日 时:分:秒

接受并转换时间戳后，就获得了完整的时间格式，后面可以根据需要对内容进行修改，或者不修改直接 return

我这里是吧秒给去了，并将时和分做了一个换行

let dateTime = this.$utils.getFormatTime(value)
dateTime = dateTime.substring(0, dateTime.length - 3)
return dateTime.replace(' ', '\n')

 xAxis完整代码如下：

xAxis: {
  type: 'time',
  boundaryGap: false,
  axisPointer: {
    type: 'shadow'
  },
  axisLabel: {
    formatter: (value, index) => {
      let dateTime = this.$utils.getFormatTime(value)
      dateTime = dateTime.substring(0, dateTime.length - 3)
      return dateTime.replace(' ', '\n')
    }
  }
},

效果图如下：