关于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轴)

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

　　将数据传入series:

1 str.push({
2     name: '',
3     type: 'line', 
4     data: mytime24,//空数据
5 },{
6     name: '',
7     type: 'line', 
8     data: value,//原数据
9 })

　　配置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
            });

 

结束!感谢

 

补充:

以上代码出现的横坐标因为是从时间转换过来的,所以没有24小时,可修改为

axisLabel: {// 格式化数据只显示时间的小时
		formatter: function (value, index) {
			if (temp_data == 23) {
								temp_data = 24
								return 24
			} else {
								var data = new Date(value)
								var hours = data.getHours()
								temp_data = hours
								return hours
			}
		}
},