step1:
页面上在一段区域上从左到右添加三个同一类型的"pie"饼图,但是数据不一样时,如何减少不必要的重复代码段呢?
首先,html页面代码如下:
<ul class="order-infoList">
<li>
<div id="order-category" style="width: 100%;height: 100%"></div>
</li>
<li>
<div id="problem-category" style="width: 100%;height: 100%"></div>
</li>
<li>
<div id="order-status" style="width: 100%;height: 100%"></div>
</li>
</ul>
给ul的三个li各分配width相应比例关系(如:第一个30%,第二个40%,第三个30%),顺利实现自适应布局(自适应也就这么回事儿);
step2:
就是要写js代码,我的思路就是利用对象(有属性,有方法,且给方法配置需要的参数,最后重复调用该方法)
代码如下:
var main_move_chart= {
/*带参数的方法
* 1.id:html页面对应的id值
* 2.seriesName:名称
* 3.legendData:类别
* 4.seriesData:类别的值
* */
init_echarts : function (id,seriesName,legendData,seriesData) {
//获取id
var echartObj = echarts.init(document.getElementById(id));
//执行setOption方法
echartObj.setOption(main_move_chart.init_option(seriesName,legendData,seriesData));
//自适应
main_move_chart.init_resize(echartObj)
},
//窗口缩放时自适应
init_resize : function (Obj) {
if(window.addEventListener){
window.addEventListener("resize",function(){
Obj.resize();
})
}else{
window.attachEvent("resize",function(){
Obj.resize();
})
}
},
//带参的option
init_option : function (seriesName,legendData,seriesData) {
option = {
tooltip : {
trigger:'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend:{
orient:'vertical',
x:'60%',
y:'center',
data:legendData
//data:order_category_legendData
},
series : [
{
name:seriesName,
type:'pie',
center:['30%','50%'],
radius : ['40%', '55%'],
itemStyle:{
normal:{
label:{
show:false
},
labelLine:{
show:false
}
},
emphasis:{
label:{
show:true,
position:'center',
textStyle:{
fontSize:'16',
fontWeight:'400'
}
}
}
},
data:seriesData
//data:order_category_seriesData
}
]
};
return option;
}
};
//调用
main_move_chart.init_echarts(
"order-category",
'工单分类',
['投诉建议','技术支持','咨询服务','系统故障'],
[
{value:600,name:'投诉建议'},
{value:500,name:'技术支持'},
{value:250,name:'咨询服务'},
{value:120,name:'系统故障'}
]
);
main_move_chart.init_echarts(
"problem-category",
'问题分类',
['云主机','云储存','虚拟网络','虚拟防火墙','虚拟负载均衡','虚拟IPS','虚拟防病毒','虚拟WAF','虚拟VPN','云安全','应用迁移'],
[
{value:600,name:'云主机'},
{value:500,name:'云储存'},
{value:250,name:'虚拟网络'},
{value:120,name:'虚拟防火墙'},
{value:80,name:'虚拟负载均衡'},
{value:20,name:'虚拟IPS'},
{value:210,name:'虚拟防病毒'},
{value:30,name:'虚拟WAF'},
{value:60,name:'虚拟VPN'},
{value:12,name:'云安全'},
{value:30,name:'应用迁移'}
]
);
main_move_chart.init_echarts(
"order-status",
'工单状态',
['待处理','处理中','待您确认','已关闭'],
[
{value:600,name:'待处理'},
{value:500,name:'处理中'},
{value:250,name:'待您确认'},
{value:120,name:'已关闭'}
]
);
代码解释:
第一个方法(核心):
main_move_chart.init_echarts方法,就是最重要的,(1) 获取id >>>>>(2) 执行setOption方法(不同之处,传入的参数是另一个配置了参数的方法,并return回来的option对象) >>>>(3) 窗口缩放时自适应方法;
第二个方法:
main_move_chart.init_resize方法,自适应的
第三个方法:
main_move_chart.init_option方法,(去官网的example实例中,复制它的option过来,然后根据实际需要,增删其中的参数配置即可),补充:data的值作为参数传入
step3:
调用方法:
代码如下:
main_move_chart.init_echarts(
"order-category",
'工单分类',
['投诉建议','技术支持','咨询服务','系统故障'],
[
{value:600,name:'投诉建议'},
{value:500,name:'技术支持'},
{value:250,name:'咨询服务'},
{value:120,name:'系统故障'}
]
);
main_move_chart.init_echarts(
"problem-category",
'问题分类',
['云主机','云储存','虚拟网络','虚拟防火墙','虚拟负载均衡','虚拟IPS','虚拟防病毒','虚拟WAF','虚拟VPN','云安全','应用迁移'],
[
{value:600,name:'云主机'},
{value:500,name:'云储存'},
{value:250,name:'虚拟网络'},
{value:120,name:'虚拟防火墙'},
{value:80,name:'虚拟负载均衡'},
{value:20,name:'虚拟IPS'},
{value:210,name:'虚拟防病毒'},
{value:30,name:'虚拟WAF'},
{value:60,name:'虚拟VPN'},
{value:12,name:'云安全'},
{value:30,name:'应用迁移'}
]
);
main_move_chart.init_echarts(
"order-status",
'工单状态',
['待处理','处理中','待您确认','已关闭'],
[
{value:600,name:'待处理'},
{value:500,name:'处理中'},
{value:250,name:'待您确认'},
{value:120,name:'已关闭'}
]
);
刷新页面,你会发现,大功告成!
个人总结:
这样的写法有什么弊端?请大神们指点一二,小弟感激不尽!!!
请留下更合适的写法建议!