diff --git a/src/views/recruitment/card/LaborSystemTwo.vue b/src/views/recruitment/card/LaborSystemTwo.vue index 95a2696..9e5990f 100644 --- a/src/views/recruitment/card/LaborSystemTwo.vue +++ b/src/views/recruitment/card/LaborSystemTwo.vue @@ -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,66 +117,59 @@ let option = { tooltip: { trigger: "item", formatter: function (params) { - if (params.seriesType === "scatter") { - return `${params.name}
合作社数量:${params.data.count}`; + if (params.seriesType === "scatter3D") { + return `${params.name}
合作社数量:${params.data.count || 0}`; } return params.name; } }, - geo: [ - { - type: "map", - map: "sichuan", - roam: true, - zoom: 1, - label: { - // show: true, - color: "#fff", - fontSize: 12, - fontWeight: "bold", - emphasis: { - show: true, // 确保悬停时标签显示 - color: "#ffff00", // 鼠标悬停时的文字颜色 - fontSize: 14, // 鼠标悬停时的文字大小 - fontWeight: "bold" // 鼠标悬停时的文字粗细 - } - }, - itemStyle: { - normal: { - color: "#121516", - borderColor: "#30DCFF", // 地图区域描边颜色 - borderWidth: 2 // 地图区域描边宽度 - }, - emphasis: { - color: "#2d5565", // 鼠标悬停时的地图填充颜色 - borderColor: "#30DCFF", // 地图区域描边颜色 - borderWidth: 2 // 地图区域描边宽度 - } - } - } - ], + geo3D: { + type: "map3D", + map: "sichuan", + regionHeight: 6, + boxHeight: 2, + roam: false, + label: { + show: true, + color: "#CBF2FA", + fontSize: 12, + fontWeight: "bold" + }, + itemStyle: { + color: "rgba(5,75,189,0.85)", + borderColor: "#61CFF8", + borderWidth: 2, + opacity: 0.95 + }, + emphasis: { + 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 } + } + ] }; // 生命周期钩子