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