vue圆形进度条

  
<template>
  <div class="circle-chart">
    <div class="donut-chart">
      <div id="section1" class="clip">
        <div class="item"></div>
      </div>
      <div id="section2" class="clip">
        <div class="item"></div>
      </div>
      <div id="section3" ref="section3" class="clip">
        <div class="item" ref="section3Item"></div>
      </div>
      <div class="center"><a><span class="percent" ref="percent">0</span><small>%</small></a></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    progress:{
      type:Number,
      default:0
    }
  },
  data() {
    return {
    }
  },
  watch: {
    progress(val){
      if(val<=100){
        this.updateDonut(val)
      }
    }
  },  
  beforeDestroy() {
    // 清除旧组件的样式标签
  },
  methods: {
    updateDonut (percent) {
      // 圆形进度
      let offset = 0
      let $el = this.$refs.section3
      let $elItem = this.$refs.section3Item
      let $txt = this.$refs.percent
      if (percent < 50) {
        offset = (360 / 100) * percent
        $el.style.webkitTransform = $el.style.msTransform = $el.style.MozTransform = 'rotate(' + offset + 'deg)'
        $elItem.style.webkitTransform = $elItem.style.msTransform = $elItem.style.MozTransform = 'rotate(' + (180 - offset) + 'deg)'
        $elItem.style.backgroundColor = '#e3e3e3'
      } else {
        offset = ((360 / 100) * percent) - 180
        $el.style.webkitTransform = $elItem.style.msTransform = $el.style.MozTransform = 'rotate(180deg)'
        $elItem.style.webkitTransform = $elItem.style.msTransform = $elItem.style.MozTransform = 'rotate(' + offset + 'deg)'
        $elItem.style.backgroundColor = '#FF9300'
      }
      $txt.innerHTML = percent
    }
  },
  mounted() {
    this.updateDonut(0)
  },
}
</script>
<style lang="scss" scoped>
.circle-chart {
    .donut-chart {
      position: relative;
      width: 70px;
      height: 70px;
      border-radius: 100%
    }
    .donut-chart .center {
      background: #fff;
      border-radius: 50%;
      width: 70%;
      height: 70%;
      left: 15%;
      top: 15%;
      position: absolute;
      a {
        color: #000;
        display: block;
        font-size: 13px;
        font-weight: 700;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%);
        small {
          font-size: 14px;
        }
      }
    }
    .clip {
      border-radius: 50%;
      clip: rect(0px 70px 70px 35px);
      height: 100%;
      position: absolute;
      width: 100%;
    }  
    .item {
      border-radius: 50%;
      clip: rect(0px 35px 70px 0px);
      height: 100%;
      position: absolute;
      width: 100%;
    } 
    #section1 {
      transform: rotate(0deg);
    }
    #section1 .item {
      background-color: #FF9300;
      transform: rotate(180deg);
    }
    #section2 {
      transform: rotate(180deg);
    } 
    #section2 .item {
      background-color: #e3e3e3;
      transform: rotate(180deg);
    }
}
</style>