在php对接echarts生成24小时数据时,发现某些时段在数据库中是不存在的,这样就导致前端Echarts的X轴会出现时间段的跳跃。
如后台生成的数据JSON如下:
var arr = [ { "dataKey": "00", "totalTrans": "4", "totalPays": "301.70" }, { "dataKey": "01", "totalTrans": "1", "totalPays": "39.90" }, { "dataKey": "03", "totalTrans": "2", "totalPays": "35.80" }, { "dataKey": "05", "totalTrans": "3", "totalPays": "80.80" }, { "dataKey": "06", "totalTrans": "9", "totalPays": "423.90" }, { "dataKey": "07", "totalTrans": "38", "totalPays": "1925.69" }, { "dataKey": "08", "totalTrans": "91", "totalPays": "4324.88" }, { "dataKey": "09", "totalTrans": "119", "totalPays": "6423.51" }, { "dataKey": "10", "totalTrans": "128", "totalPays": "9273.93" }, { "dataKey": "11", "totalTrans": "123", "totalPays": "6563.52" }, { "dataKey": "12", "totalTrans": "81", "totalPays": "4116.21" }, { "dataKey": "13", "totalTrans": "58", "totalPays": "2704.50" }, { "dataKey": "14", "totalTrans": "77", "totalPays": "6561.20" }, { "dataKey": "15", "totalTrans": "27", "totalPays": "1252.20" } ];
02时间,04时间…都是空值,需要如何处理呢?
24小时完整时间点
按照数据格式,在JS钟,提前做好24小时默认数据。
//24小时默认数据,补齐缺失数据; var timeData = [ {"dataKey": '00', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '01', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '02', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '03', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '04', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '05', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '06', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '07', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '08', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '09', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '10', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '11', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '12', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '13', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '14', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '15', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '16', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '17', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '18', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '19', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '20', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '21', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '22', "totalTrans": "0", "totalPays": "0"}, {"dataKey": '23', "totalTrans": "0", "totalPays": "0"} ];
合并两个对象数组
//合并数据成为新的数组; var arr2 = timeData.concat(arr);
结果如下:
执行对象数组的合并
直接合并的数据,存在大量的重复值,不是目标数据,需要对数据按照dataKey进行合并,其他字段相加。
//定义新的对象和数据; var map = {}, dest1 = [], dest2 = []; //执行函数合并; getNewArr(arr2, dest1); console.log(dest1); //对象数组,同键值合并函数; function getNewArr(arr, dest) { for (var i = 0; i < arr.length; i++) { var ai = arr[i]; if (!map[ai.dataKey]) { dest.push({ dataKey: ai.dataKey, totalTrans: ai.totalTrans, totalPays: ai.totalPays }); map[ai.dataKey] = ai; } else { for (var j = 0; j < dest.length; j++) { var dj = dest[j]; if (dj.dataKey == ai.dataKey) { dj.totalTrans = (parseFloat(dj.totalTrans) + parseFloat(ai.totalTrans)).toString(); dj.totalPays = (parseFloat(dj.totalPays) + parseFloat(ai.totalPays)).toString(); break; } } } } }
Done!