Echarts进行2次封装操作！

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};},｝,//生成图形optionEchartsOption : {/** * 饼图 * @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的idvar 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

谢谢评论意见！