推送

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";
 // 引入本地撒点图片
@@ -44,66 +45,59 @@ 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",
-      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 }
+      }
+    ]
 };
 
 // 生命周期钩子