浅色确定

src/views/indexs/center-map.vue

@@ -51,9 +51,13 @@ import { currentGET } from "api/modules";
 import * as echarts from "echarts";
 import { GETNOBASE } from "api";
 import { currentPOST } from "@/api";
+import truckIcon from "@/assets/img/new/truck.png";
+import stationIcon from "@/assets/img/new/hydrogen.png";
 export default {
   data() {
     return {
+      truckIcon,
+      stationIcon,
       maptitle: "2536238",
       maptitle2: "",
       options: {},
@@ -420,50 +424,50 @@ export default {
               shadowBlur: 10,
             },
           },
+          // 车辆涟漪效果层
+          {
+            data: data2,
+            type: "effectScatter",
+            coordinateSystem: "geo",
+            symbol: "circle",
+            symbolSize: 20,
+            itemStyle: {
+              color: "#10B981",
+              shadowBlur: 10,
+              shadowColor: "#10B981",
+            },
+            showEffectOn: "render",
+            rippleEffect: {
+              period: 3,
+              scale: 4,
+              brushType: "stroke",
+              color: "rgba(16, 185, 129, 0.6)",
+            },
+            zlevel: 1,
+          },
+          // 车辆图标层
           {
             data: data2,
             type: "scatter",
             coordinateSystem: "geo",
-            geoIndex: 1,
+            symbol: "image://" + this.truckIcon,
-            symbol:
+            symbolSize: 24,
-              "image://https://lnh2etest.oss-cn-shanghai.aliyuncs.com/truck25.png",
-            symbolSize: function (val) {
-              return 20;
-              // return val[2] / 50;
-            },
             itemStyle: {
-              borderColor: "#46AEF4",
+              borderColor: "#10B981",
-              borderWidth: 2
+              borderWidth: 2,
+              shadowBlur: 8,
+              shadowColor: "rgba(16, 185, 129, 0.5)",
             },
             legendHoverLink: true,
-            showEffectOn: "render",
-            rippleEffect: {
-              // period: 4,
-              scale: 6,
-              color: "rgba(255,255,255, 1)",
-              brushType: "fill",
-            },
             tooltip: {
-              show: false,
+              show: true,
-              //trigger: "item",
               formatter: function (params) {
-                //console.log("series 2 formatter");
-                //console.log(params);
                 if (params.data) {
-                  console.log("params.data");
-                  console.log(params.data);
-                  console.log(
-                    params.data.name +
-                      "\n 车辆总数：" +
-                      params.data["value"][2] +
-                      "\n  GPS在线总数：" +
-                      params.data["value"][3]
-                  );
                   return (
                     params.data.name +
                     "<br> 车辆总数：" +
                     params.data["value"][2] +
-                    "<br>  GPS在线总数：" +
+                    "<br> GPS在线总数：" +
                     params.data["value"][3] +
                     "<br>当日里程: " +
                     params.data["value"][4] +
@@ -473,7 +477,6 @@ export default {
                     params.data["value"][6] +
                     "kg"
                   );
-                  //return '${params.name} <br />车辆总数：${params.data[value][2]} <br />  GPS在线总数：${ params.data.[value][3]}';
                 }
               },
               backgroundColor: "rgba(255,255,255,0.8)",
@@ -483,11 +486,7 @@ export default {
               },
             },
             label: {
-              formatter: (param) => {
+              formatter: (param) => param.name.slice(0, 2),
-                //return param.name.slice(0, 2) + "\n 车辆总数："+param.data["value"][2] + "\n GPS在线数："+param.data["value"][3];   //2025.03.28
-                //return param.name.slice(0, 2) + "\n "+param.data["value"][2];       //2025.03.31
-                return param.name.slice(0, 2);
-              },
               fontSize: 11,
               offset: [0, 2],
               position: "bottom",
@@ -496,9 +495,27 @@ export default {
               textShadowBlur: 10,
               textBorderWidth: 0,
               color: "#333333",
-              show: false,
             },
-            // colorBy: "data",
+            zlevel: 2,
+          },
+          // 车辆呼吸动画层
+          {
+            data: data2,
+            type: "effectScatter",
+            coordinateSystem: "geo",
+            symbol: "image://" + this.truckIcon,
+            symbolSize: 28,
+            showEffectOn: "render",
+            rippleEffect: {
+              period: 2.5,
+              scale: 1.2,
+              brushType: "stroke",
+              color: "rgba(16, 185, 129, 0.4)",
+            },
+            itemStyle: {
+              opacity: 0.6,
+            },
+            zlevel: 0,
           },
         ],
         //动画效果
@@ -632,53 +649,45 @@ export default {
               shadowBlur: 10,
             },
           },
+          // 加氢站涟漪效果层
           {
             data: data2,
-            geoIndex: 1,
+            type: "effectScatter",
-            // type: "effectScatter",
-            // coordinateSystem: "geo",
-            // symbolSize: function (val) {
-            //   return 4;
-            //   // return val[2] / 50;
-            // },
-            type: "scatter",
             coordinateSystem: "geo",
-            symbolSize: 8,
+            symbol: "circle",
+            symbolSize: 20,
             itemStyle: {
-              color: "#FF6B6B",
+              color: "#7BC69B",
-              borderColor: "#46AEF4",
+              shadowBlur: 10,
-              borderWidth: 2
+              shadowColor: "#7BC69B",
             },
-            // symbol:
-            //   "image://https://lnh2etest.oss-cn-shanghai.aliyuncs.com/station25.png",
-            // symbolSize: function (val) {
-            //   return 20;
-            //   // return val[2] / 50;
-            // },
-            legendHoverLink: true,
             showEffectOn: "render",
             rippleEffect: {
-              // period: 4,
+              period: 3.5,
-              scale: 6,
+              scale: 4,
-              color: "rgba(255,255,255, 1)",
+              brushType: "stroke",
-              brushType: "fill",
+              color: "rgba(123, 198, 155, 0.6)",
             },
+            zlevel: 1,
+          },
+          // 加氢站图标层
+          {
+            data: data2,
+            type: "scatter",
+            coordinateSystem: "geo",
+            symbol: "image://" + this.stationIcon,
+            symbolSize: 24,
+            itemStyle: {
+              borderColor: "#7BC69B",
+              borderWidth: 2,
+              shadowBlur: 8,
+              shadowColor: "rgba(123, 198, 155, 0.5)",
+            },
+            legendHoverLink: true,
             tooltip: {
               show: false,
-              //trigger: "item",
               formatter: function (params) {
-                //console.log("series 2 formatter");
-                //console.log(params);
                 if (params.data) {
-                  console.log("params.data");
-                  console.log(params.data);
-                  console.log(
-                    params.data.name +
-                      "\n 加氢站总数:" +
-                      params.data["value"][2] +
-                      "\n  当前运营总数:" +
-                      params.data["value"][3]
-                  );
                   return (
                     params.data.name +
                     "<br> 加氢站总数：" +
@@ -695,11 +704,7 @@ export default {
               },
             },
             label: {
-              formatter: (param) => {
+              formatter: (param) => param.name.slice(0, 2),
-                //return param.name.slice(0, 2) + "\n 车辆总数："+param.data["value"][2] + "\n GPS在线数："+param.data["value"][3];   //2025.03.28
-                //return param.name.slice(0, 2) + "\n "+param.data["value"][2];       //2025.03.31
-                return param.name.slice(0, 2);
-              },
               fontSize: 11,
               offset: [0, 2],
               position: "bottom",
@@ -710,14 +715,26 @@ export default {
               color: "#333333",
               show: false,
             },
-            // colorBy: "data",
+            zlevel: 2,
-            // itemStyle: {
+          },
-            //   color: "rgba(255,255,255,1)",
+          // 加氢站呼吸动画层
-            //   borderColor: "rgba(2255,255,255,2)",
+          {
-            //   borderWidth: 4,
+            data: data2,
-            //   shadowColor: "#000",
+            type: "effectScatter",
-            //   shadowBlur: 10,
+            coordinateSystem: "geo",
-            // },
+            symbol: "image://" + this.stationIcon,
+            symbolSize: 28,
+            showEffectOn: "render",
+            rippleEffect: {
+              period: 3,
+              scale: 1.2,
+              brushType: "stroke",
+              color: "rgba(123, 198, 155, 0.4)",
+            },
+            itemStyle: {
+              opacity: 0.6,
+            },
+            zlevel: 0,
           },
         ],
         //动画效果