diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
index 30e8b5f0c..a9c7fbdfc 100644
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -193,8 +193,8 @@ export default {
       })
       const timeSorted = this.$loadsh.sortBy(datas, function (o) { return o[0] })
       const valueSorted = datas.sort((a, b) => {
-        const a1 = isNaN(a[1]) && !a[1] ? 0 : Number(a[1])
-        const b1 = isNaN(b[1]) && !b[1] ? 0 : Number(b[1])
+        const a1 = isNaN(a[1]) || !a[1] ? 0 : Number(a[1])
+        const b1 = isNaN(b[1]) || !b[1] ? 0 : Number(b[1])
         return a1 - b1
       })
       minTime = timeSorted.length ? timeSorted[0][0] : ''
@@ -208,6 +208,11 @@ export default {
       } else {
         maxValue = 0
       }
+      if (!isNaN(minValue)) {
+        minValue = Number(minValue)
+      } else {
+        minValue = 0
+      }
       if (maxValue < 0) {
         maxValue = Math.abs(maxValue)
       }
diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
index 965b98347..eb70e7595 100644
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -110,7 +110,7 @@ export default {
       allDataLength: 0,
       severityData: this.$store.getters.severityData, // 告警级别的数据
       severityDataWeight: this.$store.getters.severityDataWeight,
-      myVariables: []
+      myVariables: [] // 添加当前使用的变量 用于判断是否需要重新加载
       // isExportData: false
     }
   },
@@ -172,6 +172,17 @@ export default {
       const step = bus.getStep(startTime, endTime)
       startTime = this.$stringTimeParseToUnix(startTime)
       endTime = this.$stringTimeParseToUnix(endTime)
+      if (!this.chartInfo.oldElements) {
+        this.chartInfo.oldElements = this.chartInfo.elements || []
+      }
+      this.chartInfo.elements = this.chartInfo.oldElements.map(item => {
+        const variables = this.variablesReplace(item.expression)
+        this.myVariables.push(variables)
+        return {
+          ...item,
+          expression: variables
+        }
+      })
       const elements = this.chartInfo.elements || []
       if (this.isExportHtml) {
         this.chartInfo.loaded && this.queryData(elements, startTime, endTime, step, params)
@@ -229,7 +240,6 @@ export default {
               // if (isChartPie(this.chartInfo.type)) {
               //   query += `&statistics=${this.chartInfo.param.statistics || 'last'}`
               // }
-              this.myVariables.push(this.variablesReplace(element.expression))
               query += `&query=${encodeURIComponent(this.variablesReplace(element.expression))}`
               return this.$get(query)
             })
@@ -725,7 +735,7 @@ export default {
     },
     variablesArr: {
       handler (n) {
-        const elements = this.chartInfo.elements || []
+        const elements = this.chartInfo.oldElements || []
         const variables = elements.map((element) => {
           return this.variablesReplace(element.expression)
         })
diff --git a/nezha-fronted/src/components/common/panel/panelVariables.vue b/nezha-fronted/src/components/common/panel/panelVariables.vue
index 902aa7458..d2326a3d4 100644
--- a/nezha-fronted/src/components/common/panel/panelVariables.vue
+++ b/nezha-fronted/src/components/common/panel/panelVariables.vue
@@ -85,7 +85,7 @@ export default {
     }
   },
   methods: {
-    getLabelData () {
+    getLabelData () { // 获取所有变量组合的可选择的值
       const isRegExp = (v) => {
         let isReg
         try {
@@ -97,7 +97,7 @@ export default {
       }
       const arrPromise = []
       this.labelValue = {}
-      this.labelArr.forEach((item, index) => {
+      this.labelArr.forEach((item, index) => {  // 根据变量的type类型 以及 expression 对应的值 查询不同的接口
         this.labelValue[item.name] = []
         if (item.type === 'custom') {
           arrPromise.push('')
@@ -134,7 +134,6 @@ export default {
             }
           }
           match = item.expression.match(this.specialKey[2].reg)
-          console.log(match)
           if (match) {
             arrPromise.push(this.metricNameQuery(match[1]))
             return
@@ -148,7 +147,6 @@ export default {
         }
       })
       Promise.all(arrPromise).then((res) => {
-        console.log(res)
         res.forEach((response, index) => {
           if (response) {
             if (this.labelArr[index].regex) {
@@ -284,7 +282,6 @@ export default {
           query: encodeURIComponent(query)
         }
         this.$get(url, params).then(res => {
-          console.log(res)
           const arr = res.data.result.map((metricData) => {
             let text = metricData.metric.__name__ || ''
             delete metricData.metric.__name__
@@ -336,14 +333,14 @@ export default {
         .join(',')
       return `${metricName}{${labelPart}}`
     },
-    setLabelArrDefault () {
+    setLabelArrDefault () { // 设置变量默认值 默认第一个
       this.labelArr.forEach((item, index) => {
         item.checked = this.labelValue[item.name][0] ? [this.labelValue[item.name][0].value] : []
       })
-      this.$store.dispatch('dispatchVariablesArr', this.labelArr)
+      this.$emit('getPanelData') // 同步加载chart 拿不到使用的变量值
+      this.$store.dispatch('dispatchVariablesArr', this.labelArr) // 通过vuex 管理变量值
     },
     checkAllChange (item) {
-      console.log(item)
       const allValue = this.labelValue[item.name].map(value => {
         return value.value
       })
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 6eed7f54a..0c132b90b 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -92,7 +92,7 @@
         <div id="tableList" class="table-list" style='overflow-y: unset'>
           <div class="table-list-box">
             <div  id="dashboardScrollbar" class="box-content" v-my-loading="chartListLoading"  ref="dashboardScrollbar" style='overflow-y: auto'>
-              <panel-variables :labelArrs="variables" :time-range="searchTime"></panel-variables>
+              <panel-variables :labelArrs="variables" :time-range="searchTime" @getPanelData="getPanelData"></panel-variables>
               <chart-list
                 ref="chartList"
                 name="panel"
@@ -298,7 +298,8 @@ export default {
       exportBoxShow: false,
       // 查看模式
       mode: '',
-      variables: []
+      variables: [],
+      variablesInit: false // 判断variables 是否加载完成
     }
   },
   components: {
@@ -308,7 +309,7 @@ export default {
     selectDashboard,
     chartTempBox,
     chartRightBox,
-    panelVariables
+    panelVariables // 处理panel变量的组件
   },
   computed: {
     chartRightBoxShow () {
@@ -343,6 +344,7 @@ export default {
       if (!val) {
         return false
       }
+      this.variablesInit = false
       this.filter.searchName = ''
       // this.$refs.searchInput.select();
       this.showPanel = val
@@ -357,6 +359,58 @@ export default {
           { show: true, type: 'custom', multi: false, allOption: true, name: 'azy', customOptions: 'z:1, z:z:1, a', expression: '', regex: '' }
         ]
       }
+      this.showPanel.param.variables = [
+        { show: true, type: 'custom', multi: true, allOption: true, name: 'mazy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
+        { show: true, type: 'custom', multi: true, allOption: false, name: 'mzy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
+        { show: true, type: 'custom', multi: false, allOption: false, name: 'zy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
+        { show: true, type: 'custom', multi: false, allOption: true, name: 'azy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
+        {
+          name: 'bbb',
+          type: 'query',
+          multi: false,
+          allOption: true,
+          expression: 'label_names()',
+          regex: '/a\.*/',
+          show: true
+        },
+        {
+          name: 'ccc',
+          type: 'query',
+          multi: false,
+          allOption: true,
+          expression: 'label_values(up, asset)',
+          regex: '',
+          show: true
+        },
+        {
+          name: 'ddd',
+          type: 'query',
+          multi: true,
+          allOption: true,
+          expression: 'label_values(asset)',
+          regex: '',
+          show: true
+        },
+        {
+          name: 'eeee',
+          type: 'query',
+          multi: false,
+          allOption: true,
+          expression: 'label_values(up, endpoint)',
+          regex: '/.*-(?<text>.*)-(?<value>.*)-.*/',
+          show: true
+        },
+        {
+          name: 'fff',
+          type: 'query',
+          multi: false,
+          allOption: true,
+          expression: 'query_result(node_filefd_allocated{module="OLAP-Node-Exporter"})',
+          regex: '/asset="(?<text>[^"]+)\.*\asset_id="(?<value>[^"]+)/',
+          show: true
+        }
+      ]
+      this.variables = this.showPanel.param.variables
       this.showPanel.type = 'dashboard'
       this.filter.panelId = this.showPanel.id
       this.panelId = this.showPanel.id
@@ -685,7 +739,7 @@ export default {
       this.filter.value = this.searchTime[2]
       this.filter.id = this.$refs.pickTime.$refs.timePicker.showTime.id
       // this.getTableData()
-      this.getData(this.filter)
+      this.variablesInit && this.getData(this.filter)
       const param = {
         panelId: this.panelId,
         nowTimeType: JSON.stringify(this.nowTimeType),
@@ -765,7 +819,7 @@ export default {
             if (!this.showPanel.id) {
               this.showPanel = response.data.list[0]
               this.filter.panelId = this.showPanel.id
-              this.getData(this.filter)
+              this.variablesInit && this.getData(this.filter)
               isInitData = true
             } else {
               handler(response.data.list)
@@ -779,7 +833,7 @@ export default {
           }
           this.pageObj.total = response.data.total
           if (!isInitData && (this.panel.id === '' || this.panel.id === this.showPanel.id)) {
-            this.getData(this.filter)
+            this.variablesInit && this.getData(this.filter)
           }
           this.$store.state.showPanel.id = 0
           this.$store.state.showPanel.name = ''
@@ -804,7 +858,7 @@ export default {
             { show: true, type: 'custom', multi: false, allOption: true, name: 'azy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' }
           ]
         }
-        this.variables = [
+        this.showPanel.param.variables = [
           { show: true, type: 'custom', multi: true, allOption: true, name: 'mazy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
           { show: true, type: 'custom', multi: true, allOption: false, name: 'mzy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
           { show: true, type: 'custom', multi: false, allOption: false, name: 'zy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
@@ -855,6 +909,7 @@ export default {
             show: true
           }
         ]
+        this.variables = this.showPanel.param.variables
       }).catch((error) => {
         // console.log('error................'+JSON.stringify(error));
         if (error) {
@@ -1099,6 +1154,10 @@ export default {
         const path = this.fromRoute.panel
         this.updatePath(param, path)
       }
+    },
+    getPanelData () {
+      this.variablesInit = true
+      this.getData(this.filter)
     }
   },
   created () {