From aa05304d221b1883d746e686f390d6f3fba598a7 Mon Sep 17 00:00:00 2001 From: ZhangXianQiang <1135831638@qq.com> Date: 星期五, 24 五月 2024 09:36:09 +0800 Subject: [PATCH] feat:动态数据中心 --- src/views/home/data-view/components/data-map.vue | 46 +++++++++++++++++++++++++++++++++++----------- 1 files changed, 35 insertions(+), 11 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..6a8cb82 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/zigong2.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,10 +38,11 @@ }, // 鎺у埗鍣� viewControl: { - beta: 82, + beta: -30, alpha: 90, - distance: 180, - maxBeta: 180 + distance: 100, + maxBeta: 180, + panSensitivity: 0 }, // 榧犳爣绉诲叆鏃舵牱寮� emphasis: { @@ -66,7 +68,7 @@ name: 'DataMap', data() { return { - + } }, components: { @@ -83,6 +85,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 +115,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