关于echart的x轴固定为0-24小时显示一天内的数据

需求:

　　echart折线图横坐标x轴固定显示为0-1-2-3-...-23-24一共24小时的数据.

　　根据需求,我在网上以及echart官网,发现x轴无论type是类目轴还是时间,都是自动处理的,尤其是数据量过多的情况,x轴时间无法准确控制

实现效果:

　　

代码解决思路:

　　分析造成x轴时间无法固定的原因是数据里的时间具有不确定性,于是我在原数据的基础上增加了一条时间分别是00:00:00 - 01:00:00 -23:00:00, 值为空的数据(该条折线不显示,仅用于撑开x轴)

 　　var mytime24 = new Array()
     var i = 0;
     var now_data = new Date()
     var year_now = now_data.getFullYear(),month_now = now_data.getMonth() + 1, day_now = now_data.getDate()
     var time_pre = `${year_now}/${month_now}/${day_now} 00:00:00`
         var ttt = (new Date(time_pre)).getTime()
         for (; i < 25; i++) {
         mytime24.push([ttt, '']);//传入value的值为空则该值点不会显示在图表中
         ttt = ttt + 3600000;
     }

　　将数据传入series:

 str.push({
     name: '',
     type: 'line',
     data: mytime24,//空数据
 },{
     name: '',
     type: 'line',
     data: value,//原数据
 })

　　配置myChart.setOption,在xAxis设置24等分,并在formatter中格式化时间,只显示小时

myChart.setOption({
                xAxis: {
                    type: 'time',
                    splitNumber: 24,
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ccc',
                        }
                    },
                    axisLabel: {// 格式化数据只显示时间的小时
                        formatter: function (value, index) {
                            var data = new Date(value)
                            var hours = data.getHours()
                            return hours
                        }
                    },
                    data: []
                },
                yAxis: {
                    min: minY,
                    max: maxY,
                },
                series: str
            });

结束!感谢

(