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

圆环不显示

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

.el-progress {
    width: 100%
}

圆圈背景色

<el-progress type="circle" :percentage="20" class="percent"></el-progress>

// ::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去掉原生的文字。

<div class="percent_box">
  <el-progress type="circle" class="percent" :percentage="20"  :show-text="false"></el-progress>
  <div class="text_box">
    <p class="title">通过率</p>
    <p class="text">80%</p>
  </div>
</div>

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

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

圆环渐变色

<div role="progressbar" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100" class="el-progress el-progress--circle">
  <div class="el-progress-circle" style="height: 136px; width: 136px;">
    <svg viewBox="0 0 100 100">
      <defs>
        <linearGradient id="blue" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:#13D59A;stop-opacity:1" />
          <stop offset="100%" style="stop-color:#32C5FF;stop-opacity:1" />
        </linearGradient>
      </defs>
        <path d="
          M 50 50
          m 0 -45
          a 45 45 0 1 1 0 90
          a 45 45 0 1 1 0 -90
          " stroke="#e5e9f2" stroke-width="9.6" fill="none" class="el-progress-circle__track" style="stroke-dasharray: 282.743px, 282.743px; stroke-dashoffset: 0px;">
        </path>
        <path d="
          M 50 50
          m 0 -45
          a 45 45 0 1 1 0 90
          a 45 45 0 1 1 0 -90
          " stroke="url(#blue)" fill="none" stroke-linecap="round" stroke-width="9.6" class="el-progress-circle__path" style="stroke-dasharray: 39.5841px, 282.743px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;">
        </path>
    </svg>
  </div>
</div>

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

报错 custom validator check failed for prop "percentage"

<el-progress type="circle" :percentage="percent" class="progress"></el-progress>

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
    }
  });
},