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 是进行样式操作的对象,
可进行调用,
显示效果如下:
其他折线图,柱形图,思路都是一样的,可参考源码: 下载地址:http://pan.baidu.com/s/1qXNJYfa
谢谢评论意见!
下一篇: Js网页另存为实现代码_其他特效