Echarts 展示两条动态数据曲线

2023-11-30 13:15:46

利用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，数据横轴显示格式，默认会把毫秒显示出来，且不统一：

Echarts 展示两条动态数据曲线

在横轴的样式里增加格式限制，即可按要求显示：

 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);

Echarts 展示两条动态数据曲线

码农公寓

相关文章