当统计维度复杂,并且后台无法返回前端需要的数据格式时,需要前端进行数据格式的转换,展示相应的统计图+
实现思路:
1、提取year,
2、提取图例数据,构建二维数组
方法:年作为二维数组中的每一个子数组的下标,子数组的元素通过循环count放入,当前年没有数据的补零
3、解析二维数组,转换为echarts所识别的格式进行渲染
方法:遍历二维数组,将二维数组中的子数组数据转置,动态根据legend创建series数组中的对象
//实现一:
function changeData(originData, url,nextUrl,subject,id,searchObj) {
var xAxisData = []; //保存x轴数据
var legendData = []; //保存图例数据
var rowsData = []; // 二维数组外数组
originData.forEach(function(item, index) {
xAxisData.push(item.year);
var count = item.count;
var groupData = []; //二维数组内数组
if (count.length > 0) {
count.forEach(function(c, i) {
var obj = {value: c.total, subject:subject,url: url,nextUrl:nextUrl,aYear:item.year,searchObj:searchObj};
if(id){
obj['id'] = c[id];
}
if(c.name){
obj["name"] = c.name;
}
groupData.push(obj);
if (legendData.indexOf(c.name) == -1) {
legendData.push(c.name);
}
});
} else {
groupData.push('');
}
rowsData.push(groupData);
});
// console.log('rowsData', rowsData); //二维数组
var series = [];
//根据图例个数动态创建series数组中的对象
legendData.forEach(function(lgd, index) {
//从二维数组中获取当前图例对应的数据
var arr = [];
rowsData.forEach(function(row, ridx) {
arr.push(row[index] ? row[index] : 0);
})
series.push({
name: lgd,
type: 'bar',
data: arr
})
});
// console.log('series', series);
return {
legendData: legendData,
xAxisData: xAxisData,
series: series
}
}
//实现二:
function changeData(){
var xAxisData = []; //保存x轴数据
var legendData = []; //保存图例数据
var num;//保存子数组个数
var rowsData = []; // 二维数组外数组
originData.forEach(function(item, index) {
xAxisData.push(item.year);
var count = item.count;
var groupData = []; //二维数组内数组
if (count.length > 0) {
count.forEach(function(c, i) {
groupData.push({ value: c.total});
if (legendData.indexOf(c.name) == -1) {
legendData.push(c.name);
num = legendData.length;
}
});
} else {
// groupData.push('');
}
// rowsData.push(groupData);
});
console.log(num);
var parentArr=[];
var arr;
for(var i=0;i<originData.length;i++){
arr = new Array();
if(originData[i].count.length == 0){
arr.push(0);
}else{
for(var j=0;j<originData[i].count.length;j++){
arr.push(originData[i].count[j]["total"]);
}
}
parentArr.push(arr);
}
console.log(parentArr);
var seriesData;
for(var i=0;i<num;i++){
seriesData = [];
for(var j=0;j<parentArr.length;j++){
if(!parentArr[j][i]){
parentArr[j][i] = 0;
}
}
}
// console.log(parentArr);
//console.log('rowsData',rowsData);
var series = [];
legendData.forEach(function(lgd,index){
var arr=[];
// rowsData.forEach(function(row,ridx){
// arr.push(row[index]?row[index]:0);
// })
parentArr.forEach(function(row,ridx){
arr.push(row[index]);
});
series.push({
name:lgd,
type:'bar',
data:arr
})
});
console.log('series',series);
return {
legendData:legendData,
xAxisData:xAxisData,
series:series
}
}