正文
用css制作圆环图表 (vue,sass)
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
效果图:
思路 ：在一个容器里再放两个矩形，每个矩形都占一半，给这两个矩形都设置溢出隐藏，当去旋转矩形里面的圆形的时候，溢出部分就被隐藏掉了，这样就可以达到想要的效果。
?xml version="1.0" encoding="UTF-8"? 代码-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);
}
}
}
}
}
?xml version="1.0" encoding="UTF-8"? 代码-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; 起着关键性作用
