实现思路
1. 隐藏进度条默认的文字内容 :show-text="false"
2. 使用“子绝父相”,调整top和left值来实现自定义内容在环形进度条内居中
3. 为避免缩放浏览器时定位发生偏移,需固定整个容器的宽度 width: 200px;
最终代码
<div class="circleBox"> <el-progress :show-text="false" :width="120" :stroke-width="12" type="circle" :percentage="80"> </el-progress> <div class="circleCenter"> <div>成功率 80%</div> </div> </div>
自定义的内容写在 <div class="circleCenter"> 内部
相关样式如下:
.circleBox { position: relative; text-align: center; width: 200px; } .circleCenter { position: absolute; top: 50px; left: 60px; }