标签：pie 缩放 故障 应用 radius resize als ble legend
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:‘已关闭‘}
]
);
刷新页面，你会发现，大功告成！
个人总结：
这样的写法有什么弊端？请大神们指点一二，小弟感激不尽！！！
请留下更合适的写法建议！
基于echarts在使用过程中的有关javascript的总结（入门级）
标签：pie 缩放 故障 应用 radius resize als ble legend
原文地址：http://www.cnblogs.com/liangliangjiang/p/6160846.html
