perf: 修复overview地图变形的问题

nezha-fronted/src/components/common/js/divResize.js

@@ -81,10 +81,12 @@ if (document.attachEvent) {//ie9-10
       ele.__resizeTrigger__ = obj;
       obj.__resizeElement__ = ele;
     }
+    if (context != "map") {
       handlers.push({
         handler: handler,
         context: context
       });
+    }
   };
   EleResize.off = function (ele, handler, context) {
     var handlers = ele.__z_resizeListeners;

nezha-fronted/src/components/common/js/world.js

@@ -7,7 +7,7 @@ const coordinateSpanByZoom = { //各缩放比例下map显示范围的经纬度
 export const worldData = jsonData["world"];
 const worldDataDecode = decode(worldData);
 
-export function getProvinceJson(coordinate) { //根据中心点坐标，动态返回四周的省份信息。
+/*export function getProvinceJson(coordinate) { //根据中心点坐标，动态返回四周的省份信息。
   //同时间只显示自身和周围共9块省级区划
   //console.info(coordinate);
   let countryNames = getCountries(coordinate, scale);
@@ -24,16 +24,12 @@ export function getProvinceJson(coordinate) { //根据中心点坐标，动态
   });
   //console.info(JSON.stringify(newWorldData.features[newWorldData.features.length-1]));
   return newWorldData;
-}
-function getCountries(coordinate, currentScale) { //根据参数当前中心坐标、当前缩放比，得出需要显示省级区划的小块内的国家
+}*/
+/*function getCountries(coordinate, currentScale) { //根据参数当前中心坐标、当前缩放比，得出需要显示省级区划的小块内的国家
   let x = coordinateSpanByZoom[currentScale][0];
   let y = coordinateSpanByZoom[currentScale][1];
   let rangeX = [coordinate[0] < (-180+x) ? -180 : (Math.floor(coordinate[0]/x)-1)*x, (Math.floor(coordinate[0]/x)+1)*x];
   let rangeY = [coordinate[1] < (-90+y) ? -90 : (Math.floor(coordinate[1]/y)-1)*y, (Math.floor(coordinate[1]/y)+1)*y];
-/*
-  let rangeX = [coordinate[0] < (-180+x) ? -180 : (coordinate[0]/x-1)*x, (coordinate[0]/x+1)*x];
-  let rangeY = [coordinate[1] < (-90+y) ? -90 : (coordinate[1]/y-1)*y, (coordinate[1]/y+1)*y];
-*/
   //console.info(rangeX, rangeY);
   let countries = [];
   for (let country in jsonData.countryCoordinates) { //jsonData.countryCoordinates是各国首都坐标数据
@@ -45,7 +41,7 @@ function getCountries(coordinate, currentScale) { //根据参数当前中心坐
     }
   }
   return countries;
-}
+}*/
 
 function decode(json) {
   if (!json.UTF8Encoding) {

nezha-fronted/src/components/page/dashboard/overview/chart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-room" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart" ref="chartRoom">
+  <div class="chart-room" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart" ref="chartRoom" :style="{overflow: chartType == 'map' ? 'hidden' : ''}" :id="chartType == 'map' ? 'map' : ''">
     <loading  ref="loading"></loading>
     <div class="showMore" v-if="legendAll.length !== legend.length"><i class="nz-icon nz-icon-jinggao"></i>{{$t("dashboard.panel.moreTitle")}} <span class="moreChart" @click="showMore">{{$t("dashboard.panel.showAll")+legendAll.length}}</span></div>
     <div class="chart-header">{{chartTitle}}</div>
@@ -113,56 +113,28 @@
               });
             }
           });
-          console.info(this.option.geo)
-          /*let geoObj = this.map.geoJson.geoJson;
-          geoObj.features.forEach(item=>{
-            if(this.option.geo.regions){
-              this.option.geo.regions.push({
-                name:item.properties.name,
-                itemStyle: {
-                  normal: {
-                    areaColor: "white"
-                  }
-                }
-              })
-            }else{
-              this.option.geo.regions=[{
-                name:item.properties.name,
-                itemStyle: {
-                  normal: {
-                    areaColor: "white"
-                  }
-                }
-              }]
-            }
-          });*/
-          //let timer = setTimeout(()=>{}, 0);
-          //地图拖动、缩放时动态读取地图数据
-          /*this.chart.on("georoam", params => {
-            //console.info(this.map.geoJson.geoJson.features[0]);
-            clearTimeout(timer);
-            timer = setTimeout(() => {  //延时触发，0.6秒无操作再更新地图数据
-              let dx = params.dx; //拖动x位移
-              let dy = params.dy; //拖动y位移
-              if (dx || dy) {
-                let option = this.chart.getOption();
-                let center = option.geo[0].center; //拖动后的中心点
-                let newJson = mapGeoJson.getProvinceJson(center);
-                this.map.geoJson.geoJson = newJson;
-                //console.info(this.map.geoJson.geoJson.features.length);
-                //this.clearChart();
-                //this.chartInit();
-                //echarts.registerMap(this.map.name, this.map.geoJson);
-              }
 
-              //this.chart.setOption(option, true);
-              //console.info(this.map.geoJson.geoJson.features.length);
-            }, 600);
-          });*/
-          /*this.chart.on("click", params => {
-            let option = this.chart.getOption();
-            console.info(option.geo[0].center);
-          });*/
+          let mapRoom = document.querySelector("#map");
+          let roomWidth = mapRoom.offsetWidth;
+          let roomHeight = mapRoom.offsetHeight;
+
+          let windowWidth = window.innerWidth;
+          let windowHeight = window.innerHeight;
+
+          let scaleWidth = roomWidth/1200;
+          let scaleHeight = roomHeight/700;
+
+          let kazCenter = [67.45, 44];
+          if (windowWidth > 2000) {
+            this.option.geo.center = kazCenter;
+            this.option.geo.zoom = 6;
+          } else if (windowWidth > 1600) {
+            this.option.geo.center = [kazCenter[0]*1.15, kazCenter[1]*0.93];
+            this.option.geo.zoom = 5;
+          } else {
+            this.option.geo.center = [kazCenter[0]*1.15*1.15, kazCenter[1]*0.93*0.93];
+            this.option.geo.zoom = 4;
+          }
         }
 
         this.modifyOption('tooltip','position',this.defaultTooltipPosition)
@@ -218,28 +190,18 @@
         }
         this.resize();
       },
-      resizeChart:function(width,height){
-        if(this.chart){
-          this.chart.resize({width:width,height:height});
-        }
-      },
-      resize:function(){
+      resize() {
         this.$nextTick(() => {
           if(this.chart){
-            //let height=this.$el.clientHeight;
-            //console.info(this.$el.clientHeight)
-            let height = this.$el.clientHeight-document.querySelector("#legendArea").offsetHeight;
-            //console.info(document.querySelector("#legendArea").offsetHeight)
-            /*for (let i in document.querySelector("#legendArea")) {
-              console.info(i, document.querySelector("#legendArea")[i])
-            }*/
-            let width=this.$el.clientWidth;
-            /*if(this.chartTitle){
-              height = height - 20;
+            let height;
+            let width;
+            if (this.chartType == "map") {
+              height = 700;
+              width = 1200;
+            } else {
+              height = this.$el.clientHeight - document.querySelector("#legendArea").offsetHeight;
+              width=this.$el.clientWidth;
             }
-            if(this.legend && this.legend.length>0){
-              height = height - 80;
-            }*/
             this.chart.resize({width:width,height:height});
           }
         });
@@ -421,7 +383,7 @@
     },
     mounted() {
       this.chartInit();
-      EleResize.on(this.$el,this.resize);
+      EleResize.on(this.$el, this.resize, this.chartType);
     },
     watch:{
 

nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue

@@ -142,9 +142,8 @@
         itemStyle: {areaColor: "white"},
         map: '',
         roam: true,//鼠标是否可以控制缩放
-        center: [67.45, 48],//当前视角的中心点，用经纬度表示
-        //center: [-127.45, -48],//当前视角的中心点，用经纬度表示
-        zoom: 6,
+        //center: [67.45, 48],//当前视角的中心点，用经纬度表示
+        //zoom: 5,
         label: { //控制显示地图名称
           normal: {
             show: false
@@ -165,7 +164,8 @@
         scaleLimit: {
           min: 4,
           max: 8
-        }
+        },
+        aspectScale: 1
       },
       tooltip : {
         trigger: 'item',

nezha-fronted/src/components/page/dashboard/overview/overview2.vue

@@ -1321,15 +1321,15 @@
     mounted() {
       this.initData();
       this.initDate();
-      window.onresize = () => {
+      /*window.onresize = () => {
         setTimeout(() => {
           this.$parent.$parent.update();
         }, 100);
-      }
+      }*/
     },
-    destroyed() {
+    /*destroyed() {
       window.onresize = null;
-    }
+    }*/
   }
 </script>