element-ui中 Progress 圓形進度條 自定義文字 底色圓角文字顏色修改

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