用css制作圆环图表 (vue,sass)

效果图:

思路 ：在一个容器里再放两个矩形，每个矩形都占一半，给这两个矩形都设置溢出隐藏，当去旋转矩形里面的圆形的时候，溢出部分就被隐藏掉了，这样就可以达到想要的效果。

代码-html：

 1 <div class="income-divided-box">
 2      <div class="income-divided-box-title">物业分成：{{Number(income.propertyelectronics)+Number(income.propertycash)}}元</div>
 3      <div class="income-divided-box-circle">
 4           <div class="circle-top">
 5                <div class="circle-left">
 6                     <div class="circle-top-txt">电子</div>
 7                     <div class="circle-top-num">{{income.propertyelectronics}}元</div>
 8                </div>
 9                <div class="circle-right">
10                     <div class="circle-right-t"></div>
11                     <div class="circle-right-b"></div>
12                </div>
13           </div>
14           <div class="circle-btm">
15                <div class="circle-left">
16                     <div class="circle-left-t"></div>
17                     <div class="circle-left-b"></div>
18                </div>
19                <div>
20                     <div class="circle-btm-txt">现金</div>
21                     <div class="circle-btm-num">{{income.propertycash}}元</div>
22                 </div>
23             </div>
24             <div class="circle-out">
25                  <div class="out-wrapper right">
26                        <div class="out-circleProgress out-rightcircle" :style="{'-webkit-transform':'rotate('+prooutlDeg+')' }"></div>
27                  </div>
28                  <div class="out-wrapper left">
29                        <div class="out-circleProgress out-leftcircle" :style="{'-webkit-transform':'rotate('+prooutrDeg+')' }"></div>
30                  </div>
31                  <div class="circle-in">
32                        <div class="circle-in-wrapper">
33                             <div class="wrapper right">
34                                 <div class="circleProgress rightcircle" :style="{'-webkit-transform':'rotate('+proinlDeg+')' }"></div>
35                             </div>
36                             <div class="wrapper left">
37                                 <div class="circleProgress leftcircle" :style="{'-webkit-transform':'rotate('+proinrDeg+')' }"></div>
38                             </div>
39                         </div>
40                   </div>
41            </div>
42      </div>
43 </div>

 

 

代码-css：

.circle-out{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90px;
    width: 90px;
    margin: 50px auto;
    position: relative;
    .out-wrapper{
         width: 45px;
         height: 90px;
         position: absolute;
         top:0;
         overflow: hidden;
         &.right{
            right:0;
         }
         &.left{
             left:0;
                              
         }
         .out-circleProgress{
              width: 85px;
              height: 85px;
              border:2.5px solid #e3f9e3;
              border-radius: 50%;
              position: absolute;
              top:0;
              /*transform: rotate(45deg);*/
         }
         .out-rightcircle{
              border-top:2.5px solid #74e172;
              border-right:2.5px solid #74e172;
              right:0;
         }
         .out-leftcircle{
              border-bottom:2.5px solid #74e172;
              border-left:2.5px solid #74e172;
              left:0;
              /*transform: rotate(150deg);*/
          }
    }
    .circle-in{
         .circle-in-wrapper{
              height: 64px;
              width: 64px;
              margin: 50px auto;
              position: relative;
              /*border:1px solid #ddd;*/
              .wrapper{
                   width: 32px;
                   height: 64px;
                   position: absolute;
                   top:0;
                   overflow: hidden;
                   &.right{
                        right:0;             
                   }
                   &.left{
                        left:0;                  
                   }
                   .circleProgress{
                        width: 60px;
                        height: 60px;
                        border:2.5px solid #fff2ce;
                        border-radius: 50%;
                        position: absolute;
                        top:0;
                        transform: rotate(45deg);
                   }
                  .rightcircle{
                        border-top:2.5px solid #ffbd0a;
                        border-right:2.5px solid #ffbd0a;
                        right:0;
                  }
                  .leftcircle{
                        border-bottom:2.5px solid #ffbd0a;
                        border-left:2.5px solid #ffbd0a;
                        left:0;
                        transform: rotate(150deg);
                 }
            }
        }
    }
}

 

代码-js：

// 圆环弧度显示设置
          setDeg(all,num){
              if(all == 0 || all == 0.00){
                  return (['225deg','225deg'])
              }
              var out = Number(num)/Number(all)*180
              var outr = out - 90 > 0 ? out-90 : 0 //右侧半圆
              var outl = out - 90 < 0 ? out : 90   // 左侧半圆
              var outlDeg = outr*2 + 225 +'deg' //右侧半圆
                var outrDeg = outl*2 + 225 +'deg' // 左侧半圆
                return ([outrDeg,outlDeg])
          }
注：.wrapper 的overflow:hidden; 起着关键性作用
posted @ 2017-11-14 12:07  世界很大梦想很远  阅读(2853)  评论(0)  编辑  收藏  举报