后台json按条件分类,并实现echart柱状图
在最近的业务场景下需要将后台返回的json数据实现在echart柱状图上,看文档,横坐标如图:
然而后台返回的数据格式如图:
我们要按照日期为横坐标,每个颜色为纵坐标,最后按照每个种类的颜色生成数组;横坐标简单;就是数组去重,最后生成日期数组。然而颜色需要按照数组的每一项表示当天的次数;如图最后生成的颜色数组依次为:
直接上代码:
red=[1,0,0,1,1],or=[0,0,1,0,0],ye=[2,1,0,0,0],bl=[1,1,1,2,0];
var tongji;
$.post("url",function (res) {//后台返回的数据
tongji=res.datas;
console.log(tongji);
var map = {},
dest = [];
for(var i = 0; i < tongji.length; i++){//将数组按照日期分类生成新的数组
var ai = tongji[i];
if(!map[ai.time]){
dest.push({
time: ai.time,
name: ai.type,
data: [ai]
});
map[ai.time] = ai;
}else{
for(var j = 0; j < dest.length; j++){
var dj= dest[j];
if(dj.time == ai.time){
dj.data.push(ai);
break;
}
}
}
}
var red=0,orange=0,yellow=0,blue=0,red_arr=[],orange_arr=[],yellow_arr=[],blue_arr=[];
console.log(dest);
for(var j=0;j<dest.length;j++){
for(var n=0;n<dest[j].data.length;n++){
if(dest[j].data[n].type=="红色"){
red++;
}else if (dest[j].data[n].type=="橙色"){
orange++;
}else if(dest[j].data[n].type=="黄色"){
yellow++
}else if(dest[j].data[n].type=="蓝色"){
blue++;
}
console.log(red);
}
red_arr.push(red);
orange_arr.push(orange);
yellow_arr.push(yellow);
blue_arr.push(blue);
}
var red_arr1=jianyi(red_arr);
var orange_arr1=jianyi(orange_arr);
var yellow_arr1=jianyi(yellow_arr);
var blue_arr1=jianyi(blue_arr);
});
function jianyi(arr){//将数组内的从第二项开始减去前面前面的一项
var newArr=[];
newArr.push(arr[0]);
for(var i=0;i<arr.length-1;i++){
arr[i]=arr[i+1]-arr[i];
newArr.push(arr[i]);
}
return newArr;
}