手机端适配

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

@@ -1,87 +1,87 @@
 <template>
-    <div id="myMidChart" ref="pieChart" :style="boxStyle"></div>
+  <div id="myMidChart" ref="pieChart" :style="boxStyle"></div>
 </template>
 <script>
 export default {
-    props: {
+  props: {
-        pieData: {},
+    pieData: {},
-        boxStyle: {}
+    boxStyle: {},
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.$nextTick(function () {
+      this.drawBar();
+    });
+  },
+  methods: {
+    drawBar() {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = this.$echarts.init(this.$refs.pieChart);
+      // 绘制图表
+      myChart.setOption({
+        legend: {
+          orient: "vertical",
+          top: "center",
+          left: "right",
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        series: [
+          {
+            // name: 'Access From',
+            type: "pie",
+            radius: ["40%", "70%"],
+            center: ["35%", "50%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: "#fff",
+              borderWidth: 2,
+            },
+            label: {
+              show: false,
+              position: "center",
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 12,
+                fontWeight: "bold",
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: this.pieData,
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
+        myChart.resize();
+      });
     },
-    data() {
+  },
-        return {};
+  watch: {
+    pieData(val, old) {
+      this.drawBar();
     },
-    mounted() {
+  },
-        this.$nextTick(function () {
+  beforeDestroy() {
-            this.drawBar();
+    /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
-        });
-    },
-    methods: {
-        drawBar() {
-            // 基于准备好的dom，初始化echarts实例
-            var myChart = this.$echarts.init(this.$refs.pieChart);
-            // 绘制图表
-            myChart.setOption({
-                legend: {
-                    orient: 'vertical',
-                    top: 'center',
-                    left: 'right'
-                },
-                tooltip: {
-                    trigger: 'item'
-                },
-                series: [
-                    {
-                        // name: 'Access From',
-                        type: 'pie',
-                        radius: ['40%', '70%'],
-                        center: ['35%', '50%'],
-                        avoidLabelOverlap: false,
-                        itemStyle: {
-                            borderRadius: 10,
-                            borderColor: '#fff',
-                            borderWidth: 2
-                        },
-                        label: {
-                            show: false,
-                            position: 'center'
-                        },
-                        emphasis: {
-                            label: {
-                                show: false,
-                                fontSize: 40,
-                                fontWeight: 'bold'
-                            }
-                        },
-                        labelLine: {
-                            show: false
-                        },
-                        data: this.pieData
-                    }
-                ]
-            });
-            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();
+      myChart.resize();
-        });
+    });
-    }
+  },
 };
 </script>
 <style lang="less">
 #myMidChart {
-    width: 100%;
+  width: 100%;
-    height: 240px;
+  height: 240px;
 }
 </style>

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,
+                fontSize: 12,
-                fontWeight: "bold",
+                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,
+                fontSize: 14,
-                fontWeight: "bold",
+                fontWeight: "normal",
                 formatter: "{b}\n{d}%",
               },
               emphasis: {
                 label: {
                   show: true,
-                  fontSize: 26,
+                  fontSize: 14,
-                  fontWeight: "bold",
+                  fontWeight: "normal",
                   formatter: "{b}\n{d}%",
                 },
               },