NEZ-2099 fix： 新建System图表时设置显示为Legend，预览时内容为空

2 files changed, 15 insertions, 10 deletions

diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js
index ea584de2b..ba60739e1 100644
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -333,7 +333,9 @@ export default {
       deep: true,
       handler (n) {
         if (n) {
-          this.initChart && this.initChart(this.chartOption)
+          this.$nextTick(() => {
+            this.initChart && this.initChart(this.chartOption)
+          })
         }
       }
     }
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index fc0836e3e..1f4b36d31 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -120,6 +120,8 @@
       :modal-append-to-body="false"
     >
       <panel-chart
+        v-if="prevChart"
+        style="height: 100%;width: 100%"
         :ref="'chart-fullscreen-previewShow'"
         :chart-info="prevChart"
         :from="from"
@@ -197,7 +199,7 @@ export default {
         name: ''
       },
       timeRange: [],
-      prevChart: {},
+      prevChart: '',
       filterPanel: '',
       groupArr: [],
       varTypeArr: [
@@ -497,19 +499,20 @@ export default {
       }
     },
     preview (show) {
-      this.previewShow = show
       if (show) {
-        this.$nextTick(() => {
+        this.prevChart = ''
+        setTimeout(()=>{
           const start = new Date().setHours(new Date().getHours() - 1)
           const end = new Date()
           this.timeRange = [bus.computeTimezoneTime(start), bus.computeTimezoneTime(end)]
-          setTimeout(() => {
-            this.prevChart = lodash.cloneDeep(this.editChart)
-            this.prevChart.loaded = true
-            this.prevChart.param.showHeader = true
-          })
-        })
+          this.prevChart = {
+            ...lodash.cloneDeep(this.editChart),
+            loaded: true
+          }
+          this.prevChart.param.showHeader = true
+        }, 200)
       }
+      this.previewShow = show
     }
   },
   created () {