欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Echarts进行2次封装操作!

程序员文章站 2024-01-26 08:23:40
...

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

二次封装后源码百度云下载:http://pan.baidu.com/s/1qXNJYfa

进行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,
				                }
				            }
				        }
				    ]
				};

其中需要参数标题(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 }, 
		         ];
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};
			},
传递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 是进行样式操作的对象,
可进行调用,

显示效果如下:


Echarts进行2次封装操作!

其他折线图,柱形图,思路都是一样的,可参考源码: 下载地址:http://pan.baidu.com/s/1qXNJYfa
谢谢评论意见!