vue中饼图多重效果实现

效果图如上

//html
<div class="pie-wrapper">
                  <div id="pie" ref="pieCharts">
                      
                  </div>
              //中间两个圆的布局
                  <div class="pie-width">
                    <div class="pie-move1"></div>
                    <div class="pie-move2"></div>
                  </div>
</div>

//css

      .pie-wrapper {
          position: relative;
          .pie-move1 {
                position: absolute;
                top: .59rem;
                left: 1.03rem;
                width: .68rem;
                height: .68rem;
                background: url(../assets/image/pie-inside1.png) no-repeat;
                background-size: .68rem .68rem;
                animation: piemove1 5s infinite linear ;
                -webkit-animation: piemove1 5s infinite linear ;
                -webkit-transform-origin: center center;
                -ms-transform-origin: center center;
                transform-origin: center center;
        }
        .pie-width {
            position: absolute;
                top: 0;
            left: .27rem;
            width: 2.74rem;
            height: 2.3rem;
        }
         .pie-move2 {
            position: absolute;
            top: .505rem;
            left: .948rem;
            width: .85rem;
            height: .85rem;
            background: url(../assets/image/pie-inside2.png) no-repeat;
            background-size: .85rem .85rem;
            animation: piemove2 5s infinite linear;
            -webkit-animation: piemove2 5s infinite linear;
            -webkit-transform-origin: center center;
            transform-origin: center center;
        }
      }



//js
                    var img = '线上最外层边框图片地址';
                    var myChart = echarts.init(this.$refs[pieCharts]); //获取元素进行echarts初始化
                    var  option = {
                        color:['#00C7F2','#207ADA','#3944D4'],
                        legend: {
                            left: 'center',
                            bottom:this.fontSize(0.15),
                            itemWidth:this.fontSize(0.14),
                            itemHeight:this.fontSize(0.08),
                            itemGap:this.fontSize(0.24),
                            textStyle:{
                                color:'#fff',
                                fontSize:this.fontSize(0.12),
        
                            },
                            data: ['自助', '邀请', '访客机']
                        },
                        emphasis:{
                            label:{
                                align:'left'
                            }
                        },
                        grid:{
                            top:-10,
                            //top: '5%',   // 与容器顶部的距离
                            //bottom: '5%', // 与容器底部的距离
                        },
                            graphic: {
                                elements: [{
                                    type: "image",
                                    z: 3,
                                    style: {
                                        image: img,
                                        width: this.fontSize(1.55),
                                        height: this.fontSize(1.55)
                                    },
                                    left: 'center',
                                    top:  this.fontSize(0.15),
                                    position: [0, 0]
                                }]
                                },
                        series: [
                            {
                                name: '访问量',
                                type: 'pie',
                                radius: ['40%', '60%'],
                                center: ["50%", "40%"],
                                avoidLabelOverlap: false,
                                label:{
                                   formatter:function(data){ return data.percent.toFixed(2)+"%"}, 
                                    color:'#fff',
                                },
                                itemStyle:{
                                    borderWidth:2, //设置border的宽度有多大
                                    borderColor:'#000F23',
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize:  this.fontSize(0.13),
                                    }
                                },
                                labelLine: {
                                    show: true,
                                     normal:{  
                                        length:this.fontSize(.08) 
                                         } 
                                },
                                data: [
                                    {value: type1Valu, name: '自助'},
                                    {value: type0Valu, name: '邀请'},
                                    {value: type2Valu, name: '访客机'}
                                ]
                            }
                        ]
                    };
                    myChart.clear();
                     myChart.resize();
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);