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

效果图:

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

代码-html：

 <div class="income-divided-box">
      <div class="income-divided-box-title">物业分成：{{Number(income.propertyelectronics)+Number(income.propertycash)}}元</div>
      <div class="income-divided-box-circle">
           <div class="circle-top">
                <div class="circle-left">
                     <div class="circle-top-txt">电子</div>
                     <div class="circle-top-num">{{income.propertyelectronics}}元</div>
                </div>
                <div class="circle-right">
                     <div class="circle-right-t"></div>
                     <div class="circle-right-b"></div>
                </div>
           </div>
           <div class="circle-btm">
                <div class="circle-left">
                     <div class="circle-left-t"></div>
                     <div class="circle-left-b"></div>
                </div>
                <div>
                     <div class="circle-btm-txt">现金</div>
                     <div class="circle-btm-num">{{income.propertycash}}元</div>
                 </div>
             </div>
             <div class="circle-out">
                  <div class="out-wrapper right">
                        <div class="out-circleProgress out-rightcircle" :style="{'-webkit-transform':'rotate('+prooutlDeg+')' }"></div>
                  </div>
                  <div class="out-wrapper left">
                        <div class="out-circleProgress out-leftcircle" :style="{'-webkit-transform':'rotate('+prooutrDeg+')' }"></div>
                  </div>
                  <div class="circle-in">
                        <div class="circle-in-wrapper">
                             <div class="wrapper right">
                                 <div class="circleProgress rightcircle" :style="{'-webkit-transform':'rotate('+proinlDeg+')' }"></div>
                             </div>
                             <div class="wrapper left">
                                 <div class="circleProgress leftcircle" :style="{'-webkit-transform':'rotate('+proinrDeg+')' }"></div>
                             </div>
                         </div>
                   </div>
            </div>
      </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:;
         overflow: hidden;
         &.right{
            right:;
         }
         &.left{
             left:;

         }
         .out-circleProgress{
              width: 85px;
              height: 85px;
              border:2.5px solid #e3f9e3;
              border-radius: 50%;
              position: absolute;
              top:;
              /*transform: rotate(45deg);*/
         }
         .out-rightcircle{
              border-top:2.5px solid #74e172;
              border-right:2.5px solid #74e172;
              right:;
         }
         .out-leftcircle{
              border-bottom:2.5px solid #74e172;
              border-left:2.5px solid #74e172;
              left:;
              /*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:;
                   overflow: hidden;
                   &.right{
                        right:;
                   }
                   &.left{
                        left:;
                   }
                   .circleProgress{
                        width: 60px;
                        height: 60px;
                        border:2.5px solid #fff2ce;
                        border-radius: 50%;
                        position: absolute;
                        top:;
                        transform: rotate(45deg);
                   }
                  .rightcircle{
                        border-top:2.5px solid #ffbd0a;
                        border-right:2.5px solid #ffbd0a;
                        right:;
                  }
                  .leftcircle{
                        border-bottom:2.5px solid #ffbd0a;
                        border-left:2.5px solid #ffbd0a;
                        left:;
                        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; 起着关键性作用