echart折線圖時間軸

看了一些原有的時間軸設定,有些不太符合自己的需求,根據自己的需求對官方的折線時間軸進行了一些改變;

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};

var data = [];
var time = []
var starTime = 30 * 60 * 1000  // 這個是當前時間向前取值,我在這裏設置的是半個小時
var times = new Date((+new Date() - starTime))   //X軸開始的時間,可以自行設置
function initDate(value){   //時間格式化
    if(value < 9){
        return '0' + value
    }else{
        return value
    }
}
for(var i = 0 ; i < 7 ; i++){  //X軸上顯示多少個刻度
    time.push(initDate(times.getMonth() + 1) + '/' + initDate(times.getDate()) + ' ' + initDate(times.getHours()) + ':' + initDate((times.getMinutes() + (i * 5))));
    data.push(Math.round(Math.random()  * 30 + 10))
}
option = {
    title: {
        text: '動態數據 + 時間座標軸'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            return params.name + ':' + params.value;
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'category',
        splitLine: {
            show: false
        },
        data:time
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        }
    },
    series: [{
        name: '模擬數據',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    }]
};
// 設置定時器
setInterval(function () {
    var now = new Date()
    //這裏就是先刪除第一個,然後把當前時間放上去,可以根據需求進行改變
    time.shift()
    time.push(initDate(now.getMonth() + 1) + '/' + initDate(now.getDate()) + ' ' + initDate(now.getHours()) + ':' + initDate( now.getMinutes() )  )
    data.shift()
    data.push(Math.round(Math.random()  * 30 + 10))
    //最後就是重新繪製echarts
    myChart.setOption({
        series:{
            data:data,
        },
        xAxis:{data:time}

    })
    
}, 3000);
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章