java如何画百分比圆环_css实现百分比环形图（圆环图）和一点细节

实现的效果

实现不难，但是有一点细节，所以写一下。

css：

//最外面的一个div

.annulusBasics {

width : 94px;

height : 94px;

position : relative;

overflow : hidden;

border-radius: 50%;

text-align : center;

z-index : 1;

}

//圆环中间的白色

.centerCircle {

position : absolute;

z-index : 10;

border-radius: 50%;

width : 71px;

height : 71px;

background : #fff;

transform : translate(12px, 12px);

line-height : 71px;

}

//圆环百分比时出现圆环边框的颜色

.annulusOuter {

position : absolute;

top : 0;

left : 0;

width : 94px;

height : 94px;

border : 12px solid #FF7F69;

border-radius: 50%;

}

//左边遮住圆环颜色的长方形

.leftRectangle {

position : absolute;

background : #EBEEF5;

width : 47px;

height : 94px;

transform-origin: right;

}

//右边遮住圆环颜色的长方形

.rightRectangle {

position : absolute;

background : #EBEEF5;

transform-origin: left;

left : 47px;

width : 47px;

height : 94px;

transform : rotate(0deg);

}

//弥补hidde在移动端失效的圆环

.repairAnnulus{

position : absolute;

width : 94px;

height : 94px;

z-index : 20;

border-radius: 50%;

box-sizing : content-box;

//改外边框的时候，位置也要改下

border : 20px solid #ffffff;

top : -20px;

left : -20px;

}

稍微提一下，我上面的代码是基于为box-sizing默为 border-box 的情况下，所以直接复制的时候要注意下。

记录的第一个点：

为什么写一个.annulusOuter作为圆环的边框颜色，而不是直接在.annulusBasics写一个background作为圆环的背景色。是因为用背景色会造成像光晕一样的效果：

我把.annulusBasics的background设置为黑色可以看得明显一点。

记录的第二个点：

在pc端上不会出现这个问题，但是在移动端的时候，会出现overflow: hidden失效的情况，所以加了一个.repairAnnulus

移动端上失效的效果

下面是react中的JSX，根据classWrongScore不同的值呈现不同的效果

{(Math.floor(classWrongScore * 1000) / 10).toFixed()}%

{classWrongScore > 0.5 ?

{classWrongScore < 0.5 ?

:

{/*加下面一个div是因为hidde在移动端失效导致样式不对*/}

下面是html，超过50%的时候，修改.leftRectangle的角度，小于50%的时候，修改.rightRectangle的角度。

40%

{/*加下面一个div是因为hidde在移动端失效导致样式不对*/}