perf: 优化

src/views/home/components/RiskIdentification/index.vue

@@ -70,6 +70,16 @@ export default {
 
       // 指定图表的配置项和数据
       var option = {
+        title: {
+          show: data.length == 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: 20,
+          },
+          text: "暂无数据",
+          left: "center",
+          top: "center",
+        },
         tooltip: {
           trigger: "item",
         },

src/views/home/components/TargetMonth/index.vue

@@ -309,6 +309,16 @@ export default {
       }
       // 指定图表的配置项和数据
       var option = {
+        title: {
+          show: data.length == 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: 20,
+          },
+          text: "暂无数据",
+          left: "center",
+          top: "center",
+        },
         tooltip: {
           trigger: "axis",
           formatter: function (params) {

src/views/home/components/TargetSituation/index.vue

@@ -197,6 +197,16 @@ export default {
       const ratioData = this.dataList.map((ite) => ite[zdlx[2]] || "0%");
       // 指定图表的配置项和数据
       var option = {
+        title: {
+          show: this.dataList.length == 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: 20,
+          },
+          text: "暂无数据",
+          left: "center",
+          top: "center",
+        },
         tooltip: {
           trigger: "axis",
           axisPointer: {

src/views/home/components/map/index.vue

@@ -15,19 +15,8 @@
       >
       </el-date-picker>
     </div>
-    <!-- <div class="flex align-middle">
-      <el-button @click="back" type="text" v-if="currentMap != '衡阳市'"
-        >返回></el-button
-      >
-    </div> -->
     <div style="display: flex; justify-content: space-between; height: 100%">
       <div id="hy-map" style="width: 100%; height: 100%"></div>
-      <!--div class="item-container">
-        <div class="item" v-for="(ite, i) in itemData" :key="i">
-          <div class="val">121</div>
-          <div class="lab">{{ ite.lable }}</div>
-        </div>
-      </div-->
     </div>
   </div>
 </template>
@@ -97,135 +86,6 @@ export default {
       this.currentMap = "衡阳市";
       this.initMap();
     },
-    initCharts(json = require("./衡阳市.json")) {
-      const chartDom = document.querySelector("#hy-map");
-      const myChart = echarts.init(chartDom);
-      echarts.registerMap("js", json);
-      var option = {
-        tooltip: {
-          trigger: "item",
-          alwaysShowContent: true,
-          formatter: function (params) {
-            return params.name + "<br/>作业数量 " + params.value;
-          },
-        },
-        // visualMap: {
-        //   show: false,
-        //   min: 0,
-        //   max: 100,
-        //   text: ["低", "高"],
-        //   left: 10,
-        //   y: "center",
-        //   calculable: true,
-        //   inRange: {
-        //     color: ["#3a92fe", "#173881"],
-        //   },
-        //   itemWidth: 10,
-        //   itemHeight: 100,
-        //   textStyle: {
-        //     color: "#fff",
-        //   },
-        // },
-        geo: [
-          // {
-          //   show: true,
-          //   map: "js",
-          //   // center: [114, 32.9],
-          //   z: 4,
-          //   roam: false,
-          //   zoom: 1.2,
-          //   itemStyle: {
-          //     shadowColor: "#0c1c4e",
-          //     shadowOffsetX: 7,
-          //     shadowOffsetY: 7,
-          //   },
-          // },
-          // {
-          //   show: true,
-          //   map: "js",
-          //   // center: [114, 32.9],
-          //   z: 3,
-          //   roam: false,
-          //   zoom: 1.2,
-          //   itemStyle: {
-          //     shadowColor: "#3584EC",
-          //     shadowOffsetX: 8,
-          //     shadowOffsetY: 8,
-          //   },
-          // },
-        ],
-        series: [
-          {
-            type: "map",
-            mapType: "js", //自定义扩展图表类型
-            // center: [104, 32.9],
-            roam: false,
-            zoom: 1.2,
-            z: 10,
-            label: {
-              normal: {
-                show: true,
-                // formatter: "{t|}\n\n{b}",
-                textStyle: {
-                  color: "#fff",
-                },
-                rich: {
-                  t: {
-                    width: 13,
-                    height: 13,
-                    borderRadius: 10,
-                    backgroundColor: "#fff",
-                  },
-                },
-              },
-              emphasis: {
-                show: true,
-                textStyle: {
-                  color: "#fff", // 悬浮文字颜色
-                },
-              },
-            },
-            //单选
-            selectedMode: "single",
-            itemStyle: {
-              normal: {
-                areaColor: "#5a6fc0",
-                // areaColor: "rgba(11,42,96,0.8)",
-                borderColor: "rgba(11,42,96,0.4)",
-                // borderColor: "#2c71d7",
-                borderWidth: 2,
-              },
-              emphasis: {
-                areaColor: "rgba(11,42,96,0.8)",
-              },
-            },
-            select: {
-              label: {
-                // 选中区域的label(文字)样式
-                color: "#fff",
-              },
-              itemStyle: {
-                areaColor: "#5a6fc0", // 选中的区域颜色
-              },
-            },
-            data: this.mapData,
-          },
-        ],
-      };
-      myChart.setOption(option);
-      window.addEventListener("resize", () => {
-        myChart.resize();
-      });
-      myChart.dispatchAction({
-        type: "showTip",
-        seriesIndex: 0,
-        dataIndex: 3,
-      });
-      myChart.on("click", (params) => {
-        this.currentMap = params.name;
-        this.initCharts(mapEnum[params.name]);
-      });
-    },
     async initMap(json = require("./衡阳市.json")) {
       var data = [],
         geoCoordMap = {};
@@ -275,18 +135,18 @@ export default {
         //     color: ["#02367C", "#3a92fe"],
         //   },
         // },
-        visualMap: {
-          show: true,
-          min: 0,
-          max: 20000,
-          left: "10%",
-          bottom: "10%",
-          calculable: true,
-          seriesIndex: [0],
-          inRange: {
-            color: ["#04387b", "#467bc0"], // 蓝绿
-          },
-        },
+        // visualMap: {
+        //   show: true,
+        //   min: 0,
+        //   max: 20000,
+        //   left: "10%",
+        //   bottom: "10%",
+        //   calculable: true,
+        //   seriesIndex: [0],
+        //   inRange: {
+        //     color: ["#04387b", "#467bc0"], // 蓝绿
+        //   },
+        // },
         geo: [
           {
             show: true,
@@ -403,36 +263,6 @@ export default {
   padding-left: 10px;
   color: #00a4ff;
 }
-.item-container {
-  // height: 20%;
-  height: 97%;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  // flex-direction: column;
-  // align-content: space-between;
-  // justify-content: space-between;
-  .item {
-    flex: 0 0 50%;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    color: #fff;
-    align-items: center;
-    .val {
-      width: 65px;
-      height: 65px;
-      text-align: center;
-      line-height: 65px;
-      color: #fff;
-      border-radius: 50%;
-      background-image: linear-gradient(to bottom, #a3c1ee, #2c71d7);
-      margin-bottom: 8px;
-    }
-  }
-}
-::v-deep {
-}
 .orange {
   color: orange !important;
 }