Merge pull request #1519 from dataease/pr@dev@feat_map_zoom_box

frontend/src/views/chart/components/ChartComponent.vue

 <template>
   <div style="display: flex;">
-    <view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
+    <view-track-bar
+      ref="viewTrack"
+      :track-menu="trackMenu"
+      class="track-bar"
+      :style="trackBarStyleTime"
+      @trackClick="trackClick"
+    />
     <div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" :style="{ borderRadius: borderRadius}" />
+    <div v-if="chart.type === 'map'" class="map-zoom-box">
+      <div style="margin-bottom: 20px;">
+        <el-button size="mini" icon="el-icon-plus" circle @click="roamMap(true)" />
+      </div>
+
+      <div style="margin-bottom: 20px;">
+        <el-button size="mini" icon="el-icon-refresh" circle @click="resetZoom()" />
+      </div>
+
+      <div>
+        <el-button size="mini" icon="el-icon-minus" circle @click="roamMap(false)" />
+      </div>
+
+    </div>
   </div>
 </template>
 
@@ -19,24 +39,55 @@ import {
   BASE_TREEMAP,
   BASE_MIX
 } from '../chart/chart'
-import { baseBarOption, stackBarOption, horizontalBarOption, horizontalStackBarOption } from '../chart/bar/bar'
-import { baseLineOption, stackLineOption } from '../chart/line/line'
-import { basePieOption, rosePieOption } from '../chart/pie/pie'
-import { baseMapOption } from '../chart/map/map'
-import { baseFunnelOption } from '../chart/funnel/funnel'
-import { baseRadarOption } from '../chart/radar/radar'
-import { baseGaugeOption } from '../chart/gauge/gauge'
-import { baseScatterOption } from '../chart/scatter/scatter'
-import { baseTreemapOption } from '../chart/treemap/treemap'
-import { baseMixOption } from '@/views/chart/chart/mix/mix'
-// import eventBus from '@/components/canvas/utils/eventBus'
-import { uuid } from 'vue-uuid'
-import { geoJson } from '@/api/map/map'
+import {
+  baseBarOption,
+  stackBarOption,
+  horizontalBarOption,
+  horizontalStackBarOption
+} from '../chart/bar/bar'
+import {
+  baseLineOption,
+  stackLineOption
+} from '../chart/line/line'
+import {
+  basePieOption,
+  rosePieOption
+} from '../chart/pie/pie'
+import {
+  baseMapOption
+} from '../chart/map/map'
+import {
+  baseFunnelOption
+} from '../chart/funnel/funnel'
+import {
+  baseRadarOption
+} from '../chart/radar/radar'
+import {
+  baseGaugeOption
+} from '../chart/gauge/gauge'
+import {
+  baseScatterOption
+} from '../chart/scatter/scatter'
+import {
+  baseTreemapOption
+} from '../chart/treemap/treemap'
+import {
+  baseMixOption
+} from '@/views/chart/chart/mix/mix'
+  // import eventBus from '@/components/canvas/utils/eventBus'
+import {
+  uuid
+} from 'vue-uuid'
+import {
+  geoJson
+} from '@/api/map/map'
 import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
 
 export default {
   name: 'ChartComponent',
-  components: { ViewTrackBar },
+  components: {
+    ViewTrackBar
+  },
   props: {
     chart: {
       type: Object,
@@ -110,7 +161,9 @@ export default {
       // 基于准备好的dom，初始化echarts实例
       // 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表板有重复id情况
       const that = this
-      new Promise((resolve) => { resolve() }).then(() => {
+      new Promise((resolve) => {
+        resolve()
+      }).then(() => {
         //	此dom为echarts图标展示dom
         this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
         if (!this.myChart) {
@@ -193,25 +246,25 @@ export default {
     },
     registerDynamicMap(areaCode) {
       this.dynamicAreaCode = areaCode
-    //   if (this.$store.getters.geoMap[areaCode]) {
-    //     const json = this.$store.getters.geoMap[areaCode]
-    //     this.myChart.dispose()
-    //     this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
-    //     this.$echarts.registerMap('MAP', json)
-    //     return
-    //   }
-    //   geoJson(areaCode).then(res => {
-    //     this.$store.dispatch('map/setGeo', {
-    //       key: areaCode,
-    //       value: res
-    //     }).then(() => {
-    //       this.myChart.dispose()
-    //       this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
-    //       this.$echarts.registerMap('MAP', res)
-    //     })
-    //   }).catch(() => {
-    //     this.downOrUp = true
-    //   })
+      //   if (this.$store.getters.geoMap[areaCode]) {
+      //     const json = this.$store.getters.geoMap[areaCode]
+      //     this.myChart.dispose()
+      //     this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
+      //     this.$echarts.registerMap('MAP', json)
+      //     return
+      //   }
+      //   geoJson(areaCode).then(res => {
+      //     this.$store.dispatch('map/setGeo', {
+      //       key: areaCode,
+      //       value: res
+      //     }).then(() => {
+      //       this.myChart.dispose()
+      //       this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
+      //       this.$echarts.registerMap('MAP', res)
+      //     })
+      //   }).catch(() => {
+      //     this.downOrUp = true
+      //   })
     },
 
     initMapChart(geoJson, chart) {
@@ -284,11 +337,39 @@ export default {
         default:
           break
       }
+    },
+    roamMap(flag) {
+      let targetZoom = 1
+      const zoom = this.myChart.getOption().series[0].zoom
+      if (flag) {
+        targetZoom = zoom * 1.2
+      } else {
+        targetZoom = zoom / 1.2
+      }
+      const options = JSON.parse(JSON.stringify(this.myChart.getOption()))
+      options.series[0].zoom = targetZoom
+      this.myChart.setOption(options)
+    },
+    resetZoom() {
+      const options = JSON.parse(JSON.stringify(this.myChart.getOption()))
+      options.series[0].zoom = 1
+      this.myChart.setOption(options)
     }
   }
 }
+
 </script>
 
 <style scoped>
+  .map-zoom-box {
+    position: absolute;
+    z-index: 999;
+    right: 2%;
+    top: 5%;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    text-align: center;
+    padding: 5px;
+    border-radius: 5px
+  }
 
 </style>