vue对echart图表数据按每分钟进行处理，没有数据则补0

对每分钟的数据进行处理，没有数据则补0

一、循环嵌套寻址，存储相同时间戳下的数据，其余为0

1. 存储后端返回的数据

let resource = {
    timeStamp:[],
    usedCpuSys: [],
    usedCpuUser: [],
	},
	nowTimeStamp = res.timeStamp,
	arrayTimeStamp = this.$funs.storeTimeStamp(nowTimeStamp,this.queryParam.dateFrom,this.queryParam.dateTo);
if(res.data){
    res.data.forEach((item) => {
        resource.timeStamp.push(item.createTimestamp)
        resource.usedCpuSys.push(item.usedCpuSys)
        resource.usedCpuUser.push(item.usedCpuUser)
    })
}else {
    for (let i = 0; i < arrayTimeStamp.length;i++) {
        resource.timeStamp.push(arrayTimeStamp[i])
        resource.usedCpuSys.push(0)
        resource.usedCpuUser.push(0)
    }
}

//时间戳存储
storeTimeStamp(nowTimeStamp,timeFrom,timeTo){
	//nowTimeStamp数据返回时间的时间戳,timeFrom图表数据需要的起始时间,timeTo图表数据需要的终点时间
    let arrayTimeStamp = [];
    let nowTime = parseInt(nowTimeStamp / 1000),
        fromTime = parseInt(Date.parse(timeFrom) / 1000),
        toTime = parseInt(Date.parse(timeTo) / 1000);
    if(toTime < nowTime){
        for (let i = fromTime; i < toTime; i = i + 60) {
            arrayTimeStamp.push(i*1000)
        }
    }else {
        for (let i = fromTime; i < nowTime-60; i = i + 60) {
            arrayTimeStamp.push(i*1000)
        }
    }
    return arrayTimeStamp
},

2.目标时间段与后端返回的带数据时间段进行循环对比

for (let i = 0; i < this.arrayTimeStamp.length;i++){
	resource.timeStamp.push(this.$funs.renderTimeBefore(this.arrayTimeStamp[i]*1000))
	resource.usedCpuSys.push(0)
	resource.usedCpuUser.push(0)
	source.forEach((item) => {
	    let resTime = this.$funs.renderTimeBefore(item.createTimestamp)
	    if(this.$funs.renderTimeBefore(this.arrayTimeStamp[i]*1000) === resTime){
	        resource.usedCpuSys[i] = (item.usedCpuSys)
	        resource.usedCpuUser[i] = (item.usedCpuUser)
	    }
	})
}

二、单次循环对比，将目标时间段看成数轴，后端返回的数据存入数轴上相应位置,效率较上一种快了十倍，该方法局限性更大一些，要求返回的数据时间戳的时间间隔至少有60s，每一个60s以内的数据最多两条
1.已封装成相应的函数

//图表数据按分钟补0
insertData(arrayTimeStamp,resData,resTimeStamp){
    //arrayTimeStamp总的数据段 resData返回时间段的数据值 resTimeStamp返回的时间段
    //数据格式都为数组[]
    let j=0,
        resource= {
        timeStamp:[],
        data: []
    };
    for (let i = 0; i < arrayTimeStamp.length;i++) {
        //时间戳都转为毫秒级
        if(resData[j] && this.renderTimeBefore(arrayTimeStamp[i]) === this.renderTimeBefore(resTimeStamp[j])){
            resource.timeStamp[i] = this.renderTimeBefore(arrayTimeStamp[i])
            resource.data[i] = resData[j]
            //过滤相同一分钟内的数据
            if(this.renderTimeBefore(resTimeStamp[j]) === this.renderTimeBefore(resTimeStamp[j+1])){
                j=j+2
            }else {
                j++
            }
        }else {
            resource.timeStamp[i] = this.renderTimeBefore(arrayTimeStamp[i])
            resource.data[i] = 0
        }
    }
    return resource
}

2.调用

//例如
usedCpuSys= this.$funs.insertData(myTimeStamp,res.data.usedCpuSys,res.data.timeStamp)

三、绘制图表