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 名}}}