此组件是从iview能陪你过过来修改的，不需要安装依赖，可直接用，自己用的时候最好也封装成组件，不然需要多个圆环的时候实现特别不容易。
上组件
<template>
<div class="circle_container">
<div :style="circleSize" :class="wrapClasses">
<svg viewBox="0 0 100 100">
<path :d="pathString" :stroke="trailColor" :stroke-width="5" :fill-opacity="0"/>
<path :d="pathString" :stroke-linecap="strokeLinecap" :stroke="strokeColor" :stroke-width="6" fill-opacity="0" :style="pathStyle"/>
</svg>
<div :class="innerClasses">
<slot><h3 class="">{{ jindu }}%</h3></slot>
</div>
</div>
</div>
</template>
<script>
import Cookies from 'js-cookie';
// import NProgress from 'nprogress'
// import 'nprogress/nprogress.css'
const prefixCls = 'ivu-chart-circle';
function oneOf (value, validList) {
for (let i = 0; i < validList.length; i++) {
if (value === validList[i]) {
return true;
}
}
return false;
}
export default {
props: {
list: {
type: Number,
default: 0
},
jindu: {
type: Number,
default: 0
},
// percent: {
// type: Number,
// default: 0
// },
size: {
type: Number,
default: 120
},
strokeColor: {
type: String,
default: '#ffcb63'
},
strokeLinecap: {
validator (value) {
return oneOf(value, ['square', 'round']);
},
default: 'round'
},
trailColor: {
type: String,
default: '#efefef'
}
},
data () {
return {
percent:0
}
},
computed: {
circleSize () {
return {
width: `${this.size}px`,
height: `${this.size}px`
};
},
radius () {
return 50 - 6 / 2;
},
pathString () {
return `M 50,50 m 0,-${this.radius}
a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}
a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}`;
},
len () {
return Math.PI * 2 * this.radius;
},
pathStyle () {
return {
'stroke-dasharray': `${this.len}px ${this.len}px`,
'stroke-dashoffset': `${((100 - this.percent) / 100 * this.len)}px`,
'transition': 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
};
},
wrapClasses () {
return `${prefixCls}`;
},
innerClasses () {
return `${prefixCls}-inner`;
}
},
created() {
setTimeout(()=>{
this.percent = this.list;
},1000);
},
methods: {
}
}
</script>
<style scoped lang="less">
.clearfix{zoom: 1;}
.clearfix:after{
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.circle_container{
width: 100%;
position: relative;
}
.ivu-chart-circle-inner {
width: 100%;
text-align: center;
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 1;
}
.ivu-chart-circle {
display: inline-block;
position: relative;
}
</style>
下面是在页面中引用
<template>
<div class="container">
<div v-for="(obj,ind) in progerssList" :key="ind">
<circle-progress :list='obj.progress' :jindu='obj.jindu'></circle-progress>
</div>
</div>
</template>
<script>
import circleProgress from 'common/view/circleProgress.vue' // 组件路径
export default {
components: {
'circle-progress': circleProgress
},
data () {
return {
progerssList:[
{"progress":100,"jindu":100},
{"progress":20,"jindu":20},
{"progress":30,"jindu":30},
{"progress":35,"jindu":35},
{"progress":40,"jindu":40},
{"progress":40,"jindu":40}
]
}
},
created() {
},
methods: {
}
}
</script>
<style scoped lang="less">
</style>
用法很简答，我自己做项目时遇到的东西，很好用，贴出来希望能帮助到大家