echarts 二次封装调用

调用

//饼图
var initChart= MyeCharts.pie(echartId,datas,params);
//柱状图/折线图
var initChart= MyeCharts.myChart((echartId,seriesData,xAxisData,params));

可重写 option如下

var options = {
	legend : {
	orient: 'vertical', //垂直：vertical； 水平 horizontal
	right:'right',
	},
	series:[{
	radius : '55%', //圆的大小
	center : ['50%', '60%'],//位置居中
	}]
};
initChart.setOption(options);

代码封装

/****************** eCharts图表类 ***************/
var MyeCharts = {
	/**
	 * 
	 * @param option : option
	 * @param echartId : 图表的id 需要加引号
	 */
	initChart : function (option,echartId){
		var container = eval("document.getElementById('" + echartId + "')");
		var myChart = echarts.init(container);
		myChart.setOption(option);	// 为echarts对象加载数据 
		return myChart;
	},
	NoGroupFormate : function (data){
			var categorys = [];//名称
			//遍历
			for(var i=0;i<data.length;i++){
				categorys.push(data[i].name || "");
				
			}
			return categorys;
	},
	//生成图形option
	/**
	 * 饼图
	 * @param title ： 标题<br>
	 * @param subtext ：副标题<br>
	 * @param positionx : 标题位置<br>
	 * @param positiony : 标题位置<br>
	 * @param legendOrient : legend显示方式<br>
	 * @param legendx : legend x轴位置<br>
	 * @param legendy : legend y轴位置<br>
	 * @param legendData : legend 数据 <br>
	 * @param radius :  圆的大小 <br>
	 * @param centerX :  圆的x轴 <br>
	 * @param centerY :  圆的y轴 <br>
	 * @param data : json 数据
	 * 
	 */
	pie : function (echartId,datas,params){
	 	if(document.getElementById(echartId) !=null){
	 	//数据格式
			var legendData;
			if(params==undefined||params==null){
				params={};
			}
			if (params.legend) {
				legendData = MyeCharts.NoGroupFormate(datas);
			}
			if (params.legendData  != "" && params.legendData !=null ||  params.legendData != undefined ) {
					legendData = params.legendData ;
			}
			if (params.colors == "" || params.colors ==null ||  params.colors == undefined ) {
				params.colors = ['#F7816F','#AC86F3','#7FBCF4','#FFE16F','#89f166']
			}
		 	option = {
		 		color:params.colors,
		 		title : {
						text : params.title || "",	//标题
						subtext : params.subtext || "", //副标题
						x : params.positionx || 'center',	//位置/默认居中
						y : params.positiony || 'top',	//位置
				},
				//提示
				tooltip: {
					show: true,
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
		 		},
		 		legend : {
			    	orient: params.legendOrient || 'horizontal', //垂直：vertical； 水平 horizontal
			    	x: params.legendx || 'left',
			    	y: params.legendy || 'top',
			    	data: legendData || '',
			    	textStyle:{
						color: params.colortext ||'#333',
					}
		           // top: 'center',	//位置默认左
			    },
			    series : [{
			    	name : params.title || "",
			    	type : 'pie',	//类型
			    	radius :params.radius || '48%', //圆的大小
					center : [params.centerX || '50%', params.centerY ||'50%'],//位置居中
					data : datas,
					itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                },
				        normal:{ 
				             label:{ 
				               show: true, 
				               formatter: '{b} \n {d}%' 
				             }, 
				             labelLine :{show:true} 
				        } 
		            } 
			    }]
		 	};
		 	var container = eval("document.getElementById('" + echartId + "')");
			var myChart = echarts.init(container);
			myChart.setOption(option);	// 为echarts对象加载数据 
			myChart.resize();	// 为echarts对象加载数据
			window.addEventListener("resize",function(){
			    myChart.resize();
			});
			return myChart;
		}
		 	//return option;
	},
	/**
	 * 柱状图	/   折线图
	 * @param xAxisData ： x轴data<br>
	 * @param xName ：x轴标题<br>
	 * @param yName ：y轴标题<br>
	 * @param legendData ： legendData<br>
	 * @param gridstop/gridsleft/ gridsright/gridsbottom： 全屏位置<br>
	 * @param colors ： 颜色<br>
	 * @param legendOrient ： 大标题显示方式<br>
	 * @param legendData ： 大标题数据<br>
	 * @param legendWidth ： 标题图形的宽度<br>
	 * @param legendHeight ： 标题图形的高度<br>
	 * @param rotateX ：x轴文字倾斜的角度<br>
	 * @param rotateY ： y轴文字倾斜的角度<br>
	 * @param data : json 数据
	 * 
	 */
	myChart:function(echartId,seriesData,xAxisData,params){
		if(document.getElementById(echartId) !=null){
			var legendData;
			if(params==undefined||params==null){
				params={};
			}
			if (params.legend) {
				legendData = MyeCharts.NoGroupFormate(seriesData);
			}
			if (params.legendData  != "" && params.legendData !=null ||  params.legendData != undefined ) {
				legendData = params.legendData ;
			}
			if (params.colors == "" || params.colors ==null ||  params.colors == undefined ) {
				params.colors = ['#32BAFF','#F7816F','#EE9201','#B74AE5','#0AAF9F','#E89589']
			}
			option = {
				color:params.colors,
			    grid:{
			    	top:params.gridstop || 35,
			    	left:params.gridsleft || 35,
			    	right:params.gridsright ||20,
			    	bottom:params.gridsbottom ||40
			    },
			    legend: {
			    	orient: params.legendOrient || 'horizontal', //垂直：vertical； 水平 horizontal
			        data:legendData || "",
			        top:0,
			        itemWidth:params.legendWidth || 24,//图例的宽度
			        itemHeight: params.legendHeight || 14,//图例的高度
			        textStyle:{
						color: params.colortext ||'#333',
					}
			    },
			    tooltip : {
			        trigger: 'axis',
			        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
			            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			        },
			    },
			    xAxis : [
			        {
			            type : 'category',
			            splitLine: {show:false},
			            data : xAxisData,
			            name:params.xName || "",
			            axisLabel: {
			                interval:0,
			                rotate:  params.rotateX || 30,
			                lineStyle: {
			                   type: 'solid',
			                   color: params.colortext || '#000',//左边线的颜色

			   	            }
			            },
			            axisLine: {
			               	lineStyle: {
			                   type: 'solid',
			                   color: params.colortext || '#000',//左边线的颜色

			   	            }
			   	        }
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value',
			            name:params.yName || "",
			            axisLabel: {
			                interval:0,
			                rotate:params.rotateY ||30,
			                lineStyle: {
			                   type: 'solid',
			                   color: params.colortext || '#000',//左边线的颜色

			   	            }
			            },
			            axisLine: {
			               	lineStyle: {
			                   type: 'solid',
			                  	color: params.colortext || '#000',

			   	            }
			   	        }
			        }
			    ],
			    series : seriesData
			};
			var container = eval("document.getElementById('" + echartId + "')");
			var myChart = echarts.init(container);
			myChart.setOption(option);	// 为echarts对象加载数据 
			myChart.resize();
			window.addEventListener("resize",function(){
			    myChart.resize();
			});
			return myChart;
			//return option;
		}
	},
}

