yearProgress.vue

 <template>
   <div class="progressbar">
     <el-progress :text-inside="true" :soke-width="18" :percentage="percent" status="exception"></el-progress>
     <p>{{year}}年已经过去了{{days}}天，{{percent}}%</p>
   </div>
 </template>
 <script>
 export default {
   methods: {
     isLeapYear () {
       const year = new Date().getFullYear()
       if (year % 400 === 0) {
         return true
       } else if (year % 4 === 0 && year % 100 !== 0) {
         return true
       } else {
         return false
       }
     },
     getDayOfYear () {
       return this.isLeapYear() ? 366 : 365
     }
   },
   computed: {
     year () {
       return new Date().getFullYear()
     },
     days () {
       let start = new Date()
       start.setMonth(0)
       start.setDate(1)
       // start就是今年第一天
       // 今天的时间戳 减去今年第一天的时间戳
       let offset = new Date().getTime() - start.getTime()
       return parseInt(offset / 1000 / 60 / 60 / 24) + 1
     },
     percent () {
       return (this.days * 100 / this.getDayOfYear()).toFixed(1)
     }
   }
 }
 </script>
 <style scoped>
 .progressbar {
   text-align: center;
   margin-top:30px;
   margin-bottom:40px;
   width:100%;
 }
 .progressbar >>> .el-progress-bar {
     width: 30%;
 }
 </style>