【ElementUI】进度条 el-progress—进度圆环颜色、自定义文字

圆环不显示

大概率是因为宽度没有设置.

.el-progress {
    width: 100%
}

圆圈背景色

// ::v-deep  .el-progress-circle__track
::v-deep  .percent  svg path:nth-child(1) {
    stroke: red;
}

::v-deep  .percent  svg path:nth-child(2) {
    stroke: yellow;
}

::v-deep  .percent .el-progress__text {
    color: blue;
}

圆圈中心文本自定义

利用position来定位，show-text=false去掉原生的文字。

  
  

    
通过率
    
80%
  

.percent_box {
  position: relative;
  text-align: center;
  width: 200px;
}

.text_box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

圆环渐变色

 

参考：设置el-progress渐变背景色

报错 custom validator check failed for prop "percentage"

created() {
  getInfo({id: this.id}).then(res => {
    if(res.code == 200) {
      this.percent = res.percent > 100 ? 100 :(res.percent < 0 ? 0 : res.percent)
    }else {
      this.percent = 0
    }
  });
},