vue圆形进度条环形进度条组件内部显示图片

借鉴了这篇博客
https://www.cnblogs.com/javaxubo/p/17380321.html

cycle.vue详细内容

<template>
    <div class="cycle_box" style="position: relative;" :style="{width:width+'px',height:width+'px'}">                    
        <svg :width="width" :height="width" >            
            <circle :cx="cyclePosition" :cy="cyclePosition" :r="radius" :stroke-width="strokeWidth" :stroke="backgroundColor" fill="none"     ></circle>
            <circle :cx="cyclePosition" :cy="cyclePosition" :r="radius" :stroke-width="strokeWidth" :stroke="progressColor" fill="none"  
                :stroke-dasharray="dasharray"  :transform="transform"   class="cycle_out"></circle>
        </svg>
        <img :src="imgUrl" alt="" v-if="imgUrl!=''" class="cycle_img" />  
        <div class="cycle_text" v-if="imgUrl==''" style="font-size: 13.1111px; color: rgb(96, 98, 102);">{{progress}}%</div>      
    </div>
</template>
  
<script>
  export default {
    name:"cycle",
    props: {
        progress: {type: Number, default: 0},//进度条进度
        width: {type: Number, default: 140},//整个宽度
        strokeWidth: {type: Number, default: 10},//进度条宽度
        textClass: {type: String, default: "cycle-text"},//中间文字的类名
        backgroundColor: {type: String, default: "#ebeef5"},//进度条背景颜色
        progressColor: {type: String, default: "#20a0ff"},//进度条背景颜色
        imgUrl: {type: String, default: ""},//显示的图片
        
    },
    data (){
        return {  
            perimeter :Math.PI * 2 * 40,       
            radius:0,//半径
            dasharray:0,
            cyclePosition:0,
            transform:"rotate(270,60,60)"
            }        
    },
    mounted(){
        
        let percent=(this.progress/100)        
        this.radius=Math.floor((this.width-this.strokeWidth)/2)
        this.cyclePosition=this.width/2
        this.perimeter=Math.PI * 2 * this.radius
        this.dasharray=this.perimeter * percent + " " + this.perimeter * (1- percent)
        this.transform=`rotate(270,${this.cyclePosition},${this.cyclePosition})`
        console.log(this.dasharray, this.transform,this.cyclePosition,this.perimeter,this.radius)
    },
    methods:{
      
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.cycle_out{
    stroke-linecap:round;
}
.cycle_img{
    position: absolute;
    top: 50%;
    left: 40%;
    width: 20%;
    text-align: center;
    margin: 0;
    transform: translate(0,-50%);
}
.cycle_text{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    margin: 0;
    transform: translate(0,-50%);
}
</style>
  

引用方式

js

 import cycle from "../../components/Cycle.vue"

  components: {
        cycle,
    },
 data (){
        return {  
            imageUrl: require('../../assets/woman.svg'),
            }        
    },
 

模版部分

<cycle :progress="80" :width="100" :stroke-width="12" :imgUrl="imageUrl"></cycle>

注意图片的引用方式 否则可能无法显示

如果不传imgUrl 就会显示百分比数字
其他的根据自己需要修改吧
写这部分主要是element不满足内部显示图片的需求