From f59fb29b873ec3ae62e8b4715218ca3caf4a2235 Mon Sep 17 00:00:00 2001 From: lnljyang <506960565@qq.com> Date: Wed, 18 Mar 2026 09:29:26 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B5=85=E8=89=B2=E7=A1=AE=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/new/hydrogen.png | Bin 0 -> 3829 bytes src/assets/img/new/truck.png | Bin 0 -> 3373 bytes src/views/indexs/center-map.vue | 189 +++++++++++++++++--------------- 3 files changed, 103 insertions(+), 86 deletions(-) create mode 100644 src/assets/img/new/hydrogen.png create mode 100644 src/assets/img/new/truck.png diff --git a/src/assets/img/new/hydrogen.png b/src/assets/img/new/hydrogen.png new file mode 100644 index 0000000000000000000000000000000000000000..7d98be58211501ffcd65cf92925aaa14672f4a23 GIT binary patch literal 3829 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 literal 0 HcmV?d00001 diff --git a/src/assets/img/new/truck.png b/src/assets/img/new/truck.png new file mode 100644 index 0000000000000000000000000000000000000000..f6460ee9d8c4f07a6f3a91eaa0ad093535c0c796 GIT binary patch literal 3373 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 D#+iml literal 0 HcmV?d00001 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, }, ], //动画效果