jQuery.circliful.min.js制作环形报表

       项目或文件中用报表来展示数据，具有极高的观赏性和实用性，因此在诸多项目中关于对比型的数据，采用环形报表不失为一种很好的方式。
       在word中添加报表是还是很简单的，各种类型模板模板，那如果用代码的方式写出一个带有环形报表的页面呢？这其实也是一个很简单的方式。canves就是很方便的选择。
       现阶段用css3+canves;或者用css3+jquery都能够很好的制作出环形报表，如下；
css+jQuery方式：

body部分：

  

        

            

            

             
70%
        
        立即领取
  

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部分：

   至此，用css+jquery方式展示环形报表便可以实现，除此之外还可以用canves实现也可以用插件；

下面是插件jquery.circliful.js方式实现环形报表；
css部分：

body部分：

     

        已领
     
     

     立即领取

js部分：

for(var i=0;i

       相对比，用插件展示的环形报表用起来还是更顺手些，虽然其中出现的bug比较难调，但是都能找到样式出bug的位置，做适配还是更方便一些，而css+js方式的报表虽然更简洁，但是用起来却有一些bug的适配情况不进入任意，且外围多出的边线一直没找到方法如何删除