在 Ant Design Vue 中，环形进度图并不是单独的组件，而是由基础的进度条组件 a-progress 通过属性切换而来。只要把 type 设为 circle，就能让进度条以圆环形式呈现，再配合 percent 控制完成比例即可。
基础环形进度图用法
首先确保已经安装并引入了 Ant Design Vue。在模板中直接使用 a-progress 标签，并设置对应属性：
<template>
<a-progress
type="circle"
:percent="75"
:stroke-width="10"
/>
</template>
<script>
import { Progress } from 'ant-design-vue';
export default {
components: {
AProgress: Progress
}
}
</script>
上面的代码会渲染出一个四分之三圆的环形进度图，stroke-width 用来调整圆环的粗细。
常用属性说明
实际开发中，我们往往需要根据业务调整样式与状态，下面列出几个常用属性：
| 属性名 | 说明 | 类型 |
|---|---|---|
| type | 进度条类型，circle 为环形 | string |
| percent | 百分比数值，0 到 100 | number |
| strokeWidth | 圆环线条宽度 | number |
| status | 状态，如 success、exception | string |
动态数据绑定
环形进度图通常用来反映实时数据，可以用响应式变量来绑定 percent：
export default {
data() {
return {
// 模拟从接口获取的数值
completion: 0
}
},
mounted() {
// 假设定时更新进度
setInterval(() => {
if (this.completion < 100) {
this.completion += 5;
}
}, 1000);
}
}
在模板中引用变量
<a-progress type="circle" :percent="completion" />
自定义中心内容
有时我们希望圆环中间显示文字而不是默认百分比，可以使用插槽：
<a-progress type="circle" :percent="60">
<template #format>
<span>已完成</span>
</template>
</a-progress>
通过 format 插槽，能够灵活放置任意内容，比如图标或者更详细的描述文字。
小结
使用 Ant Design Vue 实现环形进度图核心就是 a-progress 组件加 type="circle"。配合动态数据、状态属性和插槽，就能覆盖大多数后台系统的展示需要，避免引入过重图表库。
Ant_Design_Vue环形进度图a-progress修改时间：2026-07-30 13:12:17