vue实现实现3/4 比例圆环（信用分）

本文主要是介绍vue实现实现3/4 比例圆环（信用分），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果如下：在这里插入图片描述
本来想完全靠自己的力量来实现这个效果，奈何时间紧凑，一时也没有好的思路。困顿之际，恰逢vux的XCircle组件，遂往观其组件源码，茅塞顿开，甚是奇妙。于是将组件源码进行改造一番，如下：

<template><div class="hemp-circle"><svg viewBox="0 0 100 100"><defs v-if="isGradient"><linearGradient:id='id'x1="10%"y1="45%"x2="50%"y2="0%"><stop offset="0%" :style="{'stop-color': strokeColor[0], 'stop-opacity': 1}"/><stop offset="100%" :style="{'stop-color': strokeColor[1], 'stop-opacity': 1}"/></linearGradient></defs><path:d="pathString":stroke-linecap="strokeLinecap":stroke="trailColor":stroke-width="trailWidth":style="pathStyle2":fill-opacity="0"/><path:d="pathString":stroke-linecap="strokeLinecap":stroke="isGradient ? url : strokeColor":stroke-width="strokeWidth"fill-opacity="0":style="pathStyle"/></svg></div>
</template><script>
export default {name: 'hemp-circle',props: {strokeWidth: {type: Number,default: 1,},strokeColor: {type: [Array, String],default: '#3FC7FA',},trailWidth: {type: Number,default: 1,},trailColor: {type: String,default: '#D9D9D9',},percent: {type: Number,default: 0,},strokeLinecap: {type: String,default: 'round',},anticlockwise: {type: Boolean,default: false,},id: {type: String,default: 'hemp-circle-gradient',},},computed: {url () {return 'url(#' + this.id + ')'},radius () {return 50 - this.strokeWidth / 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 () {let style = {'stroke-dasharray': `${this.len}px ${this.len}px`,'stroke-dashoffset': `${(((100.0 - this.percent + (this.percent * 1 / 4)) / 100.0) * this.len)}px`,'transition': 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease',}// console.log(JSON.stringify(style))return style},pathStyle2 () {let style = {'stroke-dasharray': `${this.len}px ${this.len}px`,'stroke-dashoffset': `${this.len * (1.0 / 4)}px`,}// console.log(JSON.stringify(style))return style},isGradient () {return typeof this.strokeColor !== 'string'},},
}
</script><style lang="stylus" scoped>.hemp-circle {position: relative;width: 100%;height: 100%;}
</style>

使用如下

 <div class="circle-credit"><div class="circle-container"><hemp-circle:percent="percent":stroke-width="6":trail-width="6"stroke-color="#fff"trail-color="rgba(255,255,255,0.21)"/></div><!--信用分内容--><div class="hemp-circle-content"><p class="credit">{{percent?percent:0}}</p><p class="credit-status">信誉极好</p><p class="assessment-time">评估时间：2019-11-06</p></div></div>

特别注意：犹豫起点在12点的位置，需要将整个圆环向左旋转135度。

.circle-credit{position:relative;.circle-container{position:absolute;left:calc((100% - 130px) / 2);top:20px;// transform:translate(-50%,-50%);width:130px;height:130px;transform:rotate(-135deg);-ms-transform:rotate(-135deg); /* Internet Explorer */-moz-transform:rotate(-135deg); /* Firefox */-webkit-transform:rotate(-135deg); /* Safari 和 Chrome */-o-transform:rotate(-135deg); /* Opera */}}