一、对于线性渐变

• 直接修改样式即可

::v-deep .el-progress {
  .el-progress-bar {
    .el-progress-bar__outer {
      background: linear-gradient(to right#8075fd, #b87bfe);
    }
    .el-progress-bar__inner {
      background: linear-gradient(to right, #8075fd, #f9fdf8);
    }
  }
}

二、对于圆形渐变

由于环形图是svg画出来的，所以直接修改颜色行不通

解决办法：替换svg中第二个path的stroke属性

2.1. 封装一个存放各类渐变色的svg组件

progress-circle-color.vue

<template>
  <!-- 自定义svg , 在需要更改的地方使用即可 (目前作用于 设置 elementui 环形进度条的渐变色)  -->
  <!-- width="0" height="0" 使得svg不占用多余空间 -->
  <svg width="0" height="0">
    <!-- 渐变颜色一  -->
    <defs>
      <linearGradient id="dismantle" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color: #00b0ff; stop-opacity: 1" />
        <stop offset="100%" style="stop-color: #c5ff87; stop-opacity: 1" />
      </linearGradient>
    </defs>
  </svg>
</template>
<script>
export default {
  name: "ProgressCircleColor",
};
</script>

2.2. 使用

<template>
  <div class="progress-box">
    <el-progress
      type="circle"
      :width="78"
      text-color="#01DBE6"
      :stroke-width="6"
      :percentage="92.31"
      define-back-color="#507190"
    >
    </el-progress>
    <progress-circle-color />
  </div>
</template>
<script>
import ProgressCircleColor from "./progress-circle-color.vue";
export default {
  components: { ProgressCircleColor},
};
</script>
<style scoped lang="scss">
::v-deep {
 .el-progress-circle {
     // 进度条渐变
     svg > path:nth-child(2) {
       stroke: url(#dismantle); // dismantle就是你定义的svg的id属性值
     }
   }
}
</style>