参数详情
饼图：MyeCharts.pie(echartId,datas,params);

echartId	datas	params var params ={}
容器id	series ——data数据源	* @param title ： 标题— 默认值：’’ * @param subtext ：副标题—默认值：’’ * @param positionx : 标题位置—默认值：‘center’ * @param positiony : 标题位置—默认值：‘top’ * @param legendOrient : legend显示方式—默认值：‘horizontal’ * @param legendx : legend x轴位置—默认值：‘left’ * @param legendy : legend y轴位置—默认值：‘top’ * @param legend: legend 数据 ——默认值：’’, 为true时自动读取 legend 数据 * @param legendData : legend 数据——默认值：’’（legend为true时可不填） * @param radius : 圆的大小 ——默认值：‘48%’ ‘radius’:[‘50%’, ‘70%’]环形 * @param centerX : 圆的x轴 ——默认值：‘50%’ * @param centerY : 圆的y轴 ——默认值：‘50%’ * @param colors ： 颜色——默认值：colors =[’#F7816F’,’#AC86F3’,’#7FBCF4’,’#FFE16F’,’#89f166’] * @param colortext:刻度标线颜色，legend字体颜色——默认值：‘333’ * @param data : json 数据 默认值：’’

柱状图/折线图：MyeCharts.myChart((echartId,seriesData,xAxisData,params));

echartId	seriesData	xAxisData	params var params ={}
容器id	数据源（series）	x轴data	* @param xName ：x轴标题—— 默认值：’’ * @param yName ：y轴标题——默认值：’’ * @param legendData ： legendData——默认值：’’ * @param gridstop/gridsleft/ gridsright/gridsbottom： 全屏位置——默认：top:35, left:35, right:20,bottom:40 * @param colors ： 颜色——默认值：colors =[’#32BAFF’,’#F7816F’,’#EE9201’,’#B74AE5’,’#0AAF9F’,’#E89589’]} * @param legendOrient ： 大标题显示方式——默认值：‘horizontal’ * @param legendData ： 大标题数据——默认值：’’ * @param legendWidth ： 标题图形的宽度——默认值：24 * @param legendHeight ： 标题图形的高度——默认值：24 * @param rotateX ：x轴文字倾斜的角度——默认值：30 * @param rotateY ： y轴文字倾斜的角度——默认值：30