修改地图撒点数据处理

This commit is contained in:
maojiacai
2025-10-31 12:51:49 +08:00
parent 47ef3fcac8
commit 210231ada4

View File

@ -65,9 +65,8 @@ const generateRandomHeights = (points, minHeight = 10, maxHeight = 25) => {
}));
};
// 获取动态配置 - 只展示 initialPoints 中的数据
// 获取动态配置
const getChartOption = () => {
// 每次调用生成新的随机高度
const pointsWithRandomHeights = generateRandomHeights(initialPoints);
return {
@ -83,7 +82,7 @@ const getChartOption = () => {
borderColor: "#30DCFF",
textStyle: {
color: "#fff",
fontSize: calcResponsivePX(12)
fontSize: 12
}
},
geo3D: {
@ -91,20 +90,18 @@ const getChartOption = () => {
map: "sichuan",
regionHeight: 6,
boxHeight: 2,
roam: false,
roam: true,
label: {
show: false, // 隐藏地图区域标签,只显示散点
show: false,
color: "#fff",
fontSize: calcResponsivePX(10),
fontWeight: "bold",
borderWidth: 5,
borderColor: "rgba(40,40,41,0.48)"
fontSize: 10,
fontWeight: "bold"
},
itemStyle: {
color: "rgba(27,129,150,0.18)",
borderColor: "#61cfff",
borderWidth: 2,
opacity: 0.3 // 降低地图透明度,突出散点
opacity: 0.3
},
emphasis: {
itemStyle: {
@ -129,14 +126,7 @@ const getChartOption = () => {
alpha: 45,
beta: 10
},
groundPlane: { show: false },
postEffect: {
enable: true,
bloom: {
enable: true,
bloomIntensity: 0.25
}
}
groundPlane: { show: false }
},
series: [
{
@ -147,35 +137,33 @@ const getChartOption = () => {
name: p.name,
value: p.value,
count: p.count,
// 为每个点单独配置 label
// 关键:使用正确的 label 配置方式
label: {
show: true,
position: [0, 0, p.value[2] + 3], // 3D坐标 [x, y, z]在点上方3个单位
formatter: p.name,
backgroundColor: 'rgba(0,0,0,0.7)',
borderWidth: 1,
padding: [2, 6],
borderRadius: 3,
color: '#fff',
fontSize: 10
position: [p.value[2] + 5, p.value[2] + 5, p.value[2] + 5], // [x, y, z] - 在点上方固定偏移
distance: 0, // 重要设置为0使用绝对位置
textStyle: {
backgroundColor: 'rgba(0,0,0,0.7)',
borderWidth: 1,
borderColor: '#30dcff',
padding: [4, 8],
borderRadius: 4,
color: '#fff',
fontSize: 10
}
}
})),
symbol: "triangle", // 改为圆形,更明显
symbolSize: calcResponsivePX(12), // 增大符号尺寸
itemStyle: { color: "#FFBE34" },
// label: {
// show: true,
// position: "top",
// formatter: "{b}", // 只显示名称
// color: "#FFF",
// fontSize: calcResponsivePX(11),
// fontWeight: "bold",
// backgroundColor: "rgba(0,0,0,0.8)",
// // borderColor: "#FFBE34",
// borderWidth: calcResponsivePX(1),
// padding: [4, 6],
// borderRadius: calcResponsivePX(1)
// }
label: {
textStyle: {
backgroundColor: 'rgba(255,190,52,0.9)',
color: '#000',
fontWeight: 'bold'
}
}
}
]
}