diff --git a/nezha-fronted/src/assets/css/components/common/timePicker.scss b/nezha-fronted/src/assets/css/components/common/timePicker.scss
index 0f02bd3de..b3ec8a5ed 100644
--- a/nezha-fronted/src/assets/css/components/common/timePicker.scss
+++ b/nezha-fronted/src/assets/css/components/common/timePicker.scss
@@ -311,6 +311,13 @@
 }
 .el-date-range-picker.el-picker-panel__body__only {
   width: 324px;
+  .el-date-range-picker__header{
+    .el-picker-panel__icon-btn.el-icon-arrow-right{
+      font-size: 12px;
+      color: $--button-icon-color;
+      transform: scale(0.8);
+    }
+  }
 }
 .el-date-range-picker__content.el-date-range-picker__content__only{
   width: 100%;
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
index 3b7a19a08..d8a17da33 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -228,7 +228,7 @@ export default {
           thresholdShow: true,
           thresholds: [{ value: undefined, color: randomcolor() }]
         },
-        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
+        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 }],
         panel: '',
         sync: 0,
         remark: '',
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
index 1a8133afc..6783540b5 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
@@ -52,7 +52,14 @@
               <div v-if="expressionsShow[index-1].error"  class="el-form-item__error" style="top: 10px;left: 164px"> {{expressionsShow[index-1].error}}</div>
             </span>
             <span>
-              <span @click="()=>{addExpression()}" style="margin-right: 5px;padding-left: 10px" :title="$t('tip.add')">
+              <!-- 显示隐藏 -->
+              <span v-if="expressionsShow[index-1].state === 1" @click="()=>{switchExpression(index - 1,1)}" :title="$t('overall.visible')" style="margin-right: 5px;padding-left: 10px">
+                  <i class="nz-icon nz-icon-mimakejian"></i>
+              </span>
+              <span v-else @click="()=>{switchExpression(index - 1,0)}" :title="$t('overall.invisible')" style="margin-right: 5px;padding-left: 10px">
+                  <i class="nz-icon nz-icon-mimabukejian"></i>
+              </span>
+              <span @click="()=>{addExpression()}" style="margin-right: 5px" :title="$t('tip.add')">
                   <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
               </span>
               <span @click="copyExpression(index - 1)" style="margin-right: 5px" :title="$t('overall.duplicate')">
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index b3e72839f..a86f6a43b 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -362,7 +362,7 @@ export default {
           type: 'line',
           min: 0,
           max: 100,
-          elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
+          elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 }],
           param: {
             stack: 0,
             nullType: 'null',
@@ -389,7 +389,7 @@ export default {
             legend: true,
             valueMapping: false
           },
-          elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
+          elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 }],
           param: {
             limit: 100,
             showHeader: this.editChart.param.showHeader
diff --git a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
index 6d2b9667b..7bf8a6917 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
@@ -329,13 +329,21 @@ export default {
       if (this.expressions.length) {
         this.chartConfig.elements = []
         this.expressions.forEach((expr, i) => {
-          this.chartConfig.elements.push({ id: this.expressionsShow[i].elementId, expression: expr, type: 'expert', legend: this.expressionsShow[i].legend, name: this.expressionName[i] })
+          this.chartConfig.elements.push({ id: this.expressionsShow[i].elementId, expression: expr, type: 'expert', legend: this.expressionsShow[i].legend, name: this.expressionName[i], state: this.expressionsShow[i].state })
         })
       } else {
         this.chartConfig.elements = []
       }
       this.change()
     },
+    switchExpression (index, flag) {
+      if (flag === 1) {
+        this.$set(this.expressionsShow[index], 'state', 0)
+      } else {
+        this.$set(this.expressionsShow[index], 'state', 1)
+      }
+      this.expressionChange()
+    },
     expressionNameChange (index) {
       if (this.expressionsShow[index].error) {
         this.expressionName[index] = this.expressionsShow[index].oldName
@@ -383,7 +391,8 @@ export default {
           oldName: expressionName,
           error: '',
           legend: '',
-          elementId: ''
+          elementId: '',
+          state: 1
         })
         this.expressionChange()
       } else {
@@ -396,7 +405,8 @@ export default {
             oldName: item.name,
             error: '',
             elementId: item.id,
-            legend: item.legend
+            legend: item.legend,
+            state: item.state
           }
         )
       }
diff --git a/nezha-fronted/src/components/page/config/template/chartTemp.vue b/nezha-fronted/src/components/page/config/template/chartTemp.vue
index 7e01a95f4..fa531356a 100644
--- a/nezha-fronted/src/components/page/config/template/chartTemp.vue
+++ b/nezha-fronted/src/components/page/config/template/chartTemp.vue
@@ -182,7 +182,7 @@ export default {
           thresholdShow: true,
           thresholds: [{ value: undefined, color: randomcolor() }]
         },
-        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
+        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 }],
         panel: '',
         sync: 0,
         remark: '',
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 0e36736cc..6eed7f54a 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -231,7 +231,7 @@ export default {
           thresholds: [{ value: undefined, color: randomcolor() }],
           showHeader: 1
         },
-        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
+        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 }],
         panel: '',
         sync: 0,
         remark: '',