项目或文件中用报表来展示数据，具有极高的观赏性和实用性，因此在诸多项目中关于对比型的数据，采用环形报表不失为一种很好的方式。
在word中添加报表是还是很简单的，各种类型模板模板，那如果用代码的方式写出一个带有环形报表的页面呢？这其实也是一个很简单的方式。canves就是很方便的选择。
现阶段用css3+canves;或者用css3+jquery都能够很好的制作出环形报表，如下；
css+jQuery方式：
body部分：
<div class="coupon_right">
<div class="circle" style="left:0">
<div class="pie_left"><div class="lefttext"></div></div>
<div class="pie_right"><div class="righttext"></div></div>
<div class="mask"><span>70</span>%</div>
</div>
<a class="coupon_right_a1">立即领取</a>
</div>
css部分：
.coupon_right{
float: right;
position: relative;
width:5em;
text-align: center;
margin:0.5em 0 ;
}
.coupon_right div{
margin: 0;padding: 0;
}
.coupon_right_a1{
margin-top: 5.5em;
width: 5em;
text-align: center;
height: 1.5em;
display: block;
color: #ffffff;
background: #4b9dff;
-moz-box-shadow:0.1em 0.1em 0.1em #e6f2ff;
-webkit-box-shadow:0.1em 0.1em 0.1em #e6f2ff;
box-shadow:0.1em 0.1em 0.1em #e6f2ff;
border-radius: 1em;
font-size: 0.9em;
}
.coupon_right_a1:visited,.coupon_right_a1:hover{
color: #ffffff;
}
.coupon_right_a1:active{
background: rgba(75, 157, 255, 0.8);
-moz-box-shadow:0.1em 0.1em 0.1em #e6f2ff;
-webkit-box-shadow:0.1em 0.1em 0.1em #e6f2ff;
box-shadow:0.1em 0.1em 0.1em #e6f2ff;
}
.cpCircle {
width: 4.4em;
height: 4.4em;
position: absolute;
border-radius: 50%;
overflow: hidden;
background: #4b9dff;
-moz-box-shadow:0.1em 0.1em 0.1em #e6f2ff;
-webkit-box-shadow:0.1em 0.1em 0.1em #e6f2ff;
box-shadow:0.1em 0.1em 0.1em #e6f2ff;
}
.cpie_left, .cpie_right {
width: 4.4em;
height: 4.4em;
position: absolute;
overflow: hidden;
}
.clefttext, .crighttext {
width:4.4em;
height:4.4em;
background:#e6f2ff;
border-radius: 50%;
overflow: hidden;
position: absolute;
}
.cpie_right, .crighttext {
clip:rect(0,auto,auto,2.23em);
}
.cpie_left, .clefttext {
clip:rect(0,2.23em,auto,0);
}
.cp_mask {
width: 3.8em;
height: 3.8em;
border-radius: 50%;
left:0.3em;
top: 0.3em;
background: #ffffff;
position: absolute;
text-align: center;
line-height:3.8em;
font-size: 1em;
font-weight: bold;
color: #4b9dff;
}
js部分：
<script type="text/javascript">
function addPercent(i,num){
if(num>100)return;
num=num*3.6;
if(num<=180){
$(".circle").eq(i).find(".righttext").css("transform","rotate(" + num + "deg)");
}else{
$(".circle").eq(i).find(".righttext").css("transform","rotate(180deg)");
$(".circle").eq(i).find(".lefttext").css("transform","rotate(" + (num - 180) + "deg)");
}
}
var i=0;
$(".circle").each(function() {
var num = $(this).find("span").html();
addPercent(i,num);
i++;
});
</script>
至此，用css+jquery方式展示环形报表便可以实现，除此之外还可以用canves实现也可以用插件；
下面是插件jquery.circliful.js方式实现环形报表；
css部分：
<style type="text/css">
body,.mui-content{
background: #F6F6F8 !important;
}
.coupon_wu p{
height:2em;
text-align: center;
}
.myStat2{
height: 60px !important;
}
.myStat2 canvas{
position: absolute;
top: -2px;left: -3px;
width: 70px;
height: 70px;
}
.cpCircle{
background: #FFFFFF;
}
.circle-text{
margin-left: 0.5em !important;
font-size: 1em !important;
}
.circle-info{
line-height: 6em !important;
}
.coupon_right{
color: #4B9DFF;
}
.coupon_right_a1{
margin-top: 0.5em;
}
</style>
body部分：
<div class="coupon_right" v-show="item.isRightTyeShow">
<div style="position: absolute;top: 1em; width: 94%;">
<span style="margin:auto;font-size: 0.8em;">已领</span>
</div>
<div class="myStat2" data-dimension="60" data-text="{{item.num}}%" data-info="" data-width="3" data-fontsize="6" data-percent="{{item.num}}" data-fgcolor="#43B0F8" data-bgcolor="#eee"></div>
<a class="coupon_right_a1" @click="bellShow(item)">立即领取</a>
</div>
js部分：
for(var i=0;i<items.length;i++){
items[i].num = parseInt(items[i].over_count/items[i].plan_count*100);
}
vm.$nextTick(function(){
for(var i=0;i<vm.items.length;i++){
$('.myStat2').eq(i).circliful();
}
})
相对比，用插件展示的环形报表用起来还是更顺手些，虽然其中出现的bug比较难调，但是都能找到样式出bug的位置，做适配还是更方便一些，而css+js方式的报表虽然更简洁，但是用起来却有一些bug的适配情况不进入任意，且外围多出的边线一直没找到方法如何删除
网友评论