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、最终效果显示，个人想法，有别的方式可多多交流
