根据中间图示内容，实现环形进度条功能

根据中间图示内容，实现环形进度条功能，废话不多说，来看代码吧

以下是代码

<template>
 <el-card class="card-container-1">
  <div class="circle">
     <div class="icon icon-1">
       <span>居置</span>
       <div></div>
     </div>
     <div class="icon icon-2">
       <div></div>
       <span>居位</span>
     </div>
     <div class="icon icon-3">
       <span>居仓</span>
       <div></div>
     </div>
     <div class="icon icon-4">
       <div></div>
       <span>居议</span>
     </div>
     <div class="circle-large">
       <div class="wrapper-left">
         <div class="circle-left"></div>
       </div>
       <div class="wrapper-right">
         <div class="circle-right"></div>
       </div>
       <div class="container">
         <div>
           <span>{{ percentage.juzhi }}%</span>
         </div>
         <div>
           <span>{{ percentage.juwei }}%</span>
         </div>
         <div>
           <span>{{ percentage.jucang }}%</span>
         </div>
         <div>
           <span>{{ percentage.juyi }}%</span>
         </div>
       </div>
     </div>
   </div>
 </el-card>
</template>
<scrpit>
	getProjectAll(this.uuid).then((res) => {
      this.projectBase = res.data.projectBase
      this.depot = res.data.depot
      this.fourHome = res.data.fourHome
      this.circleListD.forEach((item, index) => {
        if (item.name === '居置') {
          this.circleList[3] = {
            name: item.name,
            percentage: this.fourHome.home * 100
          }
          this.percentage.juzhi = this.fourHome.home * 100
        } else if (item.name === '居位') {
          this.circleList[0] = {
            name: item.name,
            percentage: this.fourHome.position * 100
          }
          this.percentage.juwei = this.fourHome.position * 100
        } else if (item.name === '居议') {
          this.circleList[1] = {
            name: item.name,
            percentage: this.fourHome.meeting * 100
          }
          this.percentage.juyi = this.fourHome.meeting * 100
        } else if (item.name === '居仓') {
          this.circleList[2] = {
            name: item.name,
            percentage: this.fourHome.ikura * 100
          }
          this.percentage.jucang = this.fourHome.ikura * 100
        }
      })
      let round = 0
      let circleLeft = this.$refs['circle-left']
      let circleRight = this.$refs['circle-right']
      for (let i = 0; i < this.circleList.length; i++) {
        let item = this.circleList[i]
        if (item.name === '居位' && item.percentage < 100) {
          round = 0.9 * item.percentage - 180
          circleRight.style.transform = `rotate(${round}deg)`
          break
        } else if (item.name === '居议' && item.percentage < 100) {
          round = 0.9 * (item.percentage + 100) - 180
          circleRight.style.transform = `rotate(${round}deg)`
          break
        } else if (item.name === '居仓' && item.percentage < 100) {
          console.log('1')
          round = 0.9 * item.percentage + 180
          circleLeft.style.transform = `rotate(${round}deg)`
          break
        } else if (item.name === '居置' && item.percentage < 100) {
          round = 0.9 * (item.percentage + 100) + 180
          console.log(round)
          circleLeft.style.transform = `rotate(${round}deg)`
          break
        }
      }
      this.projectOverview = res.data.projectOverview
      this.projectPositionNames = res.data.projectPositionNames
    })
</script>
<style scope lang='scss'>
.card-container-1 {
  margin-top: 10px;
  border-radius: 8px;
  height: 200px;
  $w: 100px;
  .circle {
    text-align: center;
    position: relative;
    .icon {
      position: absolute;
      $index: 1;
      @each $i in #21d4de, #00d666, #ff8054, #ffa832 {
        &.icon-#{$index} {
          @if $index == 1 {
            top: 10px;
            left: 10%;
          } @else if $index == 2 {
            top: 10px;
            right: 10%;
          } @else if $index == 3 {
            left: 10%;
            bottom: 10px;
          } @else if $index == 4 {
            right: 10%;
            bottom: 10px;
          }
          div {
            vertical-align: middle;
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: $i;
            margin: 0 6px;
          }
        }
        $index: $index + 1;
      }
    }
    .circle-large {
      display: flex;
      width: 160px;
      height: 160px;
      margin: 0 auto;
      border: 20px solid #c4ddff;
      border-radius: 50%;
      position: relative;
      .wrapper-left,
      .wrapper-right {
        overflow: hidden;
        position: absolute;
        top: -20px;
        height: 160px;
        width: 80px;
      }
      .wrapper-left {
        left: -20px;
        .circle-left {
          background-color: #fff;
          height: 100%;
          border-top-left-radius: 80px;
          border-bottom-left-radius: 80px;
          border: 20px solid #3585ff;
          border-right: 20px solid transparent;
          transform-origin: center right;
          transform: rotate(180deg);
        }
        &::after {
          content: '';
          background: url('../../../../static/icon/left.png') no-repeat;
          position: absolute;
          height: 20px;
          width: 50px;
          transform: rotate(2deg);
          bottom: -8px;
          right: 3px;
        }
      }
      .wrapper-right {
        right: -20px;
        .circle-right {
          background-color: #fff;
          height: 100%;
          border-top-right-radius: 80px;
          border-bottom-right-radius: 80px;
          border: 20px solid #3585ff;
          border-left: 20px solid transparent;
          transform-origin: center left;
          overflow: hidden;
        }
        &::after {
          content: '';
          background: url('../../../../static/icon/right.png') no-repeat;
          position: absolute;
          height: 30px;
          width: 50px;
          transform: rotate(2deg);
          top: -4px;
          left: 3px;
        }
      }
      .container {
        position: absolute;
        top: (100%/12);
        left: (100%/12);
        z-index: 999;
        margin: 0 auto;
        width: $w;
        height: $w;
        display: flex;
        flex-wrap: wrap;
        div {
          width: 50%;
          $index: 1;
          position: relative;
          @each $i in #21d4de, #00d666, #ff8054, #ffa832 {
            &:nth-child(#{$index}) {
              background-color: $i;
              @if $index == 1 {
                border-top-left-radius: ($w/2);
                text-align: right;
                &::after {
                  content: '';
                  height: 180px;
                  top: -40px;
                  border-left: 1.5px solid #ccc;
                  position: absolute;
                  z-index: 999;
                }
              } @else if $index == 2 {
                border-top-right-radius: ($w/2);
                text-align: left;
              } @else if $index == 3 {
                border-bottom-left-radius: ($w/2);
                text-align: right;
                &::after {
                  content: '';
                  width: 180px;
                  left: -40px;
                  border-top: 1.5px solid #ccc;
                  position: absolute;
                  z-index: 999;
                }
              } @else if $index == 4 {
                border-bottom-right-radius: ($w/2);
                text-align: left;
              }
              span {
                position: absolute;
                display: inline-block;
                color: #fff;
                font-size: 14px;
                @if $index == 1 {
                  bottom: 5px;
                  right: 3px;
                } @else if $index == 2 {
                  bottom: 5px;
                  left: 3px;
                } @else if $index == 3 {
                  top: 5px;
                  right: 3px;
                } @else if $index == 4 {
                  top: 5px;
                  left: 3px;
                }
              }
            }
            $index: $index + 1;
          }
        }
      }
    }
</style>