浅色确定
This commit is contained in:
lnljyang
BIN
src/assets/img/new/hydrogen.png
Normal file
BIN
src/assets/img/new/hydrogen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
src/assets/img/new/truck.png
Normal file
BIN
src/assets/img/new/truck.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
@@ -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 +
|
||||
"<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) => {
|
||||
//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 +
|
||||
"<br> 加氢站总数：" +
|
||||
@@ -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,
|
||||
},
|
||||
],
|
||||
//动画效果
|
||||
|
||||
Reference in New Issue
Block a user