合并

src/components/ringPie/index.vue

@@ -25,6 +25,7 @@
     </div>   
   </div> -->
   <div class="income-container">
+    <div class="pieBg"></div>
     <div class="chart" id="chart_rp"></div>
   </div>
 </template>
@@ -50,9 +51,9 @@ export default {
           // 副标题
           subtext: "车位已使用",
           // 主副标题间距
-          itemGap: 10,
+          itemGap: 0,
           x: 'center',
-          y: '80',
+          y: 'center',
           // 主标题样式
           textStyle: {
             fontSize: '26',
@@ -75,6 +76,15 @@ export default {
             show: false,
             position: 'center'
           },
+          itemStyle: {
+            normal: {
+              // 设置扇形的阴影
+              shadowBlur: 30,
+              shadowColor: 'rgba(107,106,106,.6)',
+              shadowOffsetX: 'center',
+              shadowOffsetY: 'center'
+            },
+          },
           emphasis: {
             label: {
               label: {
@@ -103,11 +113,11 @@ export default {
                   color: '#0589FF'
                 }
                 ]),
-                    // borderRadius:800,
+                // borderRadius:800,
               },
-          
+
             }
-          }, 
+          },
           {
             value: 4,
             name: '大数据',
@@ -135,6 +145,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+/*自定义动画类----顺时针旋转（使用这个动画的时候才设置动画执行时间）*/
+@-webkit-keyframes changeright {
+
+  0% {
+    transform: rotate(0deg);
+  }
+
+  50% {
+    transform: rotate(180deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 .sn-container {
   left: 974px;
   top: 1978px;
@@ -237,6 +263,20 @@ export default {
 }
 
 .income-container {
+  position: relative;
+
+  .pieBg {
+    width: 2.5rem;
+    height: 2.5rem;
+    background: url(/img/img13.png) no-repeat;
+    background-size: contain;
+    position: absolute;
+    left: 8%;
+    top: 8%;
+    transform: translate(-50%, -50%) rotate(0deg);
+    animation: changeright 6s linear infinite;
+  }
+
   .chart {
     width: 3rem;
     height: 3rem;