echarts绑定数据

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36251118/article/details/87932528

当统计维度复杂，并且后台无法返回前端需要的数据格式时，需要前端进行数据格式的转换，展示相应的统计图+

实现思路：
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
				
			}
		}