diff --git a/nezha-fronted/package-lock.json b/nezha-fronted/package-lock.json
index 72d7a2fd9..733cf7072 100644
--- a/nezha-fronted/package-lock.json
+++ b/nezha-fronted/package-lock.json
@@ -3986,6 +3986,16 @@
       "integrity": "sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg==",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "cliui": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
@@ -6121,6 +6131,11 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -8428,6 +8443,14 @@
         "minimatch": "~3.0.2"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "got": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz",
@@ -16336,6 +16359,11 @@
         }
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -17807,6 +17835,11 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "tinycolor2": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
@@ -18486,6 +18519,14 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-clipboard2": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
+      "integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "vue-color": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.8.1.tgz",
diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index 166462773..206e19ee5 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -476,3 +476,8 @@ textarea {
 .ql-tooltip {
   background: $--background-color-empty;
 }
+
+
+.chart-time-series.hide{
+  display: none !important;
+}
diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index 7d70ffce7..deb815e7b 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -88,12 +88,15 @@
     background-color: $--background-color-empty;
     transition:all .2s;
     color: $--button-icon-color;
-
     i {
       font-size: 14px;
       color: $--button-icon-color;
     }
   }
+  .top-tool-btn.active{
+    background-color: $--button-icon-active-background-color;
+    border: 1px solid $--button-icon-active-border-color !important;
+  }
   .top-tool-btn.top-tool-btn--text {
     padding: 0 8px;
     width: unset;
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
new file mode 100644
index 000000000..86d720ff9
--- /dev/null
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
@@ -0,0 +1,217 @@
+.right-box-panel{
+  .item-receivers{
+    .el-select.el-select--small{
+      width: 100%;
+    }
+    .item-receivers-text{
+      color: $--color-text-secondary;
+    }
+  }
+    .el-input--suffix.el-date-editor--datetime .el-input__inner{
+      padding-left: 15px;
+    }
+    .form-items--half-width-group{
+      .item-receivers{
+        width: 100%;
+        .el-select.el-select--small{
+          width: 100%;
+        }
+      }
+      .form-item--half-width{
+        .el-date-editor.el-date-editor--datetime{
+          width: 100%;
+          .el-input__inner{
+            height: 32px;
+          }
+        }
+      }
+      .check-month_box{
+        .el-checkbox-group{
+          display: flex;
+          justify-content: start;
+          align-items: center;
+          flex-wrap: wrap;
+          .el-checkbox-button{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: calc(100% / 7);
+            margin-right: -2px;
+            margin-bottom: -1px;
+            border: 1px solid $--border-color-light;
+            .el-checkbox-button__inner{
+              border: 0px;
+              border-left: 0px !important;
+              border-bottom: 0px !important;
+              display: block;
+              width: 100%;
+              height: 100%;
+              background-color: $--background-color-empty;
+              border-radius: 0;
+            }
+          }
+        }
+        
+    .el-checkbox-button.is-checked .el-checkbox-button__inner {
+      color: #fff;
+      border-radius: 0;
+      background-color: $--color-primary !important;
+    }
+    }
+      .range-time{
+        width: 100%;
+        .el-form-item__content{
+          height: 41px;
+          .el-radio-group{
+            height: 100%;
+            border-left: 1px solid $--border-color-light;
+            .el-radio-button__inner{
+              height: 100%;
+              line-height: 1.5;
+              font-size: 14px;
+              color: $--color-text-primary;
+            }
+          }
+          .el-checkbox-group{
+            height: 100%;
+            .el-checkbox-button{
+              margin-right: -2px;
+              .el-checkbox-button__inner{
+                background-color: $--background-color-empty;
+                border:1px solid $--border-color-light;
+              }
+            }
+          }
+        }
+        .el-radio-group{
+          display: flex;
+          border-left: 0;
+          .el-radio-button{
+            flex: 1;
+          }
+        }
+
+        .el-checkbox-button.is-checked .el-checkbox-button__inner {
+          color: #fff;
+          border-radius: 0;
+          background-color: $--color-primary !important;
+          border: 1px solid $--color-primary !important;
+          // margin-right: -1px;
+        }
+      }
+      .form-tabs{
+        width: 100%;
+        .el-tabs__nav{
+          display: flex;
+          .el-tabs__item{
+            flex: 1;
+          }
+          .el-checkbox-button.is-checked .el-checkbox-button__inner {
+            color: #fff;
+            border-radius: 0;
+            background-color: $--color-primary !important;
+            border: 1px solid $--color-primary !important;
+            // margin-right: -1px;
+          }
+        }
+      }
+      .form-day-week{
+        width: 100%;
+        .el-input-group__append{
+          border: 1px solid $--border-color-light;
+          background-color: $--right-box-sub-title-background-color;
+        }
+      }
+   }
+   .variable-box{
+    margin-bottom: 16px;
+    .variable-title{
+      border: 1px solid $--border-color-light;
+      border-radius: 2px;
+      position: relative;
+      display: flex;
+      padding: 0;
+      padding-left: 5px;
+      line-height: 30px;
+      justify-content: space-between;
+      margin-bottom: 10px;
+      box-sizing: border-box;
+      height: 32px;
+      .variable-title-left{
+        width: 450px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        .nz-icon-arrow-down{
+          display: inline-block;
+          transition: transform .3s;
+          cursor: pointer;
+        }
+        .nz-icon-arrow-down.is-active{
+          transform: rotate(-90deg );
+        }
+        &>span{
+          font-size: 14px;
+          color: $--color-text-regular;
+        }
+      }
+      .nz-icon{
+        cursor: pointer;
+        color: $--color-text-primary;
+      }
+      .nz-icon-mimabukejian{
+        font-size: 18px;
+      }
+    } 
+    .variable-title{
+      margin-bottom: 0;
+      margin-top: 10px;
+    }
+    .add-variable{
+      border: 1px solid $--border-color-light;
+      border-radius: 2px;
+      text-align: center;
+      margin-bottom: 10px;
+      padding: 3px 10px;
+      color: $--color-text-regular;
+      font-size: 14px;
+      cursor: pointer;
+      margin-top: 16px;
+    }
+   }
+   
+ }
+      
+.el-form-item__content{
+  text-align: unset !important;
+  .el-checkbox-button{
+    width: calc(100% / 7) !important;
+    .el-checkbox-button__inner{
+      width: 100%;
+      padding: 11px 3px;
+    }
+    
+  }
+  .el-checkbox-button.is-focus .el-checkbox-button__inner{
+    border-color: $--border-color-base;
+  }
+
+  .el-tabs__item.is-top.is-active{
+    color: #fff !important;
+    background-color: $--color-primary !important;
+  }
+  .el-radio-button.el-radio-button--small.is-active{
+    .el-radio-button__inner{
+      color: #fff !important;
+    }
+  }
+}
+
+.multiTip{
+  max-width:200px;
+}
+.allOptionTip{
+  max-width:208px;
+}
+
+  
\ No newline at end of file
diff --git a/nezha-fronted/src/assets/css/components/index.scss b/nezha-fronted/src/assets/css/components/index.scss
index 1f13dcb64..17add18bb 100644
--- a/nezha-fronted/src/assets/css/components/index.scss
+++ b/nezha-fronted/src/assets/css/components/index.scss
@@ -51,6 +51,7 @@
 @import './common/rightBox/chartRightBox/chartRightBox.scss';
 @import './common/rightBox/mibBox.scss';
 @import './common/rightBox/assetBactchEditBox.scss';
+@import './common/rightBox/panelBox.scss';
 @import './common/table/alert/alertMessageTable.scss';
 @import './common/table/alert/alertRuleTable.scss';
 @import './common/table/alert/alertSilenceTable.scss';
diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
index 7b83c7dfc..30e8b5f0c 100644
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -26,7 +26,7 @@ import { formatScientificNotation } from '@/components/common/js/tools'
 import chartDataFormat from '@/components/chart/chartDataFormat'
 import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 import { chartLegendPlacement } from '@/components/common/js/constants'
-import { getChart, setChart } from '@/components/common/js/common'
+import { getChart, setChart, chartCache } from '@/components/common/js/common'
 import { initColor } from '@/components/chart/chart/tools'
 import lodash from 'lodash'
 
@@ -69,6 +69,36 @@ export default {
       }
     }
   },
