element 环形进度条渐变

环形渐变进度条

代码

<template>
<div class="progress-wrap">
 <!--// 进度条代码-->
  <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 内阴影 -->
  <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 修改进度条样式，2 种方法视情况取一

js修改样式，有多个进度条且颜色不一时

<script>
// 有多个进度条时传入序号 i 进行区分，percentage为进度
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)'
    }
  },
// 环内显示的内容
  format(percentage) {
    percentage > 60 ? '优秀' : `${percentage}%`
  }
}

</script>

css 修改样式，颜色统一时

<style lang="scss">

.progress-item {
// 进度条颜色
  svg>path:nth-child(2) {
   stroke: url(#green);
  }
// 修改圆环底色
  .el-progress-circle__track {
    stroke: #F0F0F0;
    filter: url(#innershadow);  // 圆环底色内阴影
    stroke-width: 10px !important;  // 大小
  }
// 修改进度条方向（原是顺时针加载，改为逆时针加载）
  .my_pross {
    transform: rotateY(180deg);
  }
// 修改进度条内容方向
  .el-progress--circle .el-progress__text, .el-progress--dashboard .el-progress__text {
    transform: rotateY(180deg) translate(0, -50%);
   }
}
</style>

环形渐变进度条