Echarts进行2次封装操作！
Echarts 3.0 版本的进行二次封装。
二次封装后源码百度云下载：
http://pan.baidu.com/s/1qXNJYfa
代码示例码云地址： https://gitee.com/yxs2615/echartsercifengzhuang.git
代码示例码云地址： 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;
}
}
最基本的option数据需要以下：
option = { //标题 title :{ text : title || "", //标题 subtext : subtext || "", //副标题 x : 'center', //位置默认居中 }, //提示 tooltip: { show: true, trigger: 'item', formatter: "{a}option = { //标题 title :{ text : title || "", //标题 subtext : subtext || "", //副标题 x : 'center', //位置默认居中 }, //提示 tooltip: { show: true, trigger: 'item', formatter: "{a}
{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, } } } ] };
{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 },
];
NoGroupFormate : function (data){
//category 的数据存储
var categorys = [];
//data 的数据存储
var datas = [];
//遍历
for(var i=0;iNoGroupFormate : function (data){
//category 的数据存储
var categorys = [];
//data 的数据存储
var datas = [];
//遍历
for(var i=0;i
传递data参数，从中返回categorys是组需要组建显示时的名称数组，data是series中的data数据
3：将封装整合：
var MyEcharts = {
EchartsDataFormate : {
/**
*
*/
NoGroupFormate : function (data){
//category 的数据存储
var categorys = [];
//data 的数据存储
var datas = [];
//遍历
for(var i=0;i
* @param subtext ：副标题
* @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}
{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);
可进行调用，
显示效果如下：
其他折线图，柱形图，思路都是一样的，可参考源码： 下载地址：
http://pan.baidu.com/s/1qXNJYfa
谢谢评论意见！