環(huán)形漸變進(jìn)度條

代碼

<template>
<div class="progress-wrap">
 <!--// 進(jìn)度條代碼-->
  <div class="progress-item">
   <el-progress type="circle" :percentage="percentage" :stroke-width="18" :width="120"
    :format="format" class="my_pross"></el-progress>    
  </div>
  <!-- // 新建 SVG -->
<div class="svg-box">
  <!-- 漸變綠色 -->
  <svg width="100%" height="100%">
   <defs>
    <linearGradient id="green" x1="100%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color: rgb(186, 255, 110)" stop-opacity="1"></stop>
    <stop offset="100%" style="stop-color: rgb(44, 185, 52)" stop-opacity="1"></stop>
     </linearGradient>
  </defs>
 </svg>
  <!-- 漸變黃色 -->
  <svg width="100%" height="100%">
    <defs>
      <linearGradient id="orange" x1="10%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color: rgb(255, 217, 68)" stop-opacity="1"></stop>
    <stop offset="100%" style="stop-color: rgb(255, 147, 39)" stop-opacity="1"></stop>
      </linearGradient>
    </defs>
  </svg>
<!-- svg 內(nèi)陰影 -->
  <svg width="100%" height="100%">
    <filter id="innershadow" x="-50%" y="-50%" width="200%" height="200%">
      <feComponentTransfer in="SourceAlpha">
        <feFuncA type="table" tableValues="1 0" />
      </feComponentTransfer>
      <feGaussianBlur stdDeviation="2" />
      <feOffset dx="0" dy="1" result="offsetblur" />
      <feFlood flood-color="#ddd" floodOpacity="0.1" result="color" />
      <feComposite in2="offsetblur" operator="in" />
      <feComposite in2="SourceAlpha" operator="in" />
      <feMerge>
        <feMergeNode in="SourceGraphic" />
          <feMergeNode />
      </feMerge>
    </filter>
  </svg>
</div>
</div>

使用 js 或 css 修改進(jìn)度條樣式，2 種方法視情況取一

js修改樣式，有多個(gè)進(jìn)度條且顏色不一時(shí)

<script>
// 有多個(gè)進(jìn)度條時(shí)傳入序號(hào) i 進(jìn)行區(qū)分，percentage為進(jìn)度
methods: {
  svgColor(i, percentage) {
    const progress = document.getElementsByClassName('my_pross')[i];
    const svg = progress.querySelector('svg > path:nth-child(2)');
    if ( percentage < 60 ) {
      svg.style.stroke = 'url(#orange)'
    } else {
      svg.style.stroke = 'url(#green)'
    }
  },
// 環(huán)內(nèi)顯示的內(nèi)容
  format(percentage) {
    percentage > 60 ? '優(yōu)秀' : `${percentage}%`
  }
}

</script>

css 修改樣式，顏色統(tǒng)一時(shí)

<style lang="scss">

.progress-item {
// 進(jìn)度條顏色
  svg>path:nth-child(2) {
   stroke: url(#green);
  }
// 修改圓環(huán)底色
  .el-progress-circle__track {
    stroke: #F0F0F0;
    filter: url(#innershadow);  // 圓環(huán)底色內(nèi)陰影
    stroke-width: 10px !important;  // 大小
  }
// 修改進(jìn)度條方向（原是順時(shí)針加載，改為逆時(shí)針加載）
  .my_pross {
    transform: rotateY(180deg);
  }
// 修改進(jìn)度條內(nèi)容方向
  .el-progress--circle .el-progress__text, .el-progress--dashboard .el-progress__text {
    transform: rotateY(180deg) translate(0, -50%);
   }
}
</style>

環(huán)形漸變進(jìn)度條