推送

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") {
+      if (params.seriesType === "scatter3D") {
-        return `${params.name}<br/>合作社数量：${params.data.count}`;
+        return `${params.name}<br/>合作社数量：${params.data.count || 0}`;
       }
       return params.name;
     }
   },
-  geo: [
+  geo3D: {
-    {
+    type: "map3D",
-      type: "map",
+    map: "sichuan",
-      map: "sichuan",
+    regionHeight: 6,
-      roam: true,
+    boxHeight: 2,
-      zoom: 1,
+    roam: false,
-      label: {
+    label: {
-        // show: true,
+      show: true,
-        color: "#fff",
+      color: "#CBF2FA",
-        fontSize: 12,
+      fontSize: 12,
-        fontWeight: "bold",
+      fontWeight: "bold"
-        emphasis: {
+    },
-          show: true, // 确保悬停时标签显示
+    itemStyle: {
-          color: "#ffff00", // 鼠标悬停时的文字颜色
+      color: "rgba(5,75,189,0.85)",
-          fontSize: 14, // 鼠标悬停时的文字大小
+      borderColor: "#61CFF8",
-          fontWeight: "bold" // 鼠标悬停时的文字粗细
+      borderWidth: 2,
-        }
+      opacity: 0.95
-      },
+    },
-      itemStyle: {
+    emphasis: {
-        normal: {
+      itemStyle: { color: "rgba(60,140,255,0.9)" },
-          color: "#121516",
+      label: { color: "#ffff00" }
-          borderColor: "#30DCFF", // 地图区域描边颜色
+    },
-          borderWidth: 2 // 地图区域描边宽度
+    light: {
-        },
+      main: { intensity: 1.6, shadow: true, shadowQuality: "high" },
-        emphasis: {
+      ambient: { intensity: 0.35 }
-          color: "#2d5565", // 鼠标悬停时的地图填充颜色
+    },
-          borderColor: "#30DCFF", // 地图区域描边颜色
+    shading: "lambert",
-          borderWidth: 2 // 地图区域描边宽度
+    viewControl: { distance: 110, alpha: 45, beta: 15 },
-        }
+    groundPlane: { show: false },
-      }
+    postEffect: { enable: true, bloom: { enable: true, bloomIntensity: 0.25 } }
-    }
+  },
-  ],
   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 // 使用本地图片作为标记
-    }
-  ]
 };
 
 // 生命周期钩子