修改大屏数据处理

src/views/recruitment/card/EnterpriseEmploymentTwo.vue

@@ -3,34 +3,54 @@
 </template>
 
 <script setup>
-// Vue 3 Composition API 的 setup 语法糖
-// 在这里直接编写响应式数据和方法，无需返回
-import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted, nextTick } from "vue";
 import * as echarts from "echarts";
+
 const enterpriseTwoRef = ref(null);
-let chart = null
-const option = {
-  // 添加标题
+let chart = null;
+
+// 响应式设计稿配置
+const designConfig = {
+  designWidth: 1920,
+  designHeight: 1080
+};
+
+// 计算实际的像素值（基于设计稿比例）
+function calcResponsivePX(pxValue) {
+  const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+  return (pxValue / designConfig.designWidth) * screenWidth;
+}
+
+// 计算 vw 单位值（真正的 vw）
+function calcVW(pxValue) {
+  return (pxValue / designConfig.designWidth) * 100;
+}
+
+// 计算 vh 单位值
+function calcVH(pxValue) {
+  return (pxValue / designConfig.designHeight) * 100;
+}
+
+// 图表配置
+const getChartOption = () => ({
   title: {
     text: '重点保供企业分布',
     left: 'center',
     top: '5%',
     textStyle: {
       color: '#30DCFF',
-      fontSize: 16,
+      fontSize: calcResponsivePX(16),
       fontWeight: 'normal'
     }
   },
-  // 设置图形位置
   grid: {
-    top: '20%',
-    left: '15%',
-    right: '5%',
-    bottom: '25%'
+    top: `${calcVH(210)}%`, // 使用 vh 确保垂直方向也响应式
+    left: `${calcVW(130)}%`,
+    right: `${calcVW(120)}%`,
+    bottom: `${calcVH(170)}%`
   },
   xAxis: {
     show: true,
-
     axisTick: {
       show: true,
       lineStyle: {
@@ -38,20 +58,19 @@ const option = {
       }
     },
     axisLabel: {
-      fontSize: 14,
+      fontSize: calcResponsivePX(12),
       color: '#CBF2FA',
       rotate: 0,
-      margin: 15,
       show: true,
       interval: 0,
-      hideOverlap: false
+      hideOverlap: false,
+      margin: calcResponsivePX(14)
     },
     type: "category",
     data: ["第一产业", "第二产业", "第三产业"]
   },
   yAxis: {
-    interval: 50, // 设置刻度间隔
-    //显示网格线
+    interval: 50,
     splitLine: {
       show: true,
       lineStyle: {
@@ -76,49 +95,54 @@ const option = {
       name: "企业数",
       type: "bar",
       showBackground: false,
-      barWidth: 25,
+      barWidth: calcResponsivePX(25), // 柱状图宽度也要响应式
       data: [6, 581, 41],
-      // 设置柱状图的数值
       label: {
         show: true,
         position: "top",
         color: '#30DCFF',
-        fontSize: 14,
+        fontSize: calcResponsivePX(14),
         formatter: function(params) {
           return params.value + '家';
         }
       },
       itemStyle: {
-        //纯色
         color: '#30DCFF'
       }
     }
   ]
-};
+});
 
 // 处理图表重绘
-function handleChartResize() {
+const handleChartResize = () => {
   if (chart) {
-    // 先重置图表尺寸
-    chart.resize()
-
-    chart.setOption(option, { notMerge: false, lazyUpdate: true })
+    chart.resize();
+    // 重新设置选项以更新所有响应式尺寸
+    chart.setOption(getChartOption(), true); // true 表示不合并，完全替换
   }
-}
+};
+
+// 初始化图表
+const initChart = () => {
+  if (!enterpriseTwoRef.value) return;
+
+  chart = echarts.init(enterpriseTwoRef.value);
+  chart.setOption(getChartOption());
+};
 
 // 生命周期钩子
 onMounted(() => {
-  if (enterpriseTwoRef.value) {
-    chart = echarts.init(enterpriseTwoRef.value);
-    // 设置option
-    chart.setOption(option);
-  }
-  window.addEventListener('resize', handleChartResize)
+  nextTick(() => {
+    initChart();
+  });
+  window.addEventListener('resize', handleChartResize);
 });
 
 onUnmounted(() => {
   window.removeEventListener('resize', handleChartResize);
-})
+  if (chart) {
+    chart.dispose();
+    chart = null;
+  }
+});
 </script>
-
-<style lang="scss" scoped></style>

src/views/recruitment/card/LaborSystemTwo.vue

@@ -6,19 +6,35 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
-// 引入Echarts
+import { ref, onMounted, onUnmounted, nextTick } from "vue";
 import * as echarts from "echarts";
 import 'echarts-gl';
-// 引入崇州市地图json数据
+import { debounce } from 'lodash';
+
+// 引入地图数据
 import sichuanJSON from "@/assets/json/sichuan.json";
-// 引入本地撒点图片
 import pointImage from "@/assets/images/recruitment/map-point1.png";
-// 获取地图DOM元素
-let map = ref();
+
+// DOM 引用
+const map = ref();
 let myMap = null;
-// 注册崇州地图
+
+// 注册地图
 echarts.registerMap("sichuan", sichuanJSON);
+
+// 响应式设计配置
+const designConfig = {
+  designWidth: 1920,
+  designHeight: 1080
+};
+
+// 计算响应式尺寸
+const calcResponsivePX = (pxValue) => {
+  const screenWidth = window.innerWidth || document.documentElement.clientWidth;
+  return (pxValue / designConfig.designWidth) * screenWidth;
+};
+
+// 初始点位数据
 const initialPoints = [
   { name: "攀枝花", value: [101.718, 26.582, 0], count: 0 },
   { name: "雅安",   value: [103.009, 29.988, 0], count: 0 },
@@ -35,11 +51,12 @@ const initialPoints = [
   { name: "达州",   value: [107.467, 31.209, 0], count: 0 },
   { name: "南充",   value: [106.110, 30.837, 0], count: 0 }
 ];
-// 地图参数设置
-let option = {
+
+// 获取动态配置
+const getChartOption = () => ({
   tooltip: {
     trigger: "item",
-    formatter: function (params) {
+    formatter: (params) => {
       if (params.seriesType === "scatter3D") {
         return `${params.name}<br/>合作社数量：${params.data.count || 0}`;
       }
@@ -55,27 +72,37 @@ let option = {
     label: {
       show: true,
       color: "#CBF2FA",
-      fontSize: 12,
+      fontSize: calcResponsivePX(10),
       fontWeight: "bold"
     },
     itemStyle: {
-        color: "rgba(27, 129, 150, 0.4)",
-        borderColor: "#61cfff",
-        borderWidth: 2,
-        opacity: 0.75
-      },
-      emphasis: {
-          itemStyle: { color: "rgba(27, 129, 150, 0.65)", opacity: 0.85 },
-          label: { color: "#ffff00" }
-        },
+      color: "rgba(27, 129, 150, 0.4)",
+      borderColor: "#61cfff",
+      borderWidth: 2,
+      opacity: 0.75
+    },
+    emphasis: {
+      itemStyle: { color: "rgba(27, 129, 150, 0.65)", opacity: 0.85 },
+      label: { color: "#ffff00" }
+    },
     light: {
       main: { intensity: 1.6, shadow: true, shadowQuality: "high", alpha: 35, beta: 15 },
       ambient: { intensity: 0.35 }
     },
     shading: "lambert",
-    viewControl: { distance: 110, alpha: 45, beta: 10 },
+    viewControl: {
+      distance: 110,
+      alpha: 45,
+      beta: 10,
+    },
     groundPlane: { show: false },
-    postEffect: { enable: true, bloom: { enable: true, bloomIntensity: 0.25 } }
+    postEffect: {
+      enable: true,
+      bloom: {
+        enable: true,
+        bloomIntensity: 0.25
+      }
+    }
   },
   series: [
       {
@@ -88,35 +115,54 @@ let option = {
           count: p.count
         })),
         symbol: "triangle",
-        symbolSize: 12,
+        symbolSize: calcResponsivePX(12),
         itemStyle: { color: "#FFBE34" },
         label: { show: false }
       }
     ]
-};
+});
 
-// 处理图表重绘
-function handleChartResize() {
+// 处理图表重绘（防抖优化）
+const handleChartResize = debounce(() => {
   if (myMap) {
-    // 先重置图表尺寸
-    myMap.resize()
-
-    myMap.setOption(option, { notMerge: false, lazyUpdate: true })
+    myMap.resize();
+    // 重新设置配置以更新响应式尺寸
+    myMap.setOption(getChartOption(), true);
   }
-}
+}, 300);
+
+// 初始化图表
+const initChart = () => {
+  if (!map.value) return;
+
+  myMap = echarts.init(map.value);
+  myMap.setOption(getChartOption());
+
+  // 添加点击事件（可选）
+  myMap.on('click', (params) => {
+    if (params.componentType === 'series' && params.seriesType === 'scatter3D') {
+      console.log('点击了城市:', params.name);
+      // 可以在这里添加点击后的业务逻辑
+    }
+  });
+};
 
 // 生命周期钩子
 onMounted(() => {
-  myMap = echarts.init(map.value);
-  // 设置配置项
-  myMap.setOption(option);
+  nextTick(() => {
+    initChart();
+  });
 
-  window.addEventListener('resize', handleChartResize)
+  window.addEventListener('resize', handleChartResize);
 });
 
 onUnmounted(() => {
   window.removeEventListener('resize', handleChartResize);
-})
+  if (myMap) {
+    myMap.dispose();
+    myMap = null;
+  }
+});
 </script>
 
 <style lang="scss" scoped>