Element UI 环型进度条自定义样式百分比

一个努力挣扎的代码搬运工

已于 2022-06-09 09:47:43 修改

阅读量2.1k

点赞数 4

文章标签： vue.js elementui css3

于 2022-06-09 09:39:59 首次发布

本文链接：https://blog.csdn.net/wanglinrui/article/details/125197057

版权

Element UI 环型进度条自定义样式百分比

如下图

在这里插入图片描述

1.自定义环型样式

:stroke-width=“16”：定义环形粗细
circleCenter，circleBox：环形内百分比样式
el-progress-circle__track：改变环形图底色
el-progress内的color：环形图占比颜色

<div class="circleBox">
          <el-progress color="#6bbf69" type="circle" :show-text="false" :stroke-width="16" :percentage="typeof dashboardData.mem_usage !== 'undefined' && dashboardData.mem_usage !== null ? dashboardData.mem_usage : 0"></el-progress>
          <div class="circleCenter">
            <div style=" font-weight: bold; font-size: 18px;"> {{dashboardData.mem_usage}}%</div>
            <div style="  font-size: 10px;">使用率 </div>
          </div>
          <div> <span style=" ">内存:</span> <span style=" color: #32798b;  font-weight: bold;">{{dashboardData.mem_total}}</span>GB</div>
</div>

2. css代码

 .circleBox {
  position: relative;
  text-align: center;
  width: 200px;
}

 .circleCenter {
  position: absolute;
  top: 45px;
  left: 70px;

}
.el-progress-circle__track {
  stroke: #b7e5c1;
}