去掉大屏点

src/views/map/components/map-item-container.vue

@@ -31,6 +31,7 @@ export default {
     height: 40px;
     background-image: url("../../../assets/map/title.png");
     background-repeat: no-repeat;
+    background-size: 100% 100%;
     font-size: 19px;
     color: #fff;
     padding-left: 64px;

src/views/map/components/map-item-pie.vue

@@ -312,10 +312,10 @@ export default {
           },
           textStyle: {
             color: "#fff",
-            fontSize: 16,
+            fontSize: 10,
           },
           rich: {
-            align: "center",
+            align: "right",
             text: {
               fontSize: 14,
               color: "#fff",

src/views/map/components/map-table.vue

@@ -80,7 +80,7 @@ export default {
   height: 100%;
   overflow: hidden;
   &-box {
-    height: 100%;
+    height: calc(100% - 20px);
     overflow: auto;
   }
 }

src/views/map/map-index.vue

@@ -35,15 +35,15 @@
           <echartMap />
         </map-item-container>
         <map-item-container title="事故类型统计">
-          <div style="columns: 4">
+          <div style="columns: 4" class="echarts-accident">
             <div
-              v-for="item in 10"
+              v-for="(item, index) in accidentList"
               :key="item"
-              :style="randomCircle()"
+              :style="randomCircle(item, index)"
               class="map-circle-item"
             >
-              <div>物体打击</div>
-              <div>1455</div>
+              <div>{{ item.name }}</div>
+              <div>{{ item.value }}</div>
             </div>
           </div>
         </map-item-container>
@@ -69,15 +69,76 @@ export default {
   },
   data() {
     return {
+      accidentList: [
+        {
+          name: "物体打击",
+          value: 1455,
+          width: 100,
+          top: 17,
+          left: 100,
+        },
+        {
+          name: "物体打击",
+          value: 1455,
+          width: 60,
+          top: 118,
+          left: 150,
+        },
+        {
+          name: "物体打击",
+          value: 1455,
+          width: 60,
+          top: 40,
+          left: 22,
+        },
+        // {
+        //   name: "物体打击",
+        //   value: 1455,
+        //   width: 60,
+        //   top: 162,
+        //   left: 96,
+        // },
+        {
+          name: "物体打击",
+          value: 1455,
+          width: 60,
+          top: 110,
+          left: 38,
+        },
+        {
+          name: "物体",
+          value: 1455,
+          width: 50,
+          top: 140,
+          left: 100,
+        },
+        {
+          name: "物体打击",
+          value: 1455,
+          width: 60,
+          top: 60,
+          left: 230,
+        },
+        {
+          name: "其他",
+          value: 1455,
+          width: 40,
+          top: 140,
+          left: 220,
+        },
+      ],
       name: 100000,
       myMap: null,
       mapData: [],
       myTopLeft: [],
       tableList: [],
       level: "",
+      circlePos: [],
     };
   },
   mounted() {
+    this.circlePos = this.generateRandomPointsInCircle(10);
+    console.log(this.circlePos);
     this.myMap = echarts.init(this.$refs.myEchart);
     this.initMap();
     this.initListeners();
@@ -108,17 +169,43 @@ export default {
         });
       }
     },
-    randomCircle() {
+    generateRandomPointsInCircle(numPoints) {
+      var points = [];
+      const center = [100, 80];
+      const radius = 65;
+
+      // var angleIncrement = (2 * Math.PI) / numPoints;
+
+      for (var i = 0; i < numPoints; i++) {
+        var angle = Math.random() * 2 * Math.PI;
+        var x = center[0] + radius * Math.cos(angle);
+        var y = center[1] + radius * Math.sin(angle);
+        points.push([x, y]);
+      }
+      return points;
+    },
+
+    randomCircle(item, index) {
       const w = parseInt(Math.random() * 40 + 50);
-      let r = Math.floor(Math.random() * 256); //0-255.999999
-      let g = Math.floor(Math.random() * 256);
-      let b = Math.floor(Math.random() * 256);
-      return {
-        width: w + "px",
-        height: w + "px",
-        backgroundColor: `rgba(${r},${g},${b},0.4)`,
-        color: `rgb(${r},${g},${b})`,
-      };
+      // let r = Math.floor(Math.random() * 256); //0-255.999999
+      // let g = Math.floor(Math.random() * 256);
+      // let b = Math.floor(Math.random() * 256);
+      var brightness = 100; // 设置亮度
+      var r = Math.floor(Math.random() * (256 - brightness) + brightness);
+      var g = Math.floor(Math.random() * (256 - brightness) + brightness);
+      var b = Math.floor(Math.random() * (256 - brightness) + brightness);
+      console.log(this.circlePos[index]);
+      if (this.circlePos.length) {
+        return {
+          width: item.width + "px",
+          height: item.width + "px",
+          backgroundColor: `rgba(${r},${g},${b},0.4)`,
+          color: `rgb(${r},${g},${b})`,
+          position: "absolute",
+          left: item.left + "px",
+          top: item.top + "px",
+        };
+      }
     },
     initMap(code = 100000) {
       if (code != this.name) {
@@ -194,13 +281,13 @@ export default {
                   },
                   data: regions,
                 },
-                {
-                  type: "scatter3D",
-                  coordinateSystem: "geo3D",
-                  symbolSize: 20,
-                  data: regions,
-                  zlevel: 1,
-                },
+                // {
+                //   type: "scatter3D",
+                //   coordinateSystem: "geo3D",
+                //   symbolSize: 20,
+                //   data: regions,
+                //   zlevel: 1,
+                // },
               ],
             },
             {
@@ -394,8 +481,8 @@ export default {
           },
         },
         grid3D: {
-          boxWidth: 200,
-          boxHeight: 100,
+          boxWidth: 230,
+          boxHeight: 120,
           boxDepth: 90,
           viewControl: {
             alpha: 0,
@@ -551,14 +638,18 @@ export default {
   flex-direction: column;
   font-size: 14px;
 }
+
+.map-circle-item:nth-of-type(2n + 1) {
+  animation: circleAnimation 1.8s infinite;
+}
 .map-circle-item:nth-of-type(2n) {
-  animation: circleAnimation 1s infinite;
+  animation: circleAnimation 2s infinite;
 }
-.map-circle-item:nth-of-type(2n + 1) {
-  animation: circleAnimation 1.3s infinite;
+.map-circle-item:nth-of-type(1) {
+  animation: circleAnimation 2.5s infinite;
 }
 .map-circle-item:last-child {
-  animation: circleAnimation 1.6s infinite;
+  animation: circleAnimation 1.2s infinite;
 }
 
 @keyframes circleAnimation {
@@ -627,11 +718,21 @@ export default {
   }
 }
 .map-index {
+  width: 98%;
+  margin: 0 auto;
   .map-content-item {
     height: 34%;
   }
 }
 ::v-deep .map-content-title {
-  background-size: 100% 100%;
+  // background-size: 100% 100%;
+}
+.echarts-accident {
+  width: 90%;
+  height: 90%;
+  margin: 0 auto;
+  background: url("../../assets/map/accident.png") center bottom no-repeat;
+  background-size: 100%;
+  position: relative;
 }
 </style>