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

原创已于 2022-06-09 09:47:43 修改 · 2.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #css3

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

本文介绍了如何使用ElementUI库自定义环形进度条的样式，包括设置环形的宽度、颜色以及百分比显示。通过修改`stroke-width`属性改变环形粗细，利用CSS类`circleCenter`和`circleBox`调整内百分比样式，同时改变`el-progress-circle__track`和`el-progress`的样式来定制底色和占比颜色。此外，还展示了具体的HTML代码和CSS代码实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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