diff --git a/src/assets/img/new/hydrogen.png b/src/assets/img/new/hydrogen.png
new file mode 100644
index 0000000..7d98be5
Binary files /dev/null and b/src/assets/img/new/hydrogen.png differ
diff --git a/src/assets/img/new/truck.png b/src/assets/img/new/truck.png
new file mode 100644
index 0000000..f6460ee
Binary files /dev/null and b/src/assets/img/new/truck.png differ
diff --git a/src/views/indexs/center-map.vue b/src/views/indexs/center-map.vue
index 540970e..1d507ce 100644
--- a/src/views/indexs/center-map.vue
+++ b/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://https://lnh2etest.oss-cn-shanghai.aliyuncs.com/truck25.png",
- symbolSize: function (val) {
- return 20;
- // return val[2] / 50;
- },
+ symbol: "image://" + this.truckIcon,
+ symbolSize: 24,
itemStyle: {
- borderColor: "#46AEF4",
- borderWidth: 2
+ borderColor: "#10B981",
+ 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,
- //trigger: "item",
+ show: true,
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 +
"
车辆总数：" +
params.data["value"][2] +
- "
GPS在线总数：" +
+ "
GPS在线总数：" +
params.data["value"][3] +
"
当日里程: " +
params.data["value"][4] +
@@ -473,7 +477,6 @@ export default {
params.data["value"][6] +
"kg"
);
- //return '${params.name}
车辆总数：${params.data[value][2]}
GPS在线总数：${ params.data.[value][3]}';
}
},
backgroundColor: "rgba(255,255,255,0.8)",
@@ -483,11 +486,7 @@ export default {
},
},
label: {
- formatter: (param) => {
- //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);
- },
+ formatter: (param) => 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",
- // coordinateSystem: "geo",
- // symbolSize: function (val) {
- // return 4;
- // // return val[2] / 50;
- // },
- type: "scatter",
+ type: "effectScatter",
coordinateSystem: "geo",
- symbolSize: 8,
+ symbol: "circle",
+ symbolSize: 20,
itemStyle: {
- color: "#FF6B6B",
- borderColor: "#46AEF4",
- borderWidth: 2
+ color: "#7BC69B",
+ shadowBlur: 10,
+ 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,
- scale: 6,
- color: "rgba(255,255,255, 1)",
- brushType: "fill",
+ period: 3.5,
+ scale: 4,
+ brushType: "stroke",
+ 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 +
"
加氢站总数：" +
@@ -695,11 +704,7 @@ export default {
},
},
label: {
- formatter: (param) => {
- //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);
- },
+ formatter: (param) => param.name.slice(0, 2),
fontSize: 11,
offset: [0, 2],
position: "bottom",
@@ -710,14 +715,26 @@ export default {
color: "#333333",
show: false,
},
- // colorBy: "data",
- // itemStyle: {
- // color: "rgba(255,255,255,1)",
- // borderColor: "rgba(2255,255,255,2)",
- // borderWidth: 4,
- // shadowColor: "#000",
- // shadowBlur: 10,
- // },
+ zlevel: 2,
+ },
+ // 加氢站呼吸动画层
+ {
+ data: data2,
+ type: "effectScatter",
+ 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,
},
],
//动画效果