This commit is contained in:
lcw
2025-10-23 00:59:43 +08:00

View File

@ -9,6 +9,7 @@
import { ref, reactive, computed, onMounted } from "vue";
// 引入Echarts
import * as echarts from "echarts";
import 'echarts-gl';
// 引入崇州市地图json数据
import sichuanJSON from "@/assets/json/sichuan.json";
// 引入本地撒点图片
@ -116,64 +117,57 @@ let option = {
tooltip: {
trigger: "item",
formatter: function (params) {
if (params.seriesType === "scatter") {
return `${params.name}<br/>合作社数量:${params.data.count}`;
if (params.seriesType === "scatter3D") {
return `${params.name}<br/>合作社数量:${params.data.count || 0}`;
}
return params.name;
}
},
geo: [
{
type: "map",
geo3D: {
type: "map3D",
map: "sichuan",
roam: true,
zoom: 1,
regionHeight: 6,
boxHeight: 2,
roam: false,
label: {
// show: true,
color: "#fff",
show: true,
color: "#CBF2FA",
fontSize: 12,
fontWeight: "bold",
emphasis: {
show: true, // 确保悬停时标签显示
color: "#ffff00", // 鼠标悬停时的文字颜色
fontSize: 14, // 鼠标悬停时的文字大小
fontWeight: "bold" // 鼠标悬停时的文字粗细
}
fontWeight: "bold"
},
itemStyle: {
normal: {
color: "#121516",
borderColor: "#30DCFF", // 地图区域描边颜色
borderWidth: 2 // 地图区域描边宽度
color: "rgba(5,75,189,0.85)",
borderColor: "#61CFF8",
borderWidth: 2,
opacity: 0.95
},
emphasis: {
color: "#2d5565", // 鼠标悬停时的地图填充颜色
borderColor: "#30DCFF", // 地图区域描边颜色
borderWidth: 2 // 地图区域描边宽度
}
}
}
],
itemStyle: { color: "rgba(60,140,255,0.9)" },
label: { color: "#ffff00" }
},
light: {
main: { intensity: 1.6, shadow: true, shadowQuality: "high" },
ambient: { intensity: 0.35 }
},
shading: "lambert",
viewControl: { distance: 110, alpha: 45, beta: 15 },
groundPlane: { show: false },
postEffect: { enable: true, bloom: { enable: true, bloomIntensity: 0.25 } }
},
series: [
{
name: "城市点位",
type: "scatter", // 散点图类型
coordinateSystem: "geo", // 使用地理坐标系
data: initialPoints,
symbolSize: function (val) {
// 根据数值大小动态调整点的大小
// return val[2] / 6;
return 50;
},
label: {
show: false, // 改为 true 显示标签
formatter: "{b}", // 显示城市名称
position: "right", // 标签位置在点的上方
color: "#fff", // 标签颜色
fontSize: 16, // 字体大小
fontWeight: "bold" // 字体粗细
},
symbol: "image://" + pointImage // 使用本地图片作为标记
name: "城市点位(3D)",
type: "scatter3D",
coordinateSystem: "geo3D",
data: initialPoints.map(p => ({
name: p.name,
value: [p.value[0], p.value[1], 6],
count: p.count
})),
symbol: "triangle",
symbolSize: 12,
itemStyle: { color: "#FFBE34" },
label: { show: false }
}
]
};