From 2d6ec7162f446b64fe395a7e77894277b9385d96 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 13 三月 2024 10:57:06 +0800
Subject: [PATCH] feat:添加数据缓动效果

---
 src/views/home/data-view/components/data-map.vue |   43 +++++++++++++++++++++++++++++++++----------
 1 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/views/home/data-view/components/data-map.vue b/src/views/home/data-view/components/data-map.vue
index f7b7398..e7a7536 100644
--- a/src/views/home/data-view/components/data-map.vue
+++ b/src/views/home/data-view/components/data-map.vue
@@ -8,14 +8,15 @@
 <script>
 import * as echarts from 'echarts';
 import 'echarts-gl';
-import mapData from '@/assets/map/dujiangyan.json';
-echarts.registerMap('dujiangyan', mapData);
+import mapData from '@/assets/map/zigong.json';
+echarts.registerMap('zigong', mapData);
 console.log(mapData);
 let mapChart = null;
 let tempName = '';
+let observer = null;
 const mapConfig = {
   series: [{
-    map: "dujiangyan", //娉ㄥ唽鍦板浘鐨勫悕瀛�
+    map: "zigong", //娉ㄥ唽鍦板浘鐨勫悕瀛�
     type: "map3D",
     bottom: 0,
     left: 0,
@@ -24,9 +25,9 @@
     itemStyle: {
       color: "#4189f2", // 鑳屾櫙
       opacity: 1, //閫忔槑搴�
-      borderWidth: 1.5, // 杈规瀹藉害
+      borderWidth: 1, // 杈规瀹藉害
       borderColor: "#fff", // 杈规棰滆壊
-      fontSize: 16, //
+      fontSize: 18, //
     },
 
     // 鏍囩
@@ -37,9 +38,9 @@
     },
     // 鎺у埗鍣�
     viewControl: {
-      beta: 82,
+      beta: -30,
       alpha: 90,
-      distance: 180,
+      distance: 100,
       maxBeta: 180
     },
     // 榧犳爣绉诲叆鏃舵牱寮�
@@ -66,7 +67,7 @@
   name: 'DataMap',
   data() {
     return {
-      
+
     }
   },
   components: {
@@ -83,6 +84,21 @@
       mapConfig.series[0].data.forEach(item => {
         item.itemStyle.color = '#4189f2';
       });
+    },
+    // 鐩戝惉鍙樺寲
+    observe() {
+      if (!observer) {
+        observer = new ResizeObserver(entries => {
+          this.handleResize();
+        })
+      }
+      observer.observe(this.$refs.map);
+    },
+    // 绐楀彛鍙樻崲
+    handleResize() {
+      if (mapChart) {
+        mapChart.resize();
+      }
     }
   },
   mounted() {
@@ -98,8 +114,15 @@
         tempName = params.name;
         this.filterData(params.name);
       }
-    })
-  }
+    });
+    this.observe();
+  },
+  beforeDestroy() {
+    if (observer) {
+      mapChart.dispose();
+      observer.unobserve(this.$refs.map);
+    }
+  },
 }
 </script>
 

--
Gitblit v1.8.0