Echarts 展示兩條動態數據曲線

利用Echarts 展示兩條動態數據曲線，每1秒刷新一下數據，在echart官網例子基礎上修改，修改了模擬數據的生成方式、生成數量，曲線數量，最總效果圖如下：

 

 

 詳細程式碼如下：

遇到的主要問題點，

1，在生成模擬數據時，數據源格式很重要，格式不正確，無法正常顯示。

new Date(parseInt(sttimestamp+i*1000)).toLocaleString('chinese',{hour12:false});

上述語句 toLocaleString()，顯示的結果  2021/8/21 下午4:07:40，若要顯示為24小時制，需要添加參數 ‘chinese’,{hour12:false}。

2，數據橫軸顯示格式，默認會把毫秒顯示出來，且不統一：

 

 

 在橫軸的樣式里增加格式限制，即可按要求顯示：

 axisLabel:{
            formatter:'{HH}:{mm}:{ss}'
        //顯示24小時制，兩位分鐘，兩位秒
        }

完整程式碼如下：

var data = [];
var data2= [];

var curtimestamp = Date.parse(new Date());
var sttimestamp = curtimestamp - 100*1000 ;
var temptime;
var tm = Date.now()
// 生成初始數據100條
for (var i = 0; i < 100; i++) {
    temptime = new Date(parseInt(sttimestamp+i*1000)).toLocaleString('chinese',{hour12:false});
    data.push({name:temptime,value:[temptime,Math.random()*10+150]});
    data2.push({name:temptime,value:[temptime,Math.random()*10+100]});
}
// 顯示設置
option = {
    title: {
        text: '實時數據展示',
        left:'5%'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            var date = new Date(params.name);
            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        },
        minInterval: 5,
        axisLabel:{
            formatter:'{HH}:{mm}:{ss}'
        }
    },
    yAxis: {
        axisLine:{
            show:true
        },
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        }
    },
    series: [{
        name: 'LineA',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    },{
        name: 'LineB',
        type: 'line',
        color:'#2f4f4f',
        showSymbol: false,
        hoverAnimation: false,
        data: data2
    }]
};

setInterval(function () {

   // for (var i = 0; i < 5; i++) {
   curtimestamp = Date.parse(new Date());
   temptime = new Date(parseInt(curtimestamp)).toLocaleString('chinese',{hour12:false});
        data.shift();
        data.push({name:temptime,value:[temptime,Math.random()*10+150]});
        
        data2.shift();
        data2.push({name:temptime,value:[temptime,Math.random()*10+120]});
   // }

    myChart.setOption({
        series: [{
            data: data
        },{
            data: data2
        }
        ]
    });
}, 1000);

 

Tags:

VirMach 便宜 VPS

QNews

QNews