2021-10-18

el-progress使用for循环时自定义颜色及显示文字

Progress 组件可通过 type 属性来指定使用环形进度条，在环形进度条中， width 属性环形进度条画布宽度。el-progress可以通过 color 设置进度条的颜色，color 可以接受颜色字符串，函数和数组，format 指定进度条文字内容

<div class="circleBox" v-for="(item,index) in progressDate">
	<el-progress :width="110" :format="setText(item)" :stroke-width="12" type="circle" :percentage="item.percentage" :color="customColorMethod(index)"></el-progress>
</div>

指定进度条颜色

customColorMethod(index) {
	switch (index) {
    case 0:
      return '#409EFF'
      break
    case 1:
      return '#67C23A'
      break
    case 2:
      return '#D40CE3'
      break
    case 3:
      return '#E6A23C'
      break
    case 4:
      return '#F56C6C'
      break
    default:
      return '#409EFF'
  }
}

自定义显示文字

setText(row) {
	return () => {
    return row.name + row.percentage + '%'
  }
}

圆环进度条显示文字的样式

.header-right {
 display: flex;
  flex-direction: row;
  .circleBox {
    width: 200px;
    text-align: center;
  }
  /deep/ .el-progress__text  {
    width: 40px;
    line-height: 25px;
    padding: 0 35px;
  }
}

最后的效果图