【eCharts】--数组数量不同时，显示多条折现图的显示-

【前言】

    最近小编的项目一直在使用echarts做图形设计，现在记录一下在项目中遇到的一些问题。

【正文】

       需求：  一个统计图中实现多条折现图的显示。

       解决思路： 

            1. 数据重组，去重得到对应的横坐标

           2. 循环所有组的数据，匹配横轴的值，重新构造新数据

       代码：

function getChart(type,data){
	/*
	type: 确定是折线图还是柱形图
	*/	
	//获取统计图横纵坐标的数据
	//1. 生态林监测区数据
	var sumBewriteCoe =getSqlCode(scope.sfun,"statistical");
	var stljcData=getMapChart(sumBewriteCoe,"");
	//2. 生态林监测区中垃圾渣土数据
	var sumBewriteCoe =getSqlCode(scope.sfun,"ljzt_statistical");
	var ljztData=getMapChart(sumBewriteCoe,"");
	//定义 echart统计图的提示文本
	var legend={data:['生态林监测','垃圾渣土']，textStyle:{color:'white'}};
	//定义纵坐标
	var series=[];
	series[0]={name:'生态林监测'，data:[],type:type，barwidth:20,itemStyle:{normal:{color:['#8DDDFE'],label:{show:true,position:'top',textStyle:{color:'white',fontSize:'12'}}}}};
	series[1]={name:'垃圾渣土'，data:[],type:type，barwidth:20,itemStyle:{normal:{color:['yellow'],label:{show:true,position:'top',textStyle:{color:'white',fontSize:'12'}}}}};
	//定义横坐标
	var xAxis=[];
	//1.取得所有的横轴值
	var temDataArr=[];
	temDataArr.push(stljcData);
	temDataArr.push(ljztData);
	//横坐标去重
	var xValues=countData(temDataArr);
	//循环所有组的数据，匹配横轴的值，重新构造新数据
	for(var s in xValues){
		var d=eval('xValues.'+s);
		xAxis.push(switchDate(d));
	}
	for(var i=0; i<temDataArr.length;i++){
		for(var s in xValues){
			var d=eval('xValues.'+s);
			series[i].data.push(compar(temDataArr[i],d));
		}
	}
	_CreatChart(xAxis,series,"",legend);
}

function countData(d){
	var x={};
	for(var i=0; i<d.length;i++){
		var tem=d[0].list;
		for(var j=0;j<tem.length;j++){
			var dt=tem[j].datatime;
			eval('x.a'+dt+'=\''+dt+'\'');  

		}
	}
	return x;
}

function compar(a,d){
	for(var i=0;i<a.list.length;i++){
		if(a.list[i].datatime==d){
			return a.list[i].count;
		}
	}
	return '';
}

实现效果：

   

因为公司不能联外网，而且代码也不能再自己电脑上运行，大家将就看一下效果图。