echart js簡單封裝

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;
	}

循環集合，根據關鍵字查找數據添加到集合中。目前問題多列顯示會重複循環屢次 😂