關於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
            });

 

結束!感謝

(