diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index b2571239f..f255da836 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -2050,3 +2050,25 @@ li{
   max-width: 500px;
   line-height: 20px;
 }
+
+.right-bottom-zoom{
+  position: absolute;
+  top: calc(100% - 100px);
+  left: calc(100% - 45px);
+  height: 90px;
+  width: 35px;
+  border: 1px solid #E7EAED;
+  box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  .zoom-option{
+    width: 100%;
+    height: 50%;
+    opacity: 0.42;
+    background: #FFF;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+  .zoom-option:hover{
+    cursor: pointer;
+  }
+}
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
index eadaa7a87..6a711df00 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
@@ -74,6 +74,12 @@
         this.legend=legend.filter((item,index)=>index<this.dataSize);
         this.resize();
       },
+      getOption:function(){
+        return this.chart.getOption();
+      },
+      setOption:function(option){
+        this.chart.setOption(option)
+      },
       setSeries:function(series, legend, legendData){
         if(!this.chart){
           this.chartInit();
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
index b537301d7..63eac49cd 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -112,7 +112,12 @@
         <div class="content-col-box">
           <div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div>
           <div class="content-col-content">
-            <chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box>
+            <chart-box  chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box>
+            <div class="right-bottom-zoom">
+              <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(1)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
+              <div class="zoom-option" @click="zoomMap(-1)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
+              <div></div>
+            </div>
           </div>
         </div>
       </div>
@@ -1145,6 +1150,14 @@
           }
         });
       },
+      zoomMap:function(val){
+        let geo=this.$refs.dataCenterMap.getOption().geo;
+        if(geo&&geo.length>0){
+          let zoom=geo[0].zoom
+          this.$refs.dataCenterMap.setOption({geo:{zoom:zoom+val}})
+        }
+        console.log(geo)
+      },
       trendTool(type, param1, param2, param3) {
         if (type == 'difference') { //两个数组的差集
           return trendSelectDifference(param1, param2);