地图放大功能开发

whyczyk

2021-10-14 36d078db470bf939ec47b6018ea40fa0b875e86e

 src/components/charts/chinaMap.vue

@@ -1,5 +1,5 @@
<template>
   <div class="echarts-wrapper">
   <div class="echarts-wrapper" @dblclick="dblclick">
      <div class="echarts-content" ref="chart" id="cityChart">

      </div>
@@ -57,6 +57,8 @@
   chartData: "",
   data() {
      return {
         parentsStyle: {},
         isAllScreen: false,
         timers: null,
         mapName: 'zhongguo',
         mapInfoX: null,
@@ -82,6 +84,41 @@
      }
   },
   methods: {
      findParents(node, select) {
         var parent = node.parentNode;
         if (parent === null || parent.className.indexOf(select) != -1) {
            return parent;
         } else {
            return this.findParents(parent, select);
         }
      },
      dblclick(e) {
         this.isAllScreen = !this.isAllScreen
         let parents = this.findParents(e.currentTarget, 'vdr')
         if (this.isAllScreen) {
            this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
            parents.style.transform = 'none';
            parents.style.width = '100%';
            parents.style.height = '100%';
            parents.style.position = 'fixed';
            parents.style.left = 0;
            parents.style.right = 0;
            parents.style.bottom = 0;
            parents.style.top = 0;
            parents.style.zIndex = 99999;
         } else {
            parents.style.transform = this.parentsStyle.transform;
            parents.style.width = this.parentsStyle.width;
            parents.style.height = this.parentsStyle.height;
            parents.style.position = this.parentsStyle.position;
            parents.style.left = 'initial';
            parents.style.right = 'initial';
            parents.style.bottom = 'initial';
            parents.style.top = 'initial';
            parents.style.zIndex = 'auto';
         }
         this.$options.chart.resize();
      },
      setOption(opt) {
         this.$options.chart.setOption(opt);
      },
@@ -240,7 +277,7 @@
      startSearchMapHomeState() {
         this.timers = setInterval(() => {
            this.searchChartHomeState()
         }, 4000)
         }, 60 * 1000)
      },
      initPage() {
         // 初始化地图
@@ -331,6 +368,7 @@
                  item.value.push(item.latitude);
                  tempData.push(item)
               })
               this.searchChartHomeState()
               this.startSearchMapHomeState();
            } else {
               this.initChart([], []);
@@ -511,7 +549,6 @@
         );
      },
      outClear() {
         console.log(this.timers)
         window.removeEventListener('resize', this.resize);
         clearInterval(this.timers)
         this.timers = null