封装想法来源:当初在进行数据的处理时,想着如果能够用一种可视化的效果来呈现那用户体验绝非一般了,于是借用了功能强大的百度Echarts,由于Echarts本身渲染图表的时候,除了需要给出需要展示的数据值(data)之外,Echarts自带的一些配置参数重复写多次也是一件开发效率极低的事,因此,就想着把Echarts的配置参数封装到一个方法中,集体调用,需要做某些小改动时再传递相应的参数即可。
<!--效果-->
Echarts类库下载网址: http://echarts.baidu.com/download.html
<script src="../echarts.js"></script> //echarts类库的引入
<!--具体参数的处理-->
var warnNum = '40%'; //参数举例
var joinAllMan= '60%'; //参数举例
var warnStates = (function(){
var warnNumCount = warnNum;
var joinAllManCount = joinAllMan;
return {
warnStatesData : function(){
var res = [];
if(parseInt(warnNumCount)<parseInt(joinAllManCount)){
if(parseInt(warnNumCount)==0){
res.push(
{
name: '正常',
value:parseInt(joinAllManCount)
}
);
}else{
res.push(
{
name: '预警',
value: parseInt(warnNumCount)
},
{
name: '正常',
value:parseInt(joinAllManCount)-parseInt(warnNumCount)
}
);
}
}else{
res.push(
{
name: '预警',
value: parseInt(warnNumCount)
}
);
}
return res;
}
};
})();
<!--调用公共方法并传递参数-->
var answerWarnOption = LookData(warnStates.warnStatesData(warnNum,joinAllMan));
<!-- 初始化 echarts -->
//注:当页面要渲染多个饼状图的时候,有多少个图就分别初始化多少次,传递对应的ID即可
var answerWarnChart = echarts.init(document.getElementById('answerWarn'));
<!--公共 echarts 配置参数 封装--> (重点,fn为需要呈现的数据值)
function LookData(fn){
return{
title : {
text: '',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{b}: {d}%"
},
series : [
{
name:'',
type:'pie',
selectedMode: 'single',
radius : '80%',
center: ['50%', '50%'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
data: fn,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
}
<!-- 初始化变量渲染公共参数-->
answerWarnChart.setOption(answerWarnOption);
<!--HTML 代码-->
//注:需要渲染Echarts所在的div必须设置宽高,因为echarts中Canvas绘制图表时需要根据外层盒子的宽高来渲染
<div id="answerState" style="width: 500px;height: 300px;"></div>
<div id="answerWarn" style="width: 500px;height: 300px;"></div>