+  watch: {
+  // 监听当前鼠标所在的图表id变化
+    '$store.state.panel.currentMousemove': {
+      handler (n) {
+        // 判断是否是当前鼠标所在的图表
+        if (n === this.chartId) {
+          let option = {}
+          for (const key in chartCache) {
+            if (!chartCache[key] || chartCache[key].group !== 'timeSeriesGroup') {
+              continue
+            }
+            if (chartCache[key] === getChart(this.chartId)) {
+              option = {
+                tooltip: {
+                  className: 'chart-time-series'
+                }
+              }
+            } else {
+              option = {
+                tooltip: {
+                  className: 'chart-time-series hide'
+                }
+              }
+            }
+            chartCache[key].setOption(option)
+          }
+        }
+      }
+    }
+  },
   methods: {
     initChart (chartOptions = this.chartOption) {
       try {
@@ -122,6 +152,22 @@ export default {
         }
         myChart.setOption(chartOption)
         this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
+
+        this.$store.commit('setCurrentMousemove', 0)
+        if (this.isInit) {
+          // timeSeries类型图表设置group 用于多表联动
+          myChart.group = 'timeSeriesGroup'
+          myChart.getZr().on('mousemove', params => {
+            if (this.$store.state.panel.isConnect !== 'crosshair') {
+              return false
+            }
+            // crosshair 模式才会执行
+            if (this.$store.state.panel.currentMousemove !== this.chartId) {
+              this.$store.commit('setCurrentMousemove', this.chartId)
+            }
+          })
+        }
+
         this.isInit = false
       }, 200)
     },
@@ -191,7 +237,7 @@ export default {
       return { minTime, maxTime, minValue, maxValue, copies, unit, dot }
     },
     xAxisLabelFormatter (minTime, maxTime) {
-      let self = this
+      const self = this
       return function (val, index) {
         const value = val * 1000
         let offset = localStorage.getItem('nz-sys-timezone')
diff --git a/nezha-fronted/src/components/chart/chart/legend.vue b/nezha-fronted/src/components/chart/chart/legend.vue
index 39aecf264..d9aade502 100644
--- a/nezha-fronted/src/components/chart/chart/legend.vue
+++ b/nezha-fronted/src/components/chart/chart/legend.vue
@@ -44,6 +44,8 @@ import lodash from 'lodash'
 import { getChart } from '@/components/common/js/common'
 import chartDataFormat from '@/components/chart/chartDataFormat'
 import { statisticsList } from '@/components/common/js/constants'
+import * as chart from 'echarts'
+import { isTimeSeries } from './tools'
 export default {
   name: 'chartLegend',
   props: {
@@ -65,6 +67,10 @@ export default {
   computed: {
     isStatistics () {
       return !lodash.isEmpty(this.chartInfo.param.legend.values)
+    },
+    // timeSeries类型图表联动
+    isConnect () {
+      return this.$store.state.panel.isConnect
     }
   },
   methods: {
@@ -94,6 +100,10 @@ export default {
       }
 
       if (echarts) {
+        // 判断timeSeries类型图表 先取消多表联动
+        if (isTimeSeries(this.chartInfo.type) && (this.isConnect && this.isConnect !== 'none')) {
+          chart.disconnect('timeSeriesGroup')
+        }
         if (!hasGrey) { // 1.除当前legend外全置灰
           echarts.dispatchAction({
             type: 'legendInverseSelect'
@@ -116,6 +126,10 @@ export default {
           })
           this.$set(this.isGrey, index, !this.isGrey[index])
         }
+        // 判断timeSeries类型图表 建立多表联动
+        if (isTimeSeries(this.chartInfo.type) && (this.isConnect && this.isConnect !== 'none')) {
+          chart.connect('timeSeriesGroup')
+        }
         if (this.chartInfo.type !== 'pie' && this.chartInfo.type !== 'bar' && this.chartInfo.type !== 'treemap') {
           // 处理点击后的 Y轴
           const chartInfo = this.chartInfo
diff --git a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
index fc47e9bf8..3fcf01ce5 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
@@ -32,14 +32,20 @@ export const chartTimeSeriesLineOption = {
     }
   },
   tooltip: {
+    show: true,
     trigger: 'axis',
     confine: false,
     extraCssText: 'z-index:99999999;',
     z: 9,
     animation: false,
     appendToBody: true,
-    className: 'chart-time-series'
-    // formatter: 动态生成
+    className: 'chart-time-series',
+    axisPointer: {
+      type: 'cross', // 十字准星指示器,表示启用两个正交的轴的 axisPointer
+      label: {
+        show: false
+      }
+    }
   },
   color: initColor(),
   grid: {
@@ -61,9 +67,9 @@ export const chartTimeSeriesLineOption = {
       fontSize: 10
       // formatter: 动态生成
     },
-    axisPointer: { // y轴上显示指针对应的值
-      show: true
-    },
+    // axisPointer: { // y轴上显示指针对应的值
+    //   show: true
+    // },
     splitLine: {
       show: true,
       lineStyle: {
diff --git a/nezha-fronted/src/components/common/js/common.js b/nezha-fronted/src/components/common/js/common.js
index 5ccc57a0b..91099ac62 100644
--- a/nezha-fronted/src/components/common/js/common.js
+++ b/nezha-fronted/src/components/common/js/common.js
@@ -16,7 +16,7 @@ export function getUUID () {
   return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
 }
 
-const chartCache = {}
+export const chartCache = {}
 
 export function getChart (key) {
   return chartCache[`chart${key}`]
diff --git a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
index 05553f0a0..6d2b9667b 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
@@ -362,7 +362,7 @@ export default {
     showInput (index, flag) {
       this.expressionsShow[index].hideInput = flag
     },
-    transformNumToLetter (num) { // 相当于26进制 获取id
+    transformNumToLetter (num) { // 相当于26进制 获取idaddExpression
       const self = this
       let letter = ''
       const loopNum = parseInt(num / 26)
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index 721426ec2..b0d1661d8 100644
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -14,6 +14,261 @@
           <el-form-item :label='$t("overall.name")' prop="name">
             <el-input id="dc-box-input-name" v-model="editPanel.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
           </el-form-item>
+          <!--remark-->
+           <el-form-item :label='$t("overall.remark")' class="range-time" prop="remark">
+            <el-input
+              v-model="editPanel.remark"
+              maxlength="256"
+              size="small" :rows="2"
+              show-word-limit
+              type="textarea">
+            </el-input>
+          </el-form-item>
+
+          <!-- chartShare -->
+          <el-form-item :label="$t('dashboard.panel.chartTooltip')" class="item-receivers" prop="chartShare">
+            <el-select v-model="editPanel.param.chartShare" clearable  placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
+              <el-option value="none" label="Default">
+              <span class="panel-dropdown-label-txt" >{{$t('config.assetLabel.default')}}</span>
+              </el-option>
+            <el-option value="crosshair" label="Share crosshair">
+              <span class="panel-dropdown-label-txt" >{{$t('dashboard.panel.crosshair')}}</span>
+              </el-option>
+              <el-option value="tooltip" label="Share tooltip">
+              <span class="panel-dropdown-label-txt" >{{$t('dashboard.panel.shareTooltip')}}</span>
+              </el-option>
+            </el-select>
+            <div class="item-receivers-text">{{$t('dashboard.panel.chartTooltipText')}}</div>
+          </el-form-item>
+
+          <!-- variable -->
+          <div
+            class="variable-box"
+          >
+            <div class="form__sub-title" style="margin-bottom:0px">
+              <span>{{$t('dashboard.panel.variables')}}</span>
+            </div>
+            <el-row
+              :key="index"
+              v-for="(item,index) of editPanel.param.variables"
+            >
+              <div class="variable-title">
+                <span class="variable-title-left">
+                  <i class="nz-icon nz-icon-arrow-down" :class="item.collapse?'is-active':''" @click.stop="dropVariable(index,item)"></i>
+                  <span v-show="item.collapse">{{item.name}}</span>
+                </span>
+                <span style="display:flex;align-items:center">
+                  <span @click="showVariable(index,item)" class="nz-icon-minus-medium" style="margin-right: 6px;padding-left: 10px">
+                    <i v-if="item.show" class="nz-icon nz-icon-mimakejian"></i>
+                    <i v-else class="nz-icon nz-icon-mimabukejian"></i>
+                  </span>
+                  <span @click="addVariable()" style="margin-right: 6px">
+                    <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
+                  </span>
+                  <span @click="copyVariable(item)" style="margin-right: 6px">
+                    <i  class="nz-icon nz-icon-override"></i>
+                  </span>
+                  <span @click="removeVariable(index)" class="nz-icon-minus-medium" style="margin-right: 6px">
+                    <i  class="nz-icon nz-icon-minus"></i>
+                  </span>
+                </span>
+              </div>
+              <transition name="el-zoom-in-top">
+                <div class="form-items--half-width-group" v-if="!item.collapse" style="margin-top: 16px">
+                  <!-- Name -->
+                  <el-form-item class="form-item--half-width" :label='$t("overall.name")' :prop="'param.variables.' + index + '.name'"
+                    :rules="[
+                    { required: true, message: $t('validate.required'), trigger: 'blur'},
+                    { pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: $t('dashboard.panel.matchRegex'), trigger: 'blur'},
+                    { validator: variableValidator,trigger: 'blur'},
+                    ]"
+                  >
+                    <el-input v-model="item.name" :placeholder="$t('overall.placeHolder')" size="small"/>
+                  </el-form-item>
+                  <!-- Type -->
+                  <el-form-item class="form-item--half-width" :label='$t("overall.type")' :prop="'param.variables.' + index + '.type'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}">
+                    <el-select
+                      v-model="item.type"
+                      :placeholder="$t('overall.placeHolder')"
+                      size="small"
+                      @change="variableTypeChange(index)"
+                      >
+                      <el-option label="Query" value="query"></el-option>
+                      <el-option label="Custom" value="custom"></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <!-- Custom values -->
+                  <el-form-item v-if="item.type==='custom'" :label="$t('dashboard.panel.customValues')" :prop="'param.variables.' + index + '.customOptions'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" key="customOptions" style="width: 100%;" >
+                    <el-input v-model="item.customOptions" placeholder="1,10,myKey:myValue" size="small"/>
+                  </el-form-item>
+                  <!-- Query expression -->
+                  <el-form-item v-if="item.type==='query'" :label="$t('dashboard.panel.queryExpression')" :prop="'param.variables.' + index + '.expression'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" key="expression" style="width: 100%;" >
+                    <el-input v-model="item.expression" placeholder="labels_names()" size="small"/>
+                  </el-form-item>
+                  <!-- Regex -->
+                  <el-form-item v-if="item.type==='query'" :label="$t('dashboard.panel.regex')" :prop="'param.variables.' + index + '.regex'" key="regex" style="width: 100%;" >
+                    <el-input v-model="item.regex" placeholder="/.*-(?<text>.*)-(?<value>.*)-.*/" size="small"/>
+                  </el-form-item>
+                  <!-- Multi-value -->
+                  <el-form-item class="form-item--half-width" :prop="'param.variables.' + index + '.multi'" style="margin-bottom: 0px">
+                    <div slot="label">
+                      <el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside multiTip">
+                        <span>{{$t('dashboard.panel.multiTip')}}</span>
+                        <span slot="reference">
+                          {{$t('dashboard.panel.multi')}}
+                          <i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+                        </span>
+                      </el-popover>
+                    </div>
+                    <el-select
+                      v-model="item.multi"
+                      size="small"
+                      >
+                      <el-option label="Enabled" :value="true"></el-option>
+                      <el-option label="Disabled" :value="false"></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <!-- All option -->
+                  <el-form-item class="form-item--half-width" :prop="'param.variables.' + index + '.allOption'" style="margin-bottom: 0px">
+                    <div slot="label">
+                      <el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside allOptionTip">
+                        <span>{{$t('dashboard.panel.allOptionTip')}}</span>
+                        <span slot="reference">
+                          {{$t('dashboard.panel.allOption')}}
+                          <i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+                        </span>
+                      </el-popover>
+                    </div>
+                    <el-select
+                      v-model="item.allOption"
+                      size="small"
+                      >
+                      <el-option label="Enabled" :value="true"></el-option>
+                      <el-option label="Disabled" :value="false"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </div>
+              </transition>
+            </el-row>
+            <div @click="addVariable()" class="add-variable">{{$t('dashboard.panel.addVariable')}}</div>
+          </div>
+
+          <!--   Report  -->
+          <div>
+            <div class="form__sub-title">
+              <span>{{$t('dashboard.panel.report')}}</span>
+              <el-switch v-model="editPanel.param.report.enable" size="small"></el-switch>
+            </div>
+            <div v-if="editPanel.param.report.enable">
+              <transition name="el-zoom-in-top" >
+                <div class="form-items--half-width-group">
+                  <el-form-item
+                  :label="$t('backup.start')"
+                  class="form-item--half-width"
+                  prop="param.report.schedule.stime"
+                  >
+                  <my-date-picker align="right" class=" "
+                              v-model="editPanel.param.report.schedule.stime"
+                              :format="timeFormatStrToDatePickFormat(dateFormatStr)"
+                              popper-class="panel-time-picker-popper right-box-select-top"
+                              prefix-icon=" "
+                              size="mini"
+                              type="datetime">
+                      </my-date-picker>
+                    </el-form-item>
+                  <el-form-item
+                  :label="$t('dashboard.panel.endAt')"
+                  class="form-item--half-width"
+                  prop="param.report.schedule.etime"
+                  >
+                     <my-date-picker align="right" class=" "
+                            v-model="editPanel.param.report.schedule.etime"
+                            :format="timeFormatStrToDatePickFormat(dateFormatStr)"
+                            popper-class="panel-time-picker-popper right-box-select-top"
+                            prefix-icon=" "
+                            size="mini"
+                            type="datetime">
+                         </my-date-picker>
+                    </el-form-item>
+                  <el-form-item :label='$t("dashboard.panel.period")' class="range-time" prop="param.report.range.unit">
+                    <el-radio-group v-model="editPanel.param.report.range.unit" size="small">
+                      <el-radio-button label="day">{{ $t("dashboard.panel.prevDay") }}</el-radio-button>
+                      <el-radio-button label="week">{{ $t("dashboard.panel.prevWeek") }}</el-radio-button>
+                      <el-radio-button label="month">{{ $t("dashboard.panel.prevMonth") }}</el-radio-button>
+                    </el-radio-group>
+                    </el-form-item>
+            <el-form-item
+            :label="$t('backup.schedule')"
+            prop="param.report.schedule.type"
+            class="form-tabs">
+            <el-tabs
+              v-model="editPanel.param.report.schedule.type"
+              type="card"
+              @tab-click="datasourceChange"
+              class="backups-info-tab"
+            >
+              <el-tab-pane :label="$t('backup.Daily')" name="2"></el-tab-pane>
+              <el-tab-pane :label="$t('backup.Weekly')" name="3"></el-tab-pane>
+              <el-tab-pane :label="$t('backup.Monthly')" name="4"></el-tab-pane>
+            </el-tabs>
+               </el-form-item>
+          <el-form-item
+            v-if="isShow === 2 || isShow === 3 ? true :false"
+            :label="$t('backup.RepeatEvery')"
+            prop="param.report.schedule.repeat"
+            class="form-day-week">
+            <el-input
+              size="small"
+              v-model="editPanel.param.report.schedule.repeat"
+              id="chart-box-title"
+              v-if="isShow === 3 ? true :false">
+              <template slot="append">{{ $t("backup.week") }}</template>
+            </el-input>
+            <el-input
+              size="small"
+              v-model="editPanel.param.report.schedule.repeat"
+              id="chart-box-title"
+              v-if="isShow === 2 ? true :false">
+              <template slot="append">{{ $t("backup.day") }}</template>
+            </el-input>
+                </el-form-item>
+         <el-form-item v-if="isShow === 3 ? true : false" :label='$t("backup.WeekOn")' class="range-time" prop="nums">
+            <el-checkbox-group
+              v-model="editPanel.param.report.schedule.nums">
+              <el-checkbox-button
+                v-for="(item,index) in week"
+                :label="index + 1"
+                :key="index"
+                >{{item}}</el-checkbox-button>
+            </el-checkbox-group>
+                    </el-form-item>
+           <el-form-item
+            v-show="isShow === 4 ? true : false"
+            :label="$t('backup.DayOfMonth')"
+            prop="nums"
+            class="check-month_box"
+            id="day-of-month"
+          >
+             <el-checkbox-group v-model="editPanel.param.report.schedule.nums">
+               <el-checkbox-button
+                v-for="(item, index) in month"
+                :label="index === 31 ? -1 : index + 1"
+                :key="item"
+                >{{ item }}</el-checkbox-button>
+             </el-checkbox-group>
+                </el-form-item>
+           <el-form-item :label="$t('dashboard.panel.receivers')" class="item-receivers" prop="param.report.receivers">
+             <el-select v-model="editPanel.param.report.receivers" clearable multiple placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
+               <el-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id">
+               <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+               </el-option>
+            </el-select>
+                </el-form-item>
+          </div>
+              </transition>
+            </div>
+      </div>
+
         </el-form>
       </div>
     </div>
@@ -32,6 +287,8 @@
 
 <script>
 import editRigthBox from '../mixin/editRigthBox'
+import bus from '@/libs/bus'
+import { arrLength, datePicker } from '@/components/common/js/validate'
 export default {
   name: 'panelBox',
   props: {
@@ -44,14 +301,166 @@ export default {
     return {
       url: 'visual/panel',
       editPanel: {},
+      isShow: 0,
+      userData: [],
       rules: {
         name: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        'param.report.range.unit': [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        'param.report.schedule.type': [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        'param.report.schedule.repeat': [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        'param.report.schedule.stime': [{
+          required: true,
+          message: this.$t('validate.required')
+        }, { validator: datePicker, trigger: 'blur' }],
+        'param.report.receivers': [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' },
+          { validator: arrLength }
         ]
+      },
+      week: [
+        this.$t('week.Mon'),
+        this.$t('week.Tue'),
+        this.$t('week.Wed'),
+        this.$t('week.Thu'),
+        this.$t('week.Fri'),
+        this.$t('week.Sat'),
+        this.$t('week.Sun')
+      ],
+      month: [
+        1,
+        2,
+        3,
+        4,
+        5,
+        6,
+        7,
+        8,
+        9,
+        10,
+        11,
+        12,
+        13,
+        14,
+        15,
+        16,
+        17,
+        18,
+        19,
+        20,
+        21,
+        22,
+        23,
+        24,
+        25,
+        26,
+        27,
+        28,
+        29,
+        30,
+        31,
+        'Last'
+      ],
+      dateFormatStr: localStorage.getItem('nz-default-dateFormat')
+        ? localStorage.getItem('nz-default-dateFormat')
+        : 'YYYY-MM-DD HH:ss:mm'
+    }
+  },
+  created () {
+    this.dateFormatStr = 'YYYY-MM-DD HH:mm:ss'
+    if (this.editPanel.id) {
+      this.isShow = Number(this.editPanel.param.report.schedule.type)
+      this.editPanel.param.report.schedule.type = this.editPanel.param.report.schedule.type + ''
+      if (this.editPanel.param.report.schedule.stime !== '') {
+        this.editPanel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.stime)
+      } else {
+        this.editPanel.param.report.schedule.stime = ''
+      }
+      if (this.editPanel.param.report.schedule.etime !== '') {
+        this.editPanel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.etime)
+      } else {
+        this.editPanel.param.report.schedule.etime = ''
       }
     }
   },
+  mounted () {
+    this.getUserData()
+  },
   methods: {
+    // 变量类型改变 清空数据
+    variableTypeChange (index) {
+      this.$set(this.editPanel.param.variables[index], 'customOptions', '')
+      this.$set(this.editPanel.param.variables[index], 'expression', '')
+      this.$set(this.editPanel.param.variables[index], 'regex', '')
+    },
+    // 变量名校验 防止重复
+    variableValidator (rule, value, callback) {
+      const nameArr = this.editPanel.param.variables.map(item => item.name)
+      const findIndex = nameArr.indexOf(value)
+      const lastIndex = nameArr.lastIndexOf(value)
+      setTimeout(() => {
+        if (findIndex !== lastIndex) {
+          callback(new Error(this.$t('error.nameDuplicate')))
+        } else {
+          callback()
+        }
+      }, 100)
+    },
+    // 展开 折叠变量
+    dropVariable (index, item) {
+      this.$set(this.editPanel.param.variables[index], 'collapse', !item.collapse)
+      this.$refs.form.clearValidate('param.variables.' + index + '.name')
+      this.$refs.form.clearValidate('param.variables.' + index + '.customOptions')
+      this.$refs.form.clearValidate('param.variables.' + index + '.expression')
+    },
+    // 显示 隐藏变量
+    showVariable (index, item) {
+      this.$set(this.editPanel.param.variables[index], 'show', !item.show)
+    },
+    // 添加变量
+    addVariable () {
+      const temp = {
+        show: true,
+        type: 'custom',
+        multi: false,
+        allOption: false
+      }
+      this.editPanel.param.variables.push(temp)
+    },
+    // 复制变量
+    copyVariable (item) {
+      const temp = JSON.parse(JSON.stringify(item))
+      temp.name = temp.name ? temp.name + '_copy' : ''
+      this.editPanel.param.variables.push(temp)
+    },
+    // 删除复制变量
+    removeVariable (index) {
+      this.editPanel.param.variables.splice(index, 1)
+    },
+    getUserData () {
+      return new Promise(resolve => {
+        this.$get('sys/user', { pageSize: -1, pageNo: 1 }).then(response => {
+          if (response.code === 200) {
+            this.userData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    datasourceChange (tab) {
+      this.isShow = Number(tab.name)
+      if (this.editPanel.param.report.schedule.nums) {
+        this.editPanel.param.report.schedule.nums = []
+        this.editPanel.param.report.schedule.repeat = 1
+      }
+    },
     /* 关闭弹框 */
     esc (refresh) {
       this.prevent_opt.save = false
@@ -63,6 +472,40 @@ export default {
 
     /* 保存 */
     save () {
+      // 保存时把collapse属性删除 再传入后台
+      const variables = this.editPanel.param.variables.map((item) => {
+        const temp = JSON.parse(JSON.stringify(item))
+        delete temp.collapse
+        return temp
+      })
+      const params = {
+        id: this.editPanel.id ? this.editPanel.id : '',
+        name: this.editPanel.name,
+        type: 'dashboard',
+        pid: 0,
+        remark: this.editPanel.remark,
+        param: {
+          report: {
+            enable: this.editPanel.param.report.enable,
+            range: {
+              type: 'previous',
+              interval: 1,
+              unit: this.editPanel.param.report.range.unit
+            },
+            schedule: {
+              type: Number(this.editPanel.param.report.schedule.type),
+              repeat: this.editPanel.param.report.schedule.repeat ? this.editPanel.param.report.schedule.repeat : 1,
+              nums: this.editPanel.param.report.schedule.nums,
+              stime: this.editPanel.param.report.schedule.stime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.stime) : this.editPanel.param.report.schedule.stime,
+              etime: this.editPanel.param.report.schedule.etime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.etime) : this.editPanel.param.report.schedule.etime
+            },
+            receivers: this.editPanel.param.report.receivers
+          },
+          chartShare: this.editPanel.param.chartShare,
+          variables
+        }
+      }
+      const editParam = JSON.parse(JSON.stringify(params))
       if (this.prevent_opt.save) {
         return
       }
@@ -70,7 +513,7 @@ export default {
       this.$refs.form.validate((valid) => {
         if (valid) {
           if (this.editPanel.id) {
-            this.$put(this.url, this.editPanel).then(response => {
+            this.$put(this.url, editParam).then(response => {
               this.prevent_opt.save = false
               if (response.code === 200) {
                 this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -80,7 +523,7 @@ export default {
               }
             })
           } else {
-            this.$post(this.url, this.editPanel).then(response => {
+            this.$post(this.url, editParam).then(response => {
               this.prevent_opt.save = false
               if (response.code === 200) {
                 this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -126,6 +569,30 @@ export default {
       handler (n, o) {
         this.isEdit = true
         this.editPanel = JSON.parse(JSON.stringify(n))
+        // 如果是空数组 则添加一条变量数据
+        if (!this.editPanel.param.variables || !this.editPanel.param.variables.length) {
+          const temp = [{
+            show: true,
+            type: 'custom',
+            multi: false,
+            allOption: false
+          }]
+          this.$set(this.editPanel.param, 'variables', temp)
+        }
+      }
+    },
+    'editPanel.param.report.schedule.stime': {
+      deep: true,
+      handler (n) {
+        this.editPanel.param.report.schedule.stime = bus
+          .timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
+      }
+    },
+    'editPanel.param.report.schedule.etime': {
+      deep: true,
+      handler (n) {
+        this.editPanel.param.report.schedule.etime = bus
+          .timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
       }
     }
   }
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index baa806ecd..dbf772d03 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -34,11 +34,11 @@
             </div>
 
             <div class="top-tool-right">
-<!--              <div class="top-tool-search margin-r-20">-->
-<!--                <el-input id="queryPanel" ref="queryPanel" v-model="filter.searchName" class="query-input-inactive"  clearable size="small" @blur="blurInput" @clear="clearInput" @focus="focusInput">-->
-<!--                  <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float: right" @click="focusInput"></i>-->
-<!--                </el-input>-->
-<!--              </div>-->
+             <!-- <div class="top-tool-search margin-r-20">
+               <el-input id="queryPanel" ref="queryPanel" v-model="filter.searchName" class="query-input-inactive"  clearable size="small" @blur="blurInput" @clear="clearInput" @focus="focusInput">
+                 <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float: right" @click="focusInput"></i>
+               </el-input>
+             </div> -->
 
               <pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" class="margin-r-10" :sign="showPanel.id"></pick-time>
 
@@ -144,6 +144,7 @@
 </template>
 
 <script>
+import { chartCache } from '@/components/common/js/common'
 import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
 import bus from '../../../libs/bus'
 import pickTime from '../../common/pickTime'
@@ -156,7 +157,8 @@ import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 import routerPathParams from '@/components/common/mixin/routerPathParams'
 import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
 import exportHtmlMixin from '@/components/common/mixin/exportHtml'
-import FileSaver from 'file-saver'
+import * as echarts from 'echarts'
+// import FileSaver from 'file-saver'
 // import chartData from './testData'
 export default {
   name: 'panel',
@@ -189,7 +191,21 @@ export default {
       },
       panel: { // 新增panel
         id: '',
-        name: ''
+        name: '',
+        remark: '',
+        param: {
+          report: {
+            enable: false,
+            range: {
+              unit: ''
+            },
+            schedule: {
+              repeat: 0,
+              nums: [],
+              type: 0
+            }
+          }
+        }
       },
       chart: {},
       blankChart: {
@@ -376,6 +392,28 @@ export default {
     },
     edit (u) {
       this.panel = Object.assign({}, u)
+      if (!this.panel.param.report) {
+        this.panel = {
+          ...u,
+          param: {
+            report: {
+              enable: false,
+              range: {
+                unit: ''
+              },
+              schedule: {
+                type: '0',
+                repeat: 1,
+                nums: [],
+                stime: '',
+                etime: ''
+              },
+              receivers: []
+            },
+            chartShare: 'none'
+          }
+        }
+      }
       this.rightBox.panel.show = true
     },
     toAdd () {
@@ -386,7 +424,25 @@ export default {
       // this.$refs.panelBox.show(true)
       this.panel = {
         id: '',
-        name: ''
+        name: '',
+        remark: '',
+        param: {
+          report: {
+            enable: false,
+            range: {
+              unit: ''
+            },
+            schedule: {
+              stime: '',
+              etime: '',
+              nums: [],
+              type: 0 + '',
+              repeat: 1
+            }
+          },
+          chartShare: 'none',
+          variables: []
+        }
       }
       // this.$refs.panelBox.setTitle(this.$t('dashboard.panel.createPanelTitle'))
     },
@@ -999,6 +1055,30 @@ export default {
     }
   },
   watch: {
+    'showPanel.param.chartShare': {
+      handler (value) {
+        // 每次切换联动模式 tooltip设置显示
+        const option = {
+          tooltip: {
+            className: 'chart-time-series'
+          }
+        }
+        for (const key in chartCache) {
+          if (!chartCache[key] || chartCache[key].group !== 'timeSeriesGroup') {
+            continue
+          }
+          chartCache[key].setOption(option)
+        }
+        this.$store.commit('setCurrentMousemove', 0)
+        if (value && value !== 'none') {
+          this.$store.commit('setConnect', value)
+          echarts.connect('timeSeriesGroup')
+        } else {
+          this.$store.commit('setConnect', value)
+          echarts.disconnect('timeSeriesGroup')
+        }
+      }
+    },
     'filter.searchName': function (n, o) {
       const temp = this
       setTimeout(function () {
@@ -1063,6 +1143,11 @@ export default {
     if (!document.onmousemove) { // 添加鼠标移动事件监听
       document.onmousemove = null
     }
+
+    // 页面销毁 清除图表联动
+    this.$store.commit('setCurrentMousemove', 0)
+    this.$store.commit('setConnect', 'none')
+    echarts.disconnect('timeSeriesGroup')
   }
 }
 </script>
diff --git a/nezha-fronted/src/store/panel.js b/nezha-fronted/src/store/panel.js
index 2fe6a2cc1..b3c167f31 100644
--- a/nezha-fronted/src/store/panel.js
+++ b/nezha-fronted/src/store/panel.js
@@ -20,7 +20,11 @@ const panel = {
     topologyChartInfo: {},
     // 查看模式
     mode: '',
-    addCabinetBoxParams: { dcid: '', cabinetBoxShow: false }
+    addCabinetBoxParams: { dcid: '', cabinetBoxShow: false },
+    // timeSeries类型图表联动
+    isConnect: 'none',
+    // 当前鼠标所在的图表id
+    currentMousemove: 0
   },
   mutations: {
     setShowRightBox (state, flag) {
@@ -77,6 +81,14 @@ const panel = {
     // 设置查看模式
     setMode (state, mode) {
       state.mode = mode
+    },
+    // 设置timeSeries类型图表联动
+    setConnect (state, value) {
+      state.isConnect = value
+    },
+    // 设置当前鼠标所在的图表id (timeSeries类型图表联动)
+    setCurrentMousemove (state, value) {
+      state.currentMousemove = value
     }
   },
   getters: {