el-progress渐变色

线性渐变喝环形渐变 

线性渐变：直接修改样式根据所需颜色修改即可

::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)
    }
  }
}

环形渐变：首先新建个组件progressColor.vue代码如下：

<template>
  <!-- 自定义svg , 在需要更改的地方使用即可 (目前作用于 设置 elementui 环形进度条的渐变色)  -->
    <svg width="100%" height="100%">
  <!-- 渐变颜色一 通过id获取  -->
      <defs>
        <linearGradient id="blue" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:#12ACD0; stop-opacity:1" />
          <stop offset="100%" style="stop-color:#52E2E1;stop-opacity:1" />
        </linearGradient>
      </defs>
  <!--  渐变颜色二 通过id获取 -->
      <defs>
        <linearGradient id="dismantle" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color: #0878EE; stop-opacity:1" />
          <stop offset="100%" style="stop-color: #26C1FB;stop-opacity:1" />
        </linearGradient>
      </defs>
    </svg>
  </template>
  <script>
  export default {
    name: 'progressColor'
  };
  </script>

在需要的地方引入组件，一般是el-progress的下方

          <el-progress type="circle" :percentage="85.7"></el-progress>
          <progress-color></progress-color>

然后再css里写样式选择需要的渐变色,到这里就完成了

::v-deep {
  .el-progress-circle {

    // 进度条颜色
    svg>path:nth-child(2) {
      stroke: url(#dismantle); // 该url() 中填入的是, 对应组件中的 id 名
    }
  }


}