手机端适配

src/components/common/Home.vue

@@ -52,6 +52,7 @@ export default {
     width: 100%;
     height: 40px;
     font-size: 12px;
+    line-height: 40px;
     .logo {
       display: none;
     }
@@ -99,6 +100,13 @@ export default {
     top: 41px;
     //首页
     .stritleEchartsPage {
+      height: 100%;
+      .exportDialog {
+        .el-dialog {
+          margin-top: 140px !important;
+          width: 80%;
+        }
+      }
       .el-card .el-card__body {
         padding: 8px;
         height: calc(100% - 16px);
@@ -113,13 +121,14 @@ export default {
             p {
               padding: 1.5%;
               margin: 1.5%;
+              zoom: 0.8;
               span {
                 font-size: 12px !important;
               }
             }
           }
           .chartClass {
-            zoom: 0.5;
+            height: calc(100% - 16px);
           }
           .dateBox {
             top: 8px;
@@ -146,6 +155,28 @@ export default {
             }
           }
         }
+        .picSetBox {
+          .swiperBox {
+            .title {
+              height: 20px;
+              line-height: 20px;
+              .el-breadcrumb {
+                height: 20px;
+                line-height: 20px;
+                font-size: 12px;
+              }
+            }
+            .thumb-example {
+              height: calc(100% - 8px);
+              .picTop {
+                height: 70%;
+              }
+              .picBottom {
+                height: 30%;
+              }
+            }
+          }
+        }
         .picSetBox {
           .parameterArea {
             width: 180px;
@@ -171,12 +202,14 @@ export default {
       }
       .infoDialog {
         .el-dialog {
+          width: 80% !important;
+          margin-top: 120px !important;
         }
       }
       .setTimeDialog {
         .el-dialog {
           width: 80% !important;
-          margin-top: 15vh !important;
+          margin-top: 120px !important;
         }
       }
     }
@@ -207,7 +240,7 @@ export default {
           .bigpic {
             position: relative;
             img {
-              height: auto;
+              height: 200px;
             }
             .caption {
               position: absolute;
@@ -241,7 +274,7 @@ export default {
       height: auto;
       .el-dialog {
         width: 100% !important;
-        margin-top: 120px !important;
+        margin-top: 140px !important;
       }
     }
   }

src/views/stritl/chartFiles/pie.vue

@@ -5,7 +5,7 @@
 export default {
   props: {
     pieData: {},
-        boxStyle: {}
+    boxStyle: {},
   },
   data() {
     return {};
@@ -22,61 +22,61 @@ export default {
       // 绘制图表
       myChart.setOption({
         legend: {
-                    orient: 'vertical',
-                    top: 'center',
-                    left: 'right'
+          orient: "vertical",
+          top: "center",
+          left: "right",
         },
         tooltip: {
-                    trigger: 'item'
+          trigger: "item",
         },
         series: [
           {
             // name: 'Access From',
-                        type: 'pie',
-                        radius: ['40%', '70%'],
-                        center: ['35%', '50%'],
+            type: "pie",
+            radius: ["40%", "70%"],
+            center: ["35%", "50%"],
             avoidLabelOverlap: false,
             itemStyle: {
               borderRadius: 10,
-                            borderColor: '#fff',
-                            borderWidth: 2
+              borderColor: "#fff",
+              borderWidth: 2,
             },
             label: {
               show: false,
-                            position: 'center'
+              position: "center",
             },
             emphasis: {
               label: {
                 show: false,
-                                fontSize: 40,
-                                fontWeight: 'bold'
-                            }
+                fontSize: 12,
+                fontWeight: "bold",
+              },
             },
             labelLine: {
-                            show: false
+              show: false,
+            },
+            data: this.pieData,
           },
-                        data: this.pieData
-                    }
-                ]
+        ],
       });
-            window.addEventListener('resize', () => {
+      window.addEventListener("resize", () => {
         // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
         myChart.resize();
       });
-        }
+    },
   },
   watch: {
     pieData(val, old) {
       this.drawBar();
-        }
+    },
   },
   beforeDestroy() {
     /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
       容易导致内存泄漏和额外CPU或GPU占用哦*/
-        window.removeEventListener('resize', () => {
+    window.removeEventListener("resize", () => {
       myChart.resize();
     });
-    }
+  },
 };
 </script>
 <style lang="less">

src/views/stritl/index.vue

@@ -251,12 +251,14 @@ export default {
             top: 20,
             bottom: 20,
           },
+
           series: [
             {
               type: "pie",
+              // minAngle: 15, //最小角度
+              startAngle: 150, //起始角度
               radius: ["40%", "70%"],
               avoidLabelOverlap: false,
-
               itemStyle: {
                 borderRadius: 10,
                 borderColor: "#fff",
@@ -264,14 +266,14 @@ export default {
               },
               label: {
                 show: true,
-                fontSize: 16,
-                fontWeight: "bold",
+                fontSize: 12,
+                fontWeight: "normal",
                 formatter: "{b}\n{d}%",
               },
               emphasis: {
                 label: {
                   show: true,
-                  fontSize: 26,
+                  fontSize: 12,
                   fontWeight: "bold",
                   formatter: "{b}\n{d}%",
                 },
@@ -313,7 +315,7 @@ export default {
             top: "10%",
             left: "10%",
             right: "10%",
-            bottom: "10%",
+            bottom: "13%",
           },
           xAxis: {
             type: "category",
@@ -413,15 +415,15 @@ export default {
               },
               label: {
                 show: true,
-                fontSize: 16,
-                fontWeight: "bold",
+                fontSize: 14,
+                fontWeight: "normal",
                 formatter: "{b}\n{d}%",
               },
               emphasis: {
                 label: {
                   show: true,
-                  fontSize: 26,
-                  fontWeight: "bold",
+                  fontSize: 14,
+                  fontWeight: "normal",
                   formatter: "{b}\n{d}%",
                 },
               },