纯css实现百分比环形图

骑猪看日落 2022-12-14 13:54 561阅读 0赞

### 一、原型图 ###

![在这里插入图片描述][20201014104757592.jpg_pic_center]

### 二、思路 ###

第1层，绘制饼图（shape）和灰色细环部分（bottom），其中shape是根元素，所有元素都将相对shape做绝对定位。根据原型图的显示效果，对bottom的定位做一定的调整如图所示：

![在这里插入图片描述][2020101413520320.jpg_pic_center]

第2层，绘制左环（ring-left）和右环（ring-right）如图所示：

![在这里插入图片描述][20201014135221957.jpg_pic_center]

第3层，绘制遮罩环（.ring-hide），调整与第1层的环吻合，用于遮住右环和转动到右边区域的左环部分，制作出扇形图的效果，如图所示：  
![在这里插入图片描述][20201014135235919.jpg_pic_center]  
第4层，显示百分比值的圆（.cover)，层级最高，放在中间做遮罩，制作出环状效果。如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg_size_16_color_FFFFFF_t_70_pic_center]

从以上几个图可以看出两种情况：

1.  当百分比值大于50时，遮罩层不显示，右环显示，转动左环，左环跟右环部分重叠。
2.  当百分比值小于50时，遮罩层显示，转动左环，遮罩层遮住全部的右环和部分左环，显示出扇形环的效果。

### 三、代码 ###

.shape{ 
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        border-radius: 50%;
        font-weight: bold;
        color: #fff;
        position: relative;
    }
    .shape>div{ 
        position: absolute;
    }
    .shape>.bottom{ 
        width: 85px;
        height: 85px;
        border-radius: 50%;
        background-color: #fff;
        border: 4px solid #c0c3c2;
        top: 3px;
        left: 3px;
    }
    .shape>.cover{ 
        border-radius: 50%;
        width: 79px;
        height: 79px;
        background-color: #FFF;
        z-index: 10;
        top: 10px;
        left: 10px;
        color: #000;
        line-height: 79px;
        font-size: 18px;
    }
    .shape>.ring-left{ 
        width: 50px;
        height: 100px;
        border-radius: 50px 0 0 50px;
        background-color: #00ccf6;
        transform-origin: right center;
        transform: rotate(0deg);
    }
    .shape>.ring-right{ 
        width: 50px;
        height: 100px;
        border-radius: 0 50px 50px 0;
        background-color: #00ccf6;
        left: 50px;
        transform-origin: left center;
        transform: rotate(0deg);
    }
    .shape>.ring-hide{ 
        z-index: 9;
        border-radius: 0 51px 51px 0;
        width: 52px;
        height: 102px;
        background-color: #fff;
        top: -1px;
        left: 49px;
        transform-origin: left center;
        display: none;
        transform: rotate(0deg);
    }
    .shape>.ring-hide>div{ 
        z-index: 10;
        border-radius: 0 50px 50px 0;
        width: 43px;
        height: 85px;
        background-color: transparent;
        top: 4px;
        left: 0px;
        color: #000;
        line-height: 85px;
        position: absolute;
        border: 4px solid #c0c3c2;
        border-left: 0;
    }

### 四、效果 ###

//调用
    setPercentValue(-45);
    setPercentValue(0);
    setPercentValue(45.624);
    setPercentValue(50.0);
    setPercentValue(78.4);
    setPercentValue(98);
    setPercentValue(100);
    setPercentValue(150);
    setPercentValue("hahaha");

![在这里插入图片描述][20201014133043462.jpg_pic_center]

[20201014104757592.jpg_pic_center]: /images/20221123/040057d5552d4ec4be2fd5feb128bdc1.png
[2020101413520320.jpg_pic_center]: /images/20221123/35fe8816a60e4d67b4e8f5c8092f936f.png
[20201014135221957.jpg_pic_center]: /images/20221123/e1f1871a1231490d8e69ad59dba2d0eb.png
[20201014135235919.jpg_pic_center]: /images/20221123/46d7af3a9d9f4d0ea4fc9ab8c2e8ed46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c0d1ad0eafcb4259a406e5fd7d7d5201.png
[20201014133043462.jpg_pic_center]: /images/20221123/330242420e594cbcb1cd0c210b787c4d.png