00

src/components/PatrolmanStatistics/5.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="myChart333" style="width: 100%; height: 100%;"></div>
+  <div id="myChart333" style="width: 100%; height: 90%;"></div>
 </template>
 
 <script>
@@ -37,7 +37,7 @@
                       show: true,
                       top:'10%',
                       data: legendArr,
-                      itemGap: 70,
+                      itemGap: 40,
                       itemWidth: 13,
                       itemHeight: 13
                   },
@@ -45,7 +45,7 @@
                       type: 'pie',
                       startAngle: 180,
                       clockwise: false,
-                      radius: [40, 120],
+                      radius: ["30%", '70%'],
                       center: ['46%', '40%'],
                       color: this.colorArr.map((item) => item.color1),
                       data: [
@@ -73,7 +73,7 @@
                                   }
 
                               },
-                              fontSize: 15
+                              fontSize: this.fontSize(0.16)
                           }
                       },
                       labelLine: {
@@ -85,6 +85,13 @@
                       }
                   }]
               });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
           }
         },
         watch: {

src/pages/PatrolmanStatistics.vue

@@ -447,6 +447,7 @@
         top: 7%;
         left: 3%;
         text-align: center;
+
     }
 
     .tu-nine {