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 */
      }
     
      }

参数说明如下：

在这里插入图片描述

小声哔哔一下：
其实在做这个功能之前，我还特意看快速了一下SVG的相关知识，看得脑壳有点疼，参数太多了，暂时放弃了。于是才找了这么一条"捷径"，后面有时间，还是得好好学习，拓展一下自己的技能，多学习一下大神们的思路。

来啊～