{
name: "标点",
type: "scatter3D",
coordinateSystem: "geo3D",
label: {
normal: {
show: true,
position: "top",
distance: -10,
rich: {
power: {
width: 50,
height: 50,
color: "transparent",
padding: [0, 0],
backgroundColor: {
image: require("../../../assets/images/largeScreen/distribution_cabinet_map.png"),
// image: function (params) {
// console.log(params);
// if (params.data.type == "P") {
// return require("../../../assets/images/largeScreen/distribution_cabinet_map.png");
// } else if (params.data.type == "G") {
// return require("../../../assets/images/largeScreen/solar_map_power.png");
// }
// },
},
},
camera: {
width: 50,
height: 50,
color: "transparent",
padding: [0, 0],
backgroundColor: {
image: require("../../../assets/images/largeScreen/camera_map.png"),
},
},
weather: {
width: 50,
height: 50,
color: "transparent",
padding: [0, 0],
backgroundColor: {
image: require("../../../assets/images/largeScreen/weather_equipment_map.png"),
},
},
radar: {
width: 50,
height: 50,
color: "transparent",
padding: [0, 0],
backgroundColor: {
image: require("../../../assets/images/largeScreen/radar_map_logo.png"),
},
},
solar: {
width: 50,
height: 50,
color: "transparent",
padding: [0, 0],
backgroundColor: {
image: require("../../../assets/images/largeScreen/solar_map_power.png"),
},
},
},
formatter(params) {
console.log(params);
if (params.data.type == "P") {
return "{power|" + "" + "}";
} else if (params.data.type == "G") {
return "{solar|" + "" + "}";
}
},
},
},
symbol: "circle",
symbolSize: 0,
// symbol: 'image://'+require("../../../assets/images/largeScreen/distribution_cabinet_map.png"),
// symbolSize: 600,
itemStyle: {
opacity: 0.8,
borderWidth: 1,
borderColor: "#fff",
},
data: [
// 标点数据
{ name: "标点1", type: "P", value: [119.01924, 32.517986] },
{ name: "标点1", type: "G", value: [119.81924, 32.517986] },
// ...
],
},
Echarts 根据data里面的type 使用rich自定义富文本的backgroundColor里面的image
最新推荐文章于 2024-04-12 16:15:40 发布