echart js简单封装

2019独角兽企业重金招聘Python工程师标准>>>

echart 需要数据结构[{name:"计划",data:[10,20,30]},{name:"实现",data:[8,21,31]}]（折线图、柱状图）

一般数据结构是[{name:"a客户",计划:10,实现:11},{name:"b客户",计划:20,实现:8}...]

做一下js简单封装，[{name},{name}] to { name:["",""]}

//根据id，赋值
function setOptionById(eid,option){
	var ec=echarts.getInstanceByDom($("#"+eid)[0]);
	ec.hideLoading();
	ec.setOption(option);
}
//封装echarts [{name},{name}] to { name:["",""]},opt.x opt.y tname=title dname=data
function etData (etitle,edata,eopt){
	//判断类型
	//var title= etTitle(title);
	
	/*console.info(etitle);
	console.info(edata);
	console.info(eopt);*/
	if(!jQuery.isPlainObject(eopt)){
		return;
	}
	//x轴数据,eopt.x =  name
	var xdata=etXdata(edata,eopt.x);
	console.info(xdata);
	//series轴数据 
	var sdata=etSdata(edata,eopt.s);
	console.info(sdata);
	//图标
	var legdata=eopt.tb||{};
	
	var opt={
		title:{
			text:etitle,
			x:"center"
		},
		tooltip: {},
		legend:legdata,
		xAxis:{
			data:xdata
		},
		yAxis:{},
		series:sdata
	};
	return opt;
}
function etXdata(edata,xname){
	//console.info(edata);
	//console.info(index);
	var xdata=[];
	edata.forEach(function(e){
		//console.info(e);
		xdata.push(Object.getOwnPropertyDescriptor(e,xname).value);
	});
	return xdata;
	}
function etSdata(edata,sopt){
	var sdata=[];
	sopt.forEach(function(sd){
		var md={
			name:sd.tname,
			type:sd.type,
			data:etXdata(edata,sd.dname)
		}
		sdata.push(md);
	});
	return sdata;
}
//配置	
                var eoption={x:"name",s:[{tname:"计划",dname:"mp",type:"bar"},{tname:"兑现",dname:"ms_md",type:"bar"}],tb:{data:["计划","兑现"],x:"left"}};
                //data
                var data=[{name:"A客户",yp:"200",mp:"20",ms_mp:"20",ms_md:"28",ys_yd:"208"},{name:"B客户",yp:"450",mp:"48",ms_mp:"48",ms_md:"58",ys_yd:"480"}];
		var opt=etData("月进度统计(万吨)",data,eoption);
		//赋值
		setOptionById("staCharts",opt);

关键代码

function etXdata(edata,xname){
	var xdata=[];
	edata.forEach(function(e){
		//console.info(e);
		xdata.push(Object.getOwnPropertyDescriptor(e,xname).value);
	});
	return xdata;
	}

循环集合，根据关键字查找数据添加到集合中。目前问题多列显示会重复循环多次 ?

转载于:https://my.oschina.net/u/210357/blog/667748