Element UI 自定义环形进度条里的内容_环形进度条

实现思路

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

通过调整.circleBox的width，进度条el-progress的width，以及.circleCenter的top和left来实现自定义内容在环形进度条内居中