vue自定义圆

```html
<template>
  <x-view style="width: inherit;text-align: center;">
    <svg id="circle" viewBox="0 0 188 188">
      <circle cx="94" cy="94" r="90" fill="none" :stroke-width="svgStrokeWidth" :stroke="inColor" />
      <circle stroke-linecap="round" cx="106" cy="94" r="90" :stroke-width="svgStrokeWidth" :stroke="ouColor"
        fill="none" transform="matrix(0,-1,1,0,0,200)" stroke-dasharray="0 1069"></circle>
      <text text-anchor="middle" dominant-baseline="middle" id="circle-text1" x="94" y="94" :fill="text1Color"
        style="font-size: 20px;">{{text1}}</text>
      <text text-anchor="middle" dominant-baseline="middle" id="circle-text2" x="94" y="114" :fill="text2Color"
        style="font-size:12px;;opacity: 0.75;">{{text2}}</text>
    </svg>
  </x-view>
</template>
<script>
export default {
  name: 'cqCircle',
  data() {
    return {
      per: this.percent,
      text1: this.title,
      text2: this.subtitle,
      text1Color: this.titleColor,
      text2Color: this.subTitleColor,
      inColor: this.innerColor,
      ouColor: this.outerColor,
      svgWidth: this.width,
      svgHeight: this.height,
      svgStrokeWidth: this.strokeWidth
    }
  },
  props: {
    percent: {
      type: Number,
      default: 0.5
    },
    strokeWidth: {
      type: Number,
      default: 5
    },
    title: {
      type: String,
      default: ""
    },
    subtitle: {
      type: String,
      default: ""
    },
    width: [String, Number],
    height: [String, Number],
    titleColor: {
      type: String,
      default: ""
    },
    subTitleColor: {
      type: String,
      default: ""
    },
    innerColor: {
      type: String,
      default: "#e5e9f2"
    },
    outerColor: {
      type: String,
      default: "#20a0ff"
    }
  },
  methods: {
    //初始化
    init() {
      let percent = this.per  //从接口获取到的圆环填充百分比
      let svg = document.getElementById("circle");
      let text1 = document.getElementById("circle-text1");
      let text2 = document.getElementById("circle-text2");
      let circle0 = document.querySelectorAll("circle")[0];
      let circle1 = document.querySelectorAll("circle")[1];
      let perimeter = circle1.getTotalLength() //圆环的周长
      circle1.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1 - percent));
      //  svg.style.width = 'inherit';
      //  svg.style.width = 188 + 'px';
      // text1.style.fontSize = 12 + 'px'
      // text2.style.fontSize = 9 + 'px'
    },
    //设置内圈颜色
    setInnerColor(color) {
      circle0.setAttribute("stroke", color);
    },
    //设置外圈颜色
    setOuterColor(color) {
      circle1.setAttribute("stroke", color);
    }；
    //设置顶部字体颜色
    setTopColor(color) {
      text1.setAttribute("fill", color);
    },
    //设置顶部字体颜色
    setBottomColor(color) {
      text2.setAttribute("fill", color);

    },
    //设置svg宽高

    setSvgHW(hw) {
      svg.style.width = hw * 1 + 'px'
      svg.style.height = hw * 1 + 'px'

    }
  },
  mounted() {
    this.init();
  },
  watch: {
    //设置百分比
    percent(val) {
      if (val) {
        this.per = val * 1;
        this.init();
      }
    },
    //设置宽 
    width(val) {
      if (val) {
        this.svgWidth = val * 1;
        this.init();
      }
    },
    //设置高 
    height(val) {
      if (val) {
        this.svgHeight = val * 1;
        this.init();
      }
    },
    //设置高 
    strokeWidth(val) {
      if (val) {
        this.svgStrokeWidth = val * 1;
        this.init();
      }
    }

  }
}
</script>
<style scoped>
#circle {
  width: 188px;
  height: 188px;
}
circle {
  transition: stroke-dasharray 800ms;
}
</style>