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