echarts中Y轴设置为24小时制解决方案

1、获取到数据源格式为按照日期区分的数组

2、进行数据转换为时间戳格式，因为yAxis设置type为time时，需要时间戳格式数据，格式转换重点在于Y轴最小值最大值区间范围以及将其他日期转换成某个特定日期，下面代码里面的BASE_TIME就是随意设置了一个基准日期，用于数据转换。 如：const BASE_TIME = '2020-20-20';

3、设置echarts的option

4、数据转换：

for(let item of resp.data){

   this.legend.push(moment(item.recordDate).format('MM-DD'));
   this.onTime.push(item.goWorkTime ? `${BASE_TIME} ${moment(item.goWorkTime).format('YYYY-MM-DD HH:mm').substr(11, 10)}` : null);
   this.offTime.push(item.offWorkTime ? `${BASE_TIME} ${moment(item.offWorkTime).format('YYYY-MM-DD HH:mm').substr(11, 10)}` : null);
   this.travel.push(item.ccNum !== '0' ? `${BASE_TIME} ${moment('2020-02-02 12:00').format('YYYY-MM-DD HH:mm').substr(11, 10)}` : null);
}

option设置：

{

 grid: {
   left: '3%',
   right: '8%',
   bottom: '10%',
   height: 150,
   containLabel: true
 },
 color:['#1685ff','#f22222', '#09cb4e', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
 xAxis: {
   type: 'category',
   axisLabel: {
     interval: 0,
     fontSize: 9
   },
   axisTick: {
     alignWithLabel: true
   },
   axisLine: {
     onZero: false,
     lineStyle: {
       color: '#aaa'
     }
   },
   data: me.legend
 },
 yAxis: {
   type: 'time',
   splitLine: {
     lineStyle: {
       type: 'dashed',
       color: '#DDD'
     }
   },
   axisLine: {
     show: false,
     lineStyle: {
       color: '#333'
     }
   },
   nameTextStyle: {
     color: '#303133',
     fontSize: 10,
   },
   splitArea: {
     show: false
   },
   min: `${BASE_TIME} 0:00:00`,
   max: `${BASE_TIME} 23:59:59`,
   splitNumber: 5,
   axisLabel:{
     formatter: function (value) {
       return (moment(value).format('YYYY-MM-DD HH:mm')).substr(11,20)
     }
   }
 },
 series: [
   {
     type: 'scatter',
     symbolSize: '6',
     data: me.offTime,
     markLine:{
       symbol: 'none',
       data: [
         {
           name: '下班',
           yAxis: `${BASE_TIME} 17:30`
         },
       ],
       label:{
         formatter: '{b}',
       }
     }
   },
   {
     type: 'scatter',
     symbolSize: '6',
     data: me.onTime,
     markLine:{
       symbol: 'none',
       data: [
         {
           name: '上班',
           yAxis: `${BASE_TIME} 08:30`
         },
       ],
       label:{
         formatter: '{b}',
       }
     }
   }
 ]
}

5、最终效果显示，个人想法，有别的方式可多多交流