环形进度条(2)

上一次的环形进度条是使用 纯 css js绘制的 效果及性能欠佳 这是我想使用svg绘制

html

  <div id="wrap">
    <svg class="round-contain">
      <circle
        cx="100"
        cy="100"
        :r="r"
        stroke="#F0BFC4"
        stroke-width="15"
        fill="none"
        :stroke-dasharray="sround"
        stroke-linecap="round"
      />

      <circle
        cx="100"
        cy="100"
        :r="r"
        stroke="#C40112"
        stroke-width="20"
        fill="none"
        :stroke-dasharray="`${slotSpot},${subEmptySpot}`" 
        stroke-dashoffset="141.3"
        stroke-linecap="round"
      />
    </svg>

    <div class="mark-box">
      <!-- 显示进度条数值的元素 -->
      <div class="number">{{percent}}%</div>
    </div>
  </div>
  //  :stroke-dasharray="`${slotSpot},${subEmptySpot}`" 一定要这样写 不然 ，会被解析成js (大坑)
  

js部分

initData () {
  // <!-- # stroke-dasharray 指定缺口在多长处 指定短划线和缺口的长度 -->
  // <!-- stroke-dashoffset 属性指定了dash模式到路径开始的距离 (长度) -->
  const area = parseFloat(this.r * 2 * 3.14) // 圆的周长
  this.sround = area
  const avg = parseFloat(this.target / this.total)
  this.slotSpot =  area * avg //
  this.subEmptySpot = area - this.slotSpot
  const setInterval = ser

}