修改地图撒点数据处理
This commit is contained in:
@ -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'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user