SOURCE

new Vue({
  el: '#app',
  data: {
      defaultDurTime: 60000,
      defaultEmptyColor: "#d3d3d3",
      defaultNegativeColor: "#FF4456",
      defaultPositiveColor: "#0a84ff",
      defaultSrtokeWidth: 2,
      defaultRadius: 50,
      status: false,
  },
  computed: {
    radius() {
      return this.options
        ? this.options.radius || this.defaultRadius
        : this.defaultRadius;
    },
    emptyColor() {
      return this.options
        ? this.options.emptyColor || this.defaultEmptyColor
        : this.defaultEmptyColor;
    },
    srtokeWidth() {
      return this.options
        ? this.options.srtokeWidth || this.defaultSrtokeWidth
        : this.defaultSrtokeWidth;
    },
    valueColor() {
      if (this.value < 0) {
        return this.options
          ? this.options.negativeColor || this.defaultNegativeColor
          : this.defaultNegativeColor;
      } else {
        return this.options
          ? this.options.positiveColor || this.defaultPositiveColor
          : this.defaultPositiveColor;
      }
    },
    strokeDasharray() {
      return 3.1415926 * this.radius;
    },
    strokeDashoffset() {
      // return this.strokeDasharray - this.strokeDasharray * this.value;
      return this.strokeDasharray - this.strokeDasharray * this.customVal;
    }
  },
  methods: {
    stop() {
      this.$refs.svg.pauseAnimations()
    }
  }
})

<div id="app">
  <svg :viewBox="`0 0 ${2*radius + srtokeWidth} ${radius + srtokeWidth}`" ref="svg">
      <path :d="`M ${srtokeWidth/2} ${radius + srtokeWidth/2} a ${radius} ${radius} 0 1 1 ${radius * 2} 0`" :stroke-width="srtokeWidth" :stroke="emptyColor" fill="none" stroke-linecap="round"></path>
      <path :d="`M ${ srtokeWidth/2} ${radius + srtokeWidth/2} a ${radius} ${radius} 0 1 1 ${radius * 2} 0`" :stroke-width="srtokeWidth" :stroke="valueColor" fill="none" stroke-linecap="round" :stroke-dasharray="strokeDasharray" :stroke-dashoffset="strokeDashoffset">
        <animate attributeName="stroke-dashoffset" :dur="`${defaultDurTime}ms`" fill="freeze" :from="strokeDasharray" :to="strokeDashoffset"></animate>
      </path>
    </svg>
  <button @click="stop">停止svg</button>
</div>