使用SVG画圆环(带填充动画)

效果图

1.png

创建组件CircleBar目录,再目录中创建CircleBar组件

<template>
    <div class="sqFinancialSmall">
        <svg viewBox="0 0 100 100">
            <path d="
                M 50 50
                m 0 -47
                a 47 47 0 1 1 0 94
                a 47 47 0 1 1 0 -94
                " 
                stroke="#e5e9f2"
                stroke-width="4"
                fill="none"
                style="stroke-dasharray: 304.7px, 295.31px; stroke-dashoffset: 4px;">
            </path>

            <path d="
                M 50 50
                m 0 -47
                a 47 47 0 1 1 0 94
                a 47 47 0 1 1 0 -94
                " 
                :stroke="color" :stroke-dasharray="strokeDasharray" fill="none" stroke-linecap="round" stroke-width="4"   style="stroke-dashoffset: 0px;transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;">
            </path>

            <path d="
                M 50 50
                m 0 -47
                a 47 47 0 1 1 0 94
                a 47 47 0 1 1 0 -94
                "
                :stroke="TwoFullColor" v-if="progress>100" :stroke-dasharray="strokeDasharray1" fill="none" stroke-linecap="round" stroke-width="4"   style="stroke-dashoffset: 0px;transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;">
            </path>

        </svg>

        <div class="svgContent">
            <div class="title">{{sqtitle1}}</div>
            <div class="title">{{sqtitle2}}</div>
            <div v-if="titleNum" :style="{color:color}" class="titleNum">{{titleNum}}</div>
            <div v-if="!titleNum" style="font-size:14px;color:#999999;" class="titleNum">暂未开放</div>
        </div>
    </div>
</template>

<script>
    
  export default {
    name: 'sqFinancialSmall',
    data(){
        return {
            lineLength:2*Math.PI * 46.45,
        }
    },
    computed: {
        strokeDasharray: function () {
            if (this.progress<=100) {
                let percent = this.progress / 100 
                let lineLength = this.lineLength
                return  (lineLength * percent) + " 295.31"
            }else if (this.progress>100) {
                let percent = 100 
                let lineLength = this.lineLength
                return  (lineLength * percent) + " 295.31"
            }else{
                return 0
            }
        },
        strokeDasharray1: function () {
            if (this.progress<=100) {
                return  "0 295.31"
            }else if (this.progress>100) {
                let percent = (this.progress-100)/100
                let lineLength = this.lineLength
                console.log(percent)
                console.log(lineLength)
                console.log(lineLength * percent)
                return  (lineLength * percent) + " 295.31"
            }else{
                return  "0 295.31"
            }
           
        }
    },
    props: {
       color:{
           type:String,
           default: "#88D164",
       },
       progress:{
           type:Number,
           default:0,
       },
       sqtitle1:{
           type:String,
           default:"财务进度条",
       },
       sqtitle2:{
           type:String,
           default:"财务进度条",
       },
       titleNum:{
           type:Number,
           default:0,
       },
       
    },
    methods: {
        handleClick(evt) {
            this.$emit('click', evt);
        }
    }
  };
</script>

<style scoped>
.sqFinancialSmall{
    width: 100px;
    height: 100px;
    position: relative;
    margin: auto;
}
.svgContent{
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    padding-top: 15px;
}
.title{
    width: 100%;
    text-align: center;
    color: #656565;
    font-size: 14px;
}
.titleNum{
    width: 100%;
    text-align: center;
    font-size: 18px;
    margin-top: 7px;
    font-family:Source Han Sans CN;
    font-weight:400;
}


</style>

在同级创建index.js文件

// 引入组件
import CircleBarfromComponent './CircleBar.vue'
// 定义 Loading 对象
const CircleBar={
    // install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。
    install:function(Vue){
        Vue.component('CircleBar',CircleBarfromComponent )
    }
}
// 导出
export default CircleBar

在main.js中挂载

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import { store } from './store';
import CircleBar from './components/CircleBar/CircleBar/index' ;

// 中间件 引入省钱家族自定义组件模板
Vue.use(CircleBar )

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

使用组件

<template>
  <div>
   <CircleBar 
       color="#EA4B4B"
       :progress="progress"
       sqtitle1="文字信息一"
       sqtitle2="文字信息二"
    ></CircleBar >
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      progress:0,
    };
  },
  mounted() {
    this.progress = 100;
  }
};
</script>