Echarts进行2次封装操作！

Echarts 3.0 版本的进行二次封装。

二次封装后源码百度云下载： http://pan.baidu.com/s/1qXNJYfa
代码示例码云地址：  https://gitee.com/yxs2615/echartsercifengzhuang.git

封装图表渲染后为

 

进行echarts 的再次封装，无异于是想代码简单化，对于开发人员来说，书写大量的重复的代码，是件头痛的事情，进行简单的封装有助于代码的简化，整洁，工程量时间的大幅度缩减。

 

----------------------------------------------------------------------------------------进行代码的编写部分--------------------------

 

 

首先创建一个js文件，进行简单的封装格式，

 

思想：传递少量的公共参数，即传递data数据和图形的div -- Id，就行展现出图形。

 

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,true);	// 为echarts对象加载数据 
			return myChart;
		}
}

其中initChart是图形的初始化，但其需要的参数还需要option，是echart图形可视化的重要参数，按照饼图（pie）为例，出现一个饼图的

最基本的option数据需要以下：

 

			option = {
				//标题
				title :{
					text : title || "",	//标题
					subtext : subtext || "", //副标题
					x : 'center',	//位置默认居中
				},
				//提示
				tooltip: {
					show: true,
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
			        },
			        //组建
			        legend : {
				    	orient: 'horizontal', //垂直：vertical； 水平 horizontal
			           // top: 'center',	//位置默认左
			            bottom:'5%',
				        data:datas.categorys
				    },
				    series: [
				        {
				            name : title || "",
				            type : 'pie',	//类型
				            radius : '48%', //圆的大小
				            center : ['50%', '50%'],//位置居中
				            data : datas.data,
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            },
				            //引导线
				            labelLine :{
				                normal :{
				                    show: true,
				                    length:2,
				                }
				            }
				        }
				    ]
				};option = {
				//标题
				title :{
					text : title || "",	//标题
					subtext : subtext || "", //副标题
					x : 'center',	//位置默认居中
				},
				//提示
				tooltip: {
					show: true,
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
			        },
			        //组建
			        legend : {
				    	orient: 'horizontal', //垂直：vertical； 水平 horizontal
			           // top: 'center',	//位置默认左
			            bottom:'5%',
				        data:datas.categorys
				    },
				    series: [
				        {
				            name : title || "",
				            type : 'pie',	//类型
				            radius : '48%', //圆的大小
				            center : ['50%', '50%'],//位置居中
				            data : datas.data,
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            },
				            //引导线
				            labelLine :{
				                normal :{
				                    show: true,
				                    length:2,
				                }
				            }
				        }
				    ]
				};

其中需要参数标题（title）、副标题（subtext）、data数据，所以进行这部分分解

data数据的格式化：

1：从获取的数据格式需要定义一个固定的格式，我们即可已方便，又简单的格式，对此我的理解可以为，分组(group)，名称(name)和数量（value）,

具体格式如下

 

		var data1 = [ 
			   { group:'类型1' , name: '1月', value: 10 }, 
			  { group:'类型2' , name: '1月', value: 15 }, 
		         { group:'类型1' , name: '2月', value: 25 }, 
		         { group:'类型2' , name: '2月', value: 12 }, 
		        { group:'类型1' , name: '3月', value: 22 }, 
		         { group:'类型2' , name: '3月', value: 12 }, 
		         ];
var data1 = [ 
			   { group:'类型1' , name: '1月', value: 10 }, 
			  { group:'类型2' , name: '1月', value: 15 }, 
		         { group:'类型1' , name: '2月', value: 25 }, 
		         { group:'类型2' , name: '2月', value: 12 }, 
		        { group:'类型1' , name: '3月', value: 22 }, 
		         { group:'类型2' , name: '3月', value: 12 }, 
		         ];

2：需要从data格式中分解出需要的data格式数据，即饼图（pie）中data 格式。

		NoGroupFormate : function (data){
				//category 的数据存储
				var categorys = [];
				//data 的数据存储
				var datas = [];
				//遍历
				for(var i=0;i<data.length;i++){
					categorys.push(data[i].name || "");
					//定义一个中间变量
					var temp_data = {value:data[i].value || 0 , name : data[i].name || ""};
					datas.push(temp_data);
				}
				return {categorys:categorys,data:datas};
			},NoGroupFormate : function (data){
				//category 的数据存储
				var categorys = [];
				//data 的数据存储
				var datas = [];
				//遍历
				for(var i=0;i<data.length;i++){
					categorys.push(data[i].name || "");
					//定义一个中间变量
					var temp_data = {value:data[i].value || 0 , name : data[i].name || ""};
					datas.push(temp_data);
				}
				return {categorys:categorys,data:datas};
			},

传递data参数，从中返回categorys是组需要组建显示时的名称数组，data是series中的data数据

 

3：将封装整合：

 

 

var MyEcharts = {
		EchartsDataFormate : {
			/**
			 * 
			 */
			NoGroupFormate : function (data){
				//category 的数据存储
				var categorys = [];
				//data 的数据存储
				var datas = [];
				//遍历
				for(var i=0;i<data.length;i++){
					categorys.push(data[i].name || "");
					//定义一个中间变量
					var temp_data = {value:data[i].value || 0 , name : data[i].name || ""};
					datas.push(temp_data);
				}
				return {categorys:categorys,data:datas};
			},
		｝,
		//生成图形option
		EchartsOption : {
			/**
			 * 饼图
			 * @param title ： 标题<br>
			 * @param subtext ：副标题<br>
			 * @param data : json 数据
			 * 
			 */
			pie : function (title,subtext,data){

				//数据格式
				var datas = MyEcharts.EchartsDataFormate.NoGroupFormate(data);
				option = {
					//标题
					title :{
						text : title || "",	//标题
						subtext : subtext || "", //副标题
						x : 'center',	//位置默认居中
					},
					//提示
					tooltip: {
						show: true,
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
			        },
			        //组建
			        legend : {
				    	orient: 'horizontal', //垂直：vertical； 水平 horizontal
			           // top: 'center',	//位置默认左
			            bottom:'5%',
				        data:datas.categorys
				    },
				    series: [
				        {
				        	name : title || "",
				            type : 'pie',	//类型
				            radius : '48%', //圆的大小
				            center : ['50%', '50%'],//位置居中
				            data : datas.data,
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            },
				            //引导线
				            labelLine :{
				                normal :{
				                    show: true,
				                    length:2,
				                }
				            }
				        }
				    ]
				};
				return option;
			},
		/**
		 * 
		 * @param option : option
		 * @param echartId : 图表的id 需要加引号
		 */
		initChart : function (option,echartId){
			var container = eval("document.getElementById('" + echartId + "')");
			var myChart = echarts.init(container);
			myChart.setOption(option,true);	// 为echarts对象加载数据 
			return myChart;
		}
｝

5：封装的util调用：

 

var data =  [{  name: '男生', value: 10}, 
	             {  name: '女生', value: 20}];
	var option = MyEcharts.EchartsOption.pie("男女人数统计", "单位（人）", data);
	var initChart=MyEcharts.initChart(option,"sexId");//sexId是div的id
	var options = {
			color:["#FDB157","#3498DB"],
			legend : {
		    	orient: 'vertical', //垂直：vertical； 水平 horizontal
		    	right:'right',
			},
			series:[{
				 radius : '55%', //圆的大小
				 center : ['50%', '60%'],//位置居中
			}]
	};
	initChart.setOption(options);

其中的返回的initchart 是进行样式操作的对象，

可进行调用，

 

显示效果如下：

 

 

 

 

其他折线图，柱形图，思路都是一样的，可参考源码： 下载地址： http://pan.baidu.com/s/1qXNJYfa

 

谢谢评论意见！