prograss.jpg

1.圆形进度条底色修改，非底色修改官方文档中有说明。deep:样式穿透,下面是3.0写法

    :v-deep(.el-progress-circle__track ){
      stroke: #EEEEEE;
    }

2.圆角修改 stroke-linecap="square" ,stroke-linecp有三个值，分别为butt/round/square，默认值为round圆角模式

        <el-progress type="circle"  :percentage="25" :stroke-width="8" 
         stroke-linecap="square" />

3.进度条中文字修改，有两种模式，如不需要添加复杂样式，可使用format属性自行添加样式
例：

  <el-progress type="circle"  :percentage="25" :stroke-width="8" 
     stroke-linecap="square"  :format="format" />

  methods: {
    format(percentage) {
      let tex = '2012MB'
      return percentage + '%\n' + tex
    },
  }

 :v-deep(.el-progress__text ) {
      white-space: pre;//使百分号与所添加文字换行
 }

4.如果需要给文字添加不同样式，需自定义文本内容
例：样式使用的less，可自行转换

      <div class="circleBox">
        <el-progress type="circle" :show-text="false" :percentage="25" :stroke-width="8" 
        stroke-linecap="square" />
        <div class="textCenter">
          <div>80%</div>
          <span>2012MB</span>
        </div>
      </div>

    .circleBox {
      position: relative;
      text-align: center;
      width: 200px;
      margin: 40px 0;
      .circleCenter {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        div {
          font-size: 26px;
          color: #1360FB;
          font-weight: 600;
          margin-bottom: 5px;
        }
        span {
          font-size: 14px;
          color: #999999;
        }
      }
    }