首页 > Web开发 > 详细

用echarts以及css封装环形图

时间:2020-01-16 11:43:19      阅读:333      评论:0      收藏:0      [点我收藏+]

<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>

用echarts以及css封装环形图

原文:https://www.cnblogs.com/xiaoxiaocheng/p/12199957.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!