用echarts以及css封装环形图

<template>

   <div class="firstrouter-card-pie-bg">

        <div class="firstrouter-card-pie-circle" ref="chart"><div class="chart" ref="chart"></div></div> 

   </div>

</template>

<script>

　　

mounted(){

 this.$nextTick(() => {

      this.myEcharts = this.$echarts.init(this.$refs.chart)

　　this.setData()

    })

},

methods:{

　　

// 环形图的数据配置

    setData() {

      const getCardCount = this.cardData[1].num

      let giveCardCount = this.cardData[0].num

      if (getCardCount >= giveCardCount) giveCardCount = 0

      this.myEcharts.setOption({

        series: [

          {

            type: 'pie',

            radius: ['35%', '45%'],

            hoverAnimation: false,

            label: {

              formatter: '{per|{d}%}  ',

              rich: {

                per: {

                  color: '#FF7120',

                  backgroundColor: 'rgba(0, 0, 0, 0)'

                }

              }

            },

            data: [

              { value: getCardCount, name: '', itemStyle: { color: '#FF7120' } },

              { value: giveCardCount, name: '', label: { show: false }, labelLine: { show: false }, itemStyle: { opacity: 0 } }

            ]

          }

        ]

      })

    }

}

</script>

<style>

　　

.firstrouter-card-pie-bg{

//底色的环形图用css实现

        width: 148px;

        height: 148px;

        border-radius: 50%;

        border: 28px solid #FEE3DC;

        position: relative;

      }

      &-circle{

        width: 296px;

        height: 296px;

        position: absolute;

        top: -102px;

        left: -102px;

        .chart{

          width: 100%;

          height: 100%;

        }

      }

</style>