react 写百分比的圆环

最新推荐文章于 2020-11-25 16:53:50 发布

bug大师

最新推荐文章于 2020-11-25 16:53:50 发布

阅读量735

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_43492777/article/details/107320574

版权

js 专栏收录该内容

54 篇文章 0 订阅

订阅专栏

 <View className={styles.contentImages}>
            <View className={[styles.percentCircle, styles.percentCircleLeft]}>
              {classWrongScore > 0.5 ? <View className={styles.leftContent}
                style={{transform: `rotate(${180 * classWrongScore}deg)`}}
              > </View> :
                <View className={styles.leftContent}> </View>
              }
            </View>
            <View className={[styles.percentCircle, styles.percentCircleRight]}>
              {classWrongScore < 0.5 ?
                <View className={styles.rightContent}
                  style={{transform: `rotate(${360 * classWrongScore}deg)`}}
                > </View> :
                <View className={styles.rightContent} style={{background: '#fe8a1c'}}> </View>
              }
            </View>
            <View className={styles.textCircle}>
              <View className={styles.singleFieldFlow}>单场流水</View>
              <View className={styles.singleFieldFlow}>￥{numToMyriad(data.singleFieldFlow)}</View>
            </View>
          </View>

  .contentImages {
    position:relative;
    overflow: hidden;
    display:inline-block;
    //border: solid 4px #FF7818;
    width: 200px;
    height:200px;
    .singleFieldFlow {
      font-size: 12PX;
      font-weight: 500;
      color: #242424;
    }
  }
  
  .percentCircle {
    position:absolute;
    height:100%;
    background:#FF8B17;
    overflow: hidden;
  }
  .percentCircleRight {
    right:0;
    width:100px;
    border-radius: 0 100px 100px 0/0 100px 100px 0;
  }
  .percentCircleRight .rightContent{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    transform-origin:left center;
    transform: rotate(0deg);
    border-radius: 0 100px 100px 0/0 100px 100px 0;
    background:#F9C975;
  }
  .percentCircleLeft {
    width:102px;
    border-radius: 100px 0 0 100px/100px 0 0 100px;
  }

  .percentCircleLeft .leftContent {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    transform-origin:right center;
    transform: rotate(0deg);
    border-radius: 100px 0 0 100px/100px 0 0 100px;
    background:#F9C975;
  }

  .textCircle {
    position: absolute;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height:80%;
    width:80%;
    left:10%;
    top:10%;
    border-radius:100%;
    background:#ffffff;
  }

在这里插入图片描述
原理是两个半圆底部放了一个圆
transform-origin:right center; 通过这个属性决定圆环的旋转的圆心
transform: rotate(0deg); 旋转的角度
border-radius: 100px 0 0 100px/100px 0 0 100px; 圆角