diff --git a/nezha-fronted/src/components/chart/chart/chartDiagram.vue b/nezha-fronted/src/components/chart/chart/chartDiagram.vue
index b38e7f16d..73a79a595 100644
--- a/nezha-fronted/src/components/chart/chart/chartDiagram.vue
+++ b/nezha-fronted/src/components/chart/chart/chartDiagram.vue
@@ -9,7 +9,7 @@
 <!--      :isPanel="true"-->
 <!--      ref="diagram"-->
 <!--      :chartInfo="chartInfo" />-->
-    <meta2dMain :meta2dId="chartInfo.id + '-' + isFullscreen" :topoData="chartInfo.param.topo" :querysArray="querysArray" :params="params" :iconArray="iconArray" :isChart="true"/>
+    <meta2dMain :meta2dId="chartInfo.id + '-' + isFullscreen" :topoData="chartInfo.param.topo" :querysArray="querysArray" :params="{ timeType: 5}" :iconArray="iconArray" :isChart="true"/>
   </div>
 </template>
 
@@ -41,7 +41,10 @@ export default {
     bus.$on('showMeta2dPreview', (params) => {
       this.isPreview = params
     })
-    console.log(JSON.stringify(this.chartInfo.param.topo))
+    this.$get('/topology/icon').then(res => {
+      this.iconArray = [...res.data.list]
+    })
+    this.reload()
   },
   methods: {
     resize () {
diff --git a/nezha-fronted/src/components/chart/chartHeaderMixin.js b/nezha-fronted/src/components/chart/chartHeaderMixin.js
index 227a72802..4395aa410 100644
--- a/nezha-fronted/src/components/chart/chartHeaderMixin.js
+++ b/nezha-fronted/src/components/chart/chartHeaderMixin.js
@@ -28,7 +28,6 @@ export default {
       default: false
     },
     nowTimeType: {
-      type: Number
     },
     hiddenText: { // 隐藏图表的悬浮文字
       type: String
diff --git a/nezha-fronted/src/components/common/mixin/beforeMeta2d.js b/nezha-fronted/src/components/common/mixin/beforeMeta2d.js
index 7c6551a1e..692c87f91 100644
--- a/nezha-fronted/src/components/common/mixin/beforeMeta2d.js
+++ b/nezha-fronted/src/components/common/mixin/beforeMeta2d.js
@@ -18,8 +18,7 @@ export default {
   },
   methods: {
     reload () {
-      console.log(123213)
-      if (this.currentProject.id) {
+      if (this.currentProject && this.currentProject.id) {
         this.$get('monitor/project/topo', { projectId: this.currentProject.id }).then(res => {
           if (res.data && res.data.topo) {
             this.topoData = res.data.topo || {}
diff --git a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js
index f9eb400c6..43d213957 100644
--- a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js
+++ b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js
@@ -142,7 +142,7 @@ export default {
             getTopology(this.meta2dId).centerView()
           }
           getTopology(this.meta2dId).lock(1)
-          // this.getNodesArr()
+          this.getNodesArr()
         })
       })
     },
@@ -441,6 +441,9 @@ export default {
       if (isRefresh) {
         this.$emit('reload')
       }
+      if (this.isChart) {
+        this.$emit('exit', false)
+      }
     },
     beforeEdit () {
       // const endTime = new Date().getTime()
@@ -598,6 +601,9 @@ export default {
       if (key === 'asset' || key === 'alert' || key === 'endpoint') {
         this.showNodeTools()
       }
+    },
+    saveChart (params) {
+      this.$emit('save', params)
     }
   },
   beforeDestroy () {
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue
index 919f170f4..50b796e53 100644
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="pens-data right-box__container">
     <div class="form-row-box chart-config">
-      <div class="form-row-item form-row-item-full">
+      <div class="form-row-item form-row-item-full" v-if="!isChart">
         <div class="form-row-key">
           {{$t('project.topology.timeRange')}}
         </div>
@@ -197,7 +197,8 @@ export default {
   mixins: [promqlInputMixin, rz],
   props: {
     querysArray: {},
-    params: {}
+    params: {},
+    isChart: {}
   },
   components: {
     draggable,
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
index 2f7a49c43..36d981d54 100644
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
@@ -27,7 +27,7 @@
       </button>
     </div>
     <div v-if="editFlag" class="top-tool-right float-right">
-      <button @click="previewTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light"
+      <button @click="previewTopology" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"
               style="margin-right: 20px"
       >
         {{$t('overall.preview')}}
@@ -37,13 +37,13 @@
 <!--      >-->
 <!--        {{$t('project.topology.previewExit')}}-->
 <!--      </button>-->
-      <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="saveMeta2d"
+      <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" type="button" @click="saveMeta2d"
               :disabled="prevent_opt.save"
               :class="{'nz-btn-disabled':prevent_opt.save}"
               style="margin-right: 20px">
         {{$t('overall.save')}}
       </button>
-      <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" style="margin-right: 20px" @click="cancelTopology">
+      <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" type="button" style="margin-right: 20px" @click="cancelTopology">
         {{$t('project.topology.exit')}}
       </button>
     </div>
@@ -117,7 +117,14 @@ export default {
       }
     },
     saveChart () {
-
+      const elements = this.$parent.$refs.meta2dProps.$refs.meta2dData.elements
+      const timeType = this.$parent.$refs.meta2dProps.$refs.meta2dData.dataTimeType
+      const params = {
+        ...getTopology(this.meta2dId).data()
+      }
+      params.elements = elements
+      params.timeType = timeType
+      this.$emit('saveChart', params)
     },
     saveProject () {
       const elements = this.$parent.$refs.meta2dProps.$refs.meta2dData.elements
@@ -174,11 +181,13 @@ export default {
         params: {
           timeType: topoData.timeType || 5
         },
-        currentProject: {
-          id: this.project.id
-        },
         show: true
       }
+      if (this.project) {
+        params.currentProject = {
+          id: this.project.id
+        }
+      }
       bus.$emit('showMeta2dPreview', params)
       // console.log(getTopology(this.meta2dId).data())
       // const elements = this.$parent.$refs.meta2dProps.$refs.meta2dData.elements
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
index 6f53b43c2..9ff01b3de 100644
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
@@ -10,6 +10,7 @@
       @edit="beforeEdit"
       @exitEdit="exitEdit"
       @reload="reload"
+      @saveChart="saveChart"
       @getNodesArr="getNodesArr"
     />
     <div class="meta2d-main" :class="isChart ? 'meta2d-chart': 'meta2d-project'" @contextmenu="onContextMenu($event)" style="position: relative">
@@ -51,6 +52,7 @@
       :selectPens.sync="selectPens"
       :querysArray="querysArray"
       :params="params"
+      :is-chart="isChart"
       :meta2dId="meta2dId"
       @updatePens="updatePens"
     />
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue
index fceaab5a7..33517a25d 100644
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue
@@ -8,7 +8,7 @@
         <meta2dCanvas :canvasProps="canvasProps"  :params.sync="params" :meta2dId='meta2dId' @changeActiveName="changeActiveName" ref ='meta2dCanvas'/>
       </el-tab-pane>
       <el-tab-pane :label="$t('project.topology.data')" name="data">
-        <meta2dData :querysArray.sync="querysArray" :params.sync="params" ref="meta2dData"/>
+        <meta2dData :querysArray.sync="querysArray" :params.sync="params" ref="meta2dData" :isChart="isChart"/>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -33,7 +33,8 @@ export default {
     querysArray: {},
     params: {},
     meta2dId: {},
-    modules: {}
+    modules: {},
+    isChart: {}
   },
   components: {
     meta2dElement,
diff --git a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
index 7d7338d93..fb454d10e 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
@@ -142,11 +142,24 @@
         <div class="topology-box">
           <div class="topology-mc"></div>
 <!--          <diagram :topoData="chartConfig.param.topo" :fromChartBox="true" :topologyIndexF="-1"/>-->
-          <meta2dMain :meta2dId="'rightBoxChart'" :topoData="chartConfig.param.topo" :querysArray="[]" :params="params" :iconArray="iconArray" @reload="reload"/>
+          <meta2dMain :meta2dId="'rightBoxChart'" :topoData="chartConfig.param.topo" :querysArray="querysArray" :params="{timeType: 5}" :iconArray="iconArray" @reload="reloadTopo" :isChart="true"/>
         </div>
       </el-form-item>
       <!--topplogy-->
-      <diagram :topoData="chartConfig.param.topo" class="topology-dialog" v-if="topologyDialog" @change="topologyDialogChange" :topologyIndexF="-2" ref="topologyDialog" :fromTopologyDialog="true"/>
+      <meta2dMain
+        @save="saveTopo"
+        class="topology-dialog"
+        v-if="topologyDialog"
+        ref="rightBoxChartEdit"
+        :meta2dId="'rightBoxChartEdit'"
+        :topoData="chartConfig.param.topo"
+        :querysArray="querysArray"
+        :params="{timeType: 5}"
+        :iconArray="iconArray"
+        @reload="reloadTopo"
+        @exit="topologyDialogChange"
+        :isChart="true"
+      />
       <!--text-->
       <el-form-item  v-if="isText(chartConfig.type)"  :rules="{ required: true,  message: $t('validate.required'), trigger: 'change' }" prop="param.text">
         <rich-text-editor ref="richTextEditor" :edit-data="chartConfig.param.text" @textChange="textChange"></rich-text-editor>
@@ -291,23 +304,47 @@
       </div>
 
     </el-form>
+    <el-dialog
+      :title="this.chartConfig.name || 'Chart'"
+      :visible.sync="isPreview.show"
+      fullscreen
+      class="no-transform-dialog"
+      custom-class="nz-new-dialog meta2d-preview"
+      :append-to-body="false"
+      :modal-append-to-body="false"
+      @close="isPreview.show = false"
+      destroy-on-close
+    >
+      <div v-if="isPreview.show" style="width: 100%;height: 100%">
+        <meta2dMain
+          :meta2dId="'projectIdIsPreview'"
+          :is-preview="true"
+          :name="'preview'"
+          :topoData="isPreview.topoData"
+          :querysArray="isPreview.querysArray"
+          :project="isPreview.currentProject"
+          :params="isPreview.params"
+          :iconArray="iconArray"
+        />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import publicConfig from '@/components/common/rightBox/chart/publicConfig'
 import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
-import diagram from '@/components/common/ChartDiagram/diagram'
 import richTextEditor from '@/components/chart/richTextEditor'
 import beforeMeta2d from '@/components/common/mixin/beforeMeta2d'
 import meta2dMain from '@/components/common/project/meta2d/meta2dMain'
 import { clearTopology } from '@/components/common/js/common'
+import bus from "@/libs/bus";
 export default {
   name: 'otherChartConfig',
-  mixins: [publicConfig, chartTypeShow, beforeMeta2d],
+  mixins: [publicConfig, chartTypeShow],
   components: {
-    diagram,
-    richTextEditor
+    richTextEditor,
+    meta2dMain
   },
   watch: {
     // 'chartConfig.param.text': {
@@ -350,12 +387,27 @@ export default {
           id: 'clock',
           name: this.$t('dashboard.dashboard.chartForm.typeVal.clock.label')
         }
-      ]
+      ],
+      topoData: {},
+      querysArray: [],
+      meta2dType: '',
+      iconArray: [],
+      isPreview: {
+        show: false,
+        topoData: {},
+        querysArray: {},
+        currentProject: {},
+        params: {}
+      }
     }
   },
   methods: {
     init () {
       this.chartConfig = JSON.parse(JSON.stringify(this.params))
+      this.reloadTopo()
+      bus.$on('showMeta2dPreview', (params) => {
+        this.isPreview = params
+      })
     },
     chartTypeChange (type) {
       switch (type) {
@@ -449,20 +501,56 @@ export default {
     },
     topologyDialogChange (flag, data) {
       this.topologyDialog = flag
+      if (flag) {
+        setTimeout(() => {
+          this.$refs.rightBoxChartEdit.$refs.header.editMeta2d()
+        }, 200)
+      }
       if (data) {
         this.chartConfig.param.topo = data
         this.change()
       }
     },
+    saveTopo (topo) {
+      this.topologyDialogChange(false, topo)
+    },
     textChange (val) {
       const html = `<div  class="editor-core ql-container ql-snow"><div class="ql-editor">${val}</div></div>`
       this.chartConfig.param.text = html
       this.$refs.chartForm.validateField('param.text')
       this.change()
+    },
+    reloadTopo () {
+      const res = {
+        data: this.chartConfig.param
+      }
+      if (res.data && res.data.topo) {
+        this.topoData = res.data.topo || {}
+        if (res.data.topo.topo) {
+          this.topoData = res.data.topo.topo || {}
+        }
+        this.querysArray = res.data.topo.elements || []
+        // this.params = {
+        //   timeType: res.data.topo.timeType || 5
+        // }
+      } else {
+        this.topoData = {}
+        this.querysArray = []
+        // this.params = {
+        //   timeType: 5
+        // }
+      }
     }
   },
   created () {
     this.init()
+    this.$get('/topology/icon').then(res => {
+      this.iconArray = [...res.data.list]
+    })
+  },
+  destroyed () {
+    clearTopology()
+    bus.$off('showMeta2dPreview')
   }
 }
 </script>