diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 982d94a02..8710103ec 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -616,17 +616,25 @@ export default {
                       const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
                       // 设置时间-数据格式对
                       const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                      // 判断是否有数据
-                      if (dpsArr.length > 0 && tagsArr.length > 0 && this.$refs.editChart[index]) {
+                      // 判断是否有数据, && tagsArr.length > 0
+                      if (dpsArr.length > 0 && this.$refs.editChart[index]) {
                         tagsArr.forEach((tag, i) => {
                           if (tag !== '__name__') {
                             host += `${tag}="${queryItem.metric[tag]}",`;
                           }
                         });
                         if(host.endsWith(',')){host = host.substr(0,host.length-1);}
-                        host +="}";
+                        if(queryItem.metric.__name__){
+                          host +="}";
+                        }
+                        if(!host || host===''){
+                          host = chartItem.elements[innerPos].expression;
+                        }
                         //处理legend别名
                         let alias=this.$refs.editChart[index].dealLegendAlias(host,chartItem.elements[innerPos].legend);
+                        if(!alias || alias===''){
+                          alias = chartItem.elements[innerPos].expression;
+                        }
                         legend.push({name:host,alias:alias});
                         // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
                         seriesItem.theData.name = host;
diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index fb73e155d..b2ca27640 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -16,6 +16,9 @@
   .char-url-preview html{
 
   }
+  #chartPreviewDailog .el-dialog__body {
+    padding-bottom:5px !important;
+  }
 </style>
 <template>
     <el-dialog class="chart-preview-dialog nz-dialog" id="chartPreviewDailog"
@@ -42,8 +45,8 @@
       </div>
 
       <template v-if="chart.type==='line'||chart.type==='bar'||chart.type==='stackArea'">
-        <div id="chartEchartPreview">
-          <div class="line-area" ref="screenShowArea"  id="screenShowArea"  style="margin-top:10px;"></div>
+        <div id="chartEchartPreview" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart">
+          <div class="line-area" ref="screenShowArea"  id="screenShowArea"  style="margin-top:0px;"></div>
           <div class="legend-container legend-container-screen" id="screenLegendArea" ref="screenLegendArea" v-show="showLegend" v-scrollBar:legend>
             <div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
               <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
@@ -147,7 +150,7 @@
         searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
         //oldSearchTime:[],
         minHeight:200,
-        chartSpaceHeight:0,//top-border: 1,bottom-border: 1,padding-bottome:3
+        chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
         titleHeight:50,
         legendHeight:80,
         //oldChartBoxCss:'',
@@ -409,17 +412,25 @@ console.log('=======',this.chart)
                         const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
                         // 设置时间-数据格式对
                         const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                        // 判断是否有数据
-                        if (dpsArr.length > 0 && tagsArr.length > 0 ) {
+                        // 判断是否有数据, && tagsArr.length > 0
+                        if (dpsArr.length > 0 ) {
                           tagsArr.forEach((tag, i) => {
                             if (tag !== '__name__') {
                               host += `${tag}="${queryItem.metric[tag]}",`;
                             }
                           });
                           if(host.endsWith(',')){host = host.substr(0,host.length-1);}
-                          host +="}";
+                          if(queryItem.metric.__name__){
+                            host +="}";
+                          }
+                          if(!host || host===''){
+                            host = chartItem.elements[innerPos].expression;
+                          }
                           //处理legend别名
                           let alias=this.dealLegendAlias(host,chartItem.elements[innerPos].legend);
+                          if(!alias || alias===''){
+                            alias = chartItem.elements[innerPos].expression;
+                          }
                           legend.push({name:host,alias:alias});
                           // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
                           seriesItem.theData.name = host;
@@ -596,9 +607,26 @@ console.log('=======',this.chart)
             show:false,
           },
           color: this.bgColorList,
+          toolbox:{
+            show:false,
+            top:'0',
+            showTitle:false,
+            feature:{
+              dataZoom:{
+                yAxisIndex:false
+              },
+              magicType:{
+                type:['stack']
+              }
+            }
+          },
           tooltip: {
             trigger: 'axis',
             confine:false,
+            backgroundColor:'rgba(221,228,237,1)',
+            textStyle:{
+              color:'#000'
+            },
             extraCssText:'z-index:1000;',
             /*enterable:true, 导致tooltip不消失，显示多个tooltip*/
             position:function(point,params,dom,rect,size){
@@ -712,12 +740,12 @@ console.log('=======',this.chart)
             //bottom:0
           },
           grid: {
-            top: 13,
+            top: 30,
             left: 0,
             right: 30,
             containLabel: true,
-            bottom:35,//156
-          },
+            bottom:8,//156
+          },/*
           dataZoom: [{
             type: 'slider',
             show:true,
@@ -729,7 +757,7 @@ console.log('=======',this.chart)
             left:40,
             right:48,
           }
-           ],
+          ],*/
 
           xAxis: {
             type: 'time',
@@ -796,6 +824,24 @@ console.log('=======',this.chart)
           this.$refs.loadingPreview.endLoading();
         });
       },
+      mouseEnterFullChart(){
+        if (this.echartModalStore) {
+          this.echartModalStore.setOption({
+            toolbox: {
+              show:true,
+            }
+          })
+        }
+      },
+      mouseLeaveFullChart(){
+        if (this.echartModalStore) {
+          this.echartModalStore.setOption({
+            toolbox: {
+              show:false,
+            }
+          })
+        }
+      },
       // 设置数据
       setData(chartItem, seriesItem,legend) {
           this.legend = legend;
@@ -929,16 +975,24 @@ console.log('=======',this.chart)
                       const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
                       // 设置时间-数据格式对
                       const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                      // 判断是否有数据
-                      if (dpsArr.length > 0 && tagsArr.length > 0) {
+                      // 判断是否有数据,&& tagsArr.length > 0
+                      if (dpsArr.length > 0 ) {
                         tagsArr.forEach((tag, i) => {
                           if (tag !== '__name__') {
                             host += `${tag}="${queryItem.metric[tag]}",`;
                           }
                         });
                         if(host.endsWith(',')){host = host.substr(0,host.length-1);}
-                        host +="}";
+                        if(queryItem.metric.__name__){
+                          host +="}";
+                        }
+                        if(!host || host===''){
+                          host = this.chart.elements[pos].expression;
+                        }
                         let alias=this.dealLegendAlias(host,this.chart.elements[pos].legend);
+                        if(!alias || alias===''){
+                          alias = this.chart.elements[pos].expression;
+                        }
                         legend.push({name:host,alias:alias});
                         // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
                         seriesItem.theData.name = host;
diff --git a/nezha-fronted/src/components/charts/line-chart-block.scss b/nezha-fronted/src/components/charts/line-chart-block.scss
index 6abee510f..9316af8b6 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.scss
+++ b/nezha-fronted/src/components/charts/line-chart-block.scss
@@ -141,7 +141,7 @@
         display: inline-block;
         cursor: pointer;
       }
-    }
+  }
   }
 
   .line-area {
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 52c7fd436..ead7b69cf 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -2,7 +2,7 @@
   @import './line-chart-block.scss';
 </style>
 <template>
-  <div class="line-chart-block"   :id="'lineChartDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
+  <div class="line-chart-block"   :id="'lineChartDiv'+chartIndex" v-show="divFirstShow" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
     <loading  :ref="'localLoading'+chartIndex"></loading>
 
     <!--<div class="edit">
@@ -49,19 +49,19 @@
             <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
         </ul>
       </el-dropdown>
-    <!--
-   <div class="chart-title" v-show="firstShow">
-     {{data.title}}
-   </div>
+      <!--
+     <div class="chart-title" v-show="firstShow">
+       {{data.title}}
+     </div>
 
-   <div class="nz-btn-group nz-btn-group-light edit button-panel-height" v-show="firstShow">
-     <button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button>
-     <button @click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="nz-icon nz-icon-edit"></i></button>
-     <button  @click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="el-icon-delete"></i></button>
-     <button
-     @click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button>
-   </div>
-   -->
+     <div class="nz-btn-group nz-btn-group-light edit button-panel-height" v-show="firstShow">
+       <button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button>
+       <button @click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="nz-icon nz-icon-edit"></i></button>
+       <button  @click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="el-icon-delete"></i></button>
+       <button
+       @click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button>
+     </div>
+     -->
     </div>
 
     <div class="line-area"  ref="lineChartArea"  :id="'lineChartArea'+chartIndex" v-show="firstShow"></div>
@@ -98,9 +98,9 @@
           <!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
         </div>
       </div>
-      <div class="line-area" ref="screenShowArea"  id="screenShowArea"  style="margin-top:10px;"></div>
+      <div class="line-area" ref="screenShowArea"  id="screenShowArea"  style="margin-top:10px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
 
-      <div class="legend-container legend-container-screen" id="screenLegendArea" ref="screenLegendArea" v-show="showLegend" v-scrollBar:legend>
+      <div class="legend-container legend-container-screen" id="screenLegendArea" ref="screenLegendArea" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
         <div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
           <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
           <br/><!--bgColorList[index]-->
@@ -298,6 +298,44 @@
       setDivFirstShow(showDiv){
         this.divFirstShow = showDiv;
       },
+      mouseEnterChart(){
+        this.caretShow=true;
+        if (this.echartStore) {
+          this.echartStore.setOption({
+            toolbox: {
+              show:true,
+            }
+          })
+        }
+      },
+      mouseLeaveChart(){
+        this.caretShow=false;
+        if (this.echartStore) {
+          this.echartStore.setOption({
+            toolbox: {
+              show:false,
+            }
+          })
+        }
+      },
+      mouseEnterFullChart(){
+        if (this.echartModalStore) {
+          this.echartModalStore.setOption({
+            toolbox: {
+              show:true,
+            }
+          })
+        }
+      },
+      mouseLeaveFullChart(){
+        if (this.echartModalStore) {
+          this.echartModalStore.setOption({
+            toolbox: {
+              show:false,
+            }
+          })
+        }
+      },
       dragResize:function(e){
         var diffWidth = 20;//界面的宽度空白的地方的宽度
         var chartBoxPadding = 20;
@@ -449,8 +487,8 @@
         //     type: 'legendToggleSelect',
         //     name: legendName
         //   });
-          // let isGreyTmp = this.isGrey[index];
-          // this.$set(this.isGrey, index, !isGreyTmp);
+        // let isGreyTmp = this.isGrey[index];
+        // this.$set(this.isGrey, index, !isGreyTmp);
         // }
 
         //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
@@ -624,9 +662,26 @@
             show:false,
           },
           color: this.bgColorList,
+          toolbox:{
+            show:false,
+            top:'0',
+            showTitle:false,
+            feature:{
+              dataZoom:{
+                yAxisIndex:false
+              },
+              magicType:{
+                type:['stack']
+              }
+            }
+          },
           tooltip: {
             trigger: 'axis',
             confine:false,
+            backgroundColor:'rgba(221,228,237,1)',
+            textStyle:{
+              color:'#000'
+            },
             extraCssText:'z-index:1000;',
             /*enterable:true, 导致tooltip不消失，显示多个tooltip*/
             position:function(point,params,dom,rect,size){
@@ -776,12 +831,13 @@
             //bottom:0
           },
           grid: {
-            top: 13,
+            top: 30,
             left: 0,
             right: 30,
             containLabel: true,
-            bottom:35,//156
+            bottom:8,//156
           },
+          /*
           dataZoom: [{
             type: 'slider',
             show:true,
@@ -793,24 +849,7 @@
             left:40,
             right:48,
           }
-            /*
-            , {
-              start: 0,
-              end: 100,
-              handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
-              handleSize: '80%',
-              handleStyle: {
-                color: '#fff',
-                shadowBlur: 3,
-                shadowColor: 'rgba(0, 0, 0, 0.6)',
-                shadowOffsetX: 2,
-                shadowOffsetY: 2
-              }
-
-
-            }
-            */],
-
+           ],*/
           xAxis: {
             type: 'time',
             // boundaryGap: false,//line-false; bar-true;
@@ -994,12 +1033,25 @@
               const legend = {
                 name:item.name,
                 alias:item.alias,
-                showText:this.formatLegend(chartWidth,item.alias?item.alias:item.name)
+                showText:this.formatLegend(chartWidth,item.name)
               };
               this.screenLegendList.push(legend);
               this.isGreyScreen.push(false);
             });
           }
+
+          if(legend){
+            this.legendList = [];
+            legend.forEach((item, i) => {
+              const legend = {
+                name:item.name,
+                alias:item.alias,
+                showText:this.formatLegend(chartWidth,item.name)
+              };
+              this.legendList.push(legend);
+              this.isGrey.push(false);
+            });
+          }
           /*this.$nextTick(() => {
             this.$refs.screenLegendScrollbar.update();
             let divHeight = this.$refs.screenLegendArea.offsetHeight;
@@ -1155,13 +1207,13 @@
         this.isGreyScreen=[];
 
         this.seriesItemScreen = this.seriesItem;
-/*
-        this.searchTime = [];
-        this.searchTime[0] = this.oldSearchTime[0];//将列表的查询时间复制给全屏的查询时间
-        this.searchTime[1] = this.oldSearchTime[1];
-        this.seriesItemScreen = this.seriesItem;
-        this.screenModal = true;
-        */
+        /*
+                this.searchTime = [];
+                this.searchTime[0] = this.oldSearchTime[0];//将列表的查询时间复制给全屏的查询时间
+                this.searchTime[1] = this.oldSearchTime[1];
+                this.seriesItemScreen = this.seriesItem;
+                this.screenModal = true;
+                */
         //this.dateChange();
       },
       dateChange(time) {
@@ -1253,16 +1305,24 @@
                       const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
                       // 设置时间-数据格式对
                       const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                      // 判断是否有数据
-                      if (dpsArr.length > 0 && tagsArr.length > 0) {
+                      // 判断是否有数据,&& tagsArr.length > 0
+                      if (dpsArr.length > 0 ) {
                         tagsArr.forEach((tag, i) => {
                           if (tag !== '__name__') {
                             host += `${tag}="${queryItem.metric[tag]}",`;
                           }
                         });
                         if(host.endsWith(',')){host = host.substr(0,host.length-1);}
-                        host +="}";
+                        if(queryItem.metric.__name__){
+                          host +="}";
+                        }
+                        if(!host || host===''){
+                          host = this.data.elements[pos].expression;
+                        }
                         let alias=this.dealLegendAlias(host,this.data.elements[pos].legend);
+                        if(!alias || alias===''){
+                          alias = this.data.elements[pos].expression;
+                        }
                         legend.push({name:host,alias:alias});
                         // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
                         seriesItem.theData.name = host;
@@ -1322,7 +1382,7 @@
           }
           chartBox.style.height = `${height-this.chartSpaceHeight}px`;
           //const tableBox = document.getElementById('tableContainer');
-         // const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
+          // const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
           //tableBox.style.height = `${height-75}px`;
         });
         this.clearData();
@@ -1381,6 +1441,10 @@
       },
       handleClose(){},
       /*
+     // 展示图表编辑区
+      showTool() {
+        this.toolbox = !this.toolbox;
+      },
       handleClose(done) {
         /*
         this.$confirm('确认关闭？')
@@ -1391,10 +1455,6 @@
 
       },*/
       /*
-        // 展示图表编辑区
-        showTool() {
-          this.toolbox = !this.toolbox;
-        },
         // 修改图表类型
         changeChart(type) {
           this.chartType = type;
@@ -1404,16 +1464,6 @@
             },
           });
         },
-
-        dateChange(time) {
-          this.filter.start_time = `${time[0]}:00`;
-          this.filter.end_time = `${time[1]}:59`;
-          if (this.showSetting) {
-            this.getQueryChart('list');
-          } else {
-            this.getQueryChart('dashboard');
-          }
-        },
         // 查询数据,修改日期查询全屏数据
         getQueryChart(type) {
           if (this.highchartModalStore) {
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 10aeccfaa..9ea7e01ce 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -117,7 +117,7 @@ const en = {
         chartName:"Chart Name",
         type:"Type",
         unit:"Unit",
-        url:"Url",
+        url:"URL",
         legend:'Legend',
         legendTip:'Controls the name of the time series, using name or pattern. For example {{hostname}} will be replaced with label value for the label hostname.',
         typeVal:{
@@ -134,7 +134,7 @@ const en = {
             label:"Stack Area"
           },
           url:{
-            label:"Url"
+            label:"URL"
           }
         },
         width:'Width', //"宽"
diff --git a/nezha-fronted/src/components/common/calendar.vue b/nezha-fronted/src/components/common/timePicker.vue
similarity index 51%
rename from nezha-fronted/src/components/common/calendar.vue
rename to nezha-fronted/src/components/common/timePicker.vue
index 282236a08..ce36111d3 100644
--- a/nezha-fronted/src/components/common/calendar.vue
+++ b/nezha-fronted/src/components/common/timePicker.vue
@@ -3,7 +3,6 @@
     color:#232f3e !important;
   }
   .calendar{
-
   }
   .nz-dashboard-dropdown-bg {
     background: $global-text-color-active;
@@ -16,7 +15,7 @@
     margin-top: 3px;
     text-align:left;
     border-radius:4px;
-    width:140px;
+    width:160px;
     height:24px;
     border:solid 1px  #d8dce1;
     white-space: nowrap;
@@ -30,17 +29,17 @@
     line-height:22px;
     text-align:center;
   }
-  .el-popper{
-
-  }
 </style>
 <template>
-  <div class="calendar top-tools">
-    <el-dropdown @command="timeChange" class="calendar-dropdown-title" trigger="click" v-scrollBar:el-dropdown>
+  <div class="calendar top-tools" id="panel-calender">
+    <el-dropdown @command="timeChange" class="calendar-dropdown-title" trigger="click" v-scrollBar:el-dropdown @visible-change="popoverClick">
       <el-popover
         placement="bottom-end"
-        width="80"
-        trigger="hover">
+        min-width="120px"
+        :visible-arrow="false"
+        :disabled="isPopoverDisabled"
+        trigger="hover"
+        id="panel-calender-popover">
         <el-row  :gutter="10" class="calendar-popover">
           <el-col :span="24">{{searchTime[0]}}</el-col>
         </el-row>
@@ -52,18 +51,24 @@
         </el-row>
         <el-row  :gutter="10" class="el-dropdown-link" slot="reference">
           <el-col :span="3" ><i class="el-icon-time"></i></el-col>
-          <el-col :span="16" class="panel-list-title" >{{showTime.text}}</el-col>
-          <el-col :span="5" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col>
+          <el-col :span="17" class="panel-list-title" >{{showTime.text}}</el-col>
+          <el-col :span="4" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col>
         </el-row>
       </el-popover>
       <el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
-        <el-dropdown-item>{{$t('dashboard.panel.customTimeRange')}}</el-dropdown-item>
+        <!-- <el-dropdown-item >{{$t('dashboard.panel.customTimeRange')}}</el-dropdown-item>  -->
         <el-dropdown-item v-for="item in timeData" :key="item.id+1"
                           :class="showTime.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
           {{item.text}}
         </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
+    <el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar"
+                    format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange"
+                    :picker-options="pickerOptions" :range-separator="$t('dashboard.panel.to')"
+                    :start-placeholder="$t('dashboard.panel.startTime')"
+                    :end-placeholder="$t('dashboard.panel.endTime')" align="right">
+    </el-date-picker>
   </div>
 </template>
 
@@ -71,77 +76,133 @@
 import bus from '../../libs/bus';
 
 export default {
-  name: "calendar",
+  name: "timePicker",
   props: {
   },
   data() {
     return {
+      isPopoverDisabled:false,
       searchTime:[
-        bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 15),'yyyy-MM-dd hh:mm:ss'),
+        bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 5),'yyyy-MM-dd hh:mm:ss'),
         bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss')
       ],
       showTime: {
         id: 1,
         text: this.$t("dashboard.panel.lastFiveMin"),
       },
+      oldTime:{
+        id: 1,
+        text: this.$t("dashboard.panel.lastFiveMin"),
+      },
       timeData: [
+        {
+          id:0,
+          text:this.$t("dashboard.panel.customTimeRange"),
+        },
         {
           id:1,
           text:this.$t("dashboard.panel.lastFiveMin"),
+          type:'minute',
+          value:5,
         },
         {
           id:2,
           text:this.$t("dashboard.panel.lastFifteenMin"),
+          type:'minute',
+          value:15,
         },
         {
           id:3,
           text:this.$t("dashboard.panel.lastThirtyMin"),
+          type:'minute',
+          value:30,
         },
         {
           id:4,
           text:this.$t("dashboard.panel.lastOneHour"),
+          type:'hour',
+          value:1,
         },
         {
           id:5,
           text:this.$t("dashboard.panel.lastThreeHour"),
+          type:'hour',
+          value:3,
         },
         {
           id:6,
           text:this.$t("dashboard.panel.lastSixHour"),
+          type:'hour',
+          value:6,
         },
         {
           id:7,
           text:this.$t("dashboard.panel.lastTwelveHour"),
+          type:'hour',
+          value:12,
         },
         {
           id:8,
           text:this.$t("dashboard.panel.lastTwentyFourHour"),
+          type:'hour',
+          value:24,
         },
         {
           id:9,
           text:this.$t("dashboard.panel.lastTwoDay"),
+          type:'date',
+          value:2,
         },
         {
           id:10,
           text:this.$t("dashboard.panel.lastSevenDay"),
+          type:'date',
+          value:7,
         },
         {
           id:11,
           text:this.$t("dashboard.panel.lastThirtyDay"),
+          type:'date',
+          value:30,
         }
       ],
     };
   },
   methods: {
     timeChange(val) {
-      if (!val) {
-        //this.toAdd();
-        return false;
-      }
       this.showTime = val;
-      //this.showPanel = val
-      //this.filter.panelId = this.showPanel.id;
-      //this.$emit('on-remove-chart-block', this.searchTime);
+
+      if (!val) {
+        return false;
+      }else {
+        let id = val.id;
+        if(id===0){
+
+        }else {
+          this.oldTime = val;
+        }
+        this.setSearchTime(val.type,val.value);
+      }
+      this.$emit('change', this.searchTime);
+    },
+    setSearchTime(type,val){
+      if(type==='minute'){
+        this.searchTime[0] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val),'yyyy-MM-dd hh:mm:ss'),
+        this.searchTime[1] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
+      }else if(type==='hour'){
+        this.searchTime[0] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val),'yyyy-MM-dd hh:mm:ss'),
+          this.searchTime[1] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
+      }else if(type==='date'){
+        this.searchTime[0] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val),'yyyy-MM-dd hh:mm:ss'),
+          this.searchTime[1] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
+      }
+    },
+    popoverClick(val){
+      if(val){
+        this.isPopoverDisabled = true;
+      }else{
+        this.isPopoverDisabled = false;
+      }
     },
   }
 };
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index b68c11ca1..6a5aa1a01 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -184,7 +184,7 @@
             </el-row>
 
             <el-form-item v-if="isUrl" :label='$t("dashboard.panel.chartForm.url")' prop="param.url" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }">
-              <el-input size="small" maxlength="64" show-word-limit v-model="chart.param.url"></el-input>
+              <el-input size="small" type="textarea" maxlength="1024" show-word-limit v-model="chart.param.url"></el-input>
             </el-form-item>
 
             <div v-if="!isUrl" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div>
diff --git a/nezha-fronted/src/components/page/dashboard/metricPreview.vue b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
index 7e327edda..0ae3bae73 100644
--- a/nezha-fronted/src/components/page/dashboard/metricPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
@@ -34,7 +34,7 @@
               <div class="box-content" >
                 <el-row :gutter="20"  class="row-width" style="height: calc(100% - 65px);">
                   <el-col :span="10" >
-                      <metric-set  :panelData="panelData" ref="metricSet" @on-view-chart="getChartParam"  @reloadPanel="getPanelData"></metric-set>
+                      <metric-set  :panelData="panelData" ref="metricSet" @on-view-chart="getChartParam"  @reloadPanel="getPanelData" ></metric-set>
                   </el-col>
                   <el-col :span="0.5" ><div>&nbsp;</div></el-col>
                   <el-col :span="13" class="chart-preview-area" >
@@ -327,9 +327,11 @@ export default {
         const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
         // 设置时间-数据格式对
         const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-        // 判断是否有数据
-        if (dpsArr.length > 0 && tagsArr.length > 0) {
-            host +="{";
+        // 判断是否有数据, && tagsArr.length > 0
+        if (dpsArr.length > 0) {
+            if(queryItem.metric.__name__){
+              host +="{";
+            }
             tagsArr.forEach((tag, i) => {
               if (tag !== '__name__') {
                 host += `${tag}="${queryItem.metric[tag]}",`;
@@ -343,8 +345,14 @@ export default {
               }
             });
           if(host.endsWith(',')){host = host.substr(0,host.length-1);}
-          host +="}";
-          legend.push({name:host,alias:null});
+          if(queryItem.metric.__name__){
+            host +="}";
+          }
+          if(!host || host===''){
+            host = params.metric;
+          }
+          let alias = params.metric;
+          legend.push({name:host,alias:alias});
 
           // 图表中每条线的名字,去掉最后的逗号与空格
           seriesItem.theData.name = host;
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 1291f9ab5..0cb57e81f 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -48,7 +48,8 @@
                               :end-placeholder="$t('dashboard.panel.endTime')" align="right">
               </el-date-picker>
               <!--
-              <calendar ref="calendarPanel" class="nz-dashboard-picker"></calendar>
+
+              <time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
               -->
             </div>
           </div>
@@ -103,7 +104,7 @@
   import ChartBox from "./chartBox";
   import ChartList from '../../charts/chart-list';
   import bus from '../../../libs/bus';
-  //import calendar from '../../common/calendar'
+  //import timePicker from '../../common/timePicker'
 
   export default {
     name: "panel",
@@ -195,7 +196,10 @@
             }
           }]
         },
-        searchTime: [new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1), new Date(bus.computeTimezone(new Date().getTime()))],
+        searchTime: [
+          new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 5),
+          new Date(bus.computeTimezone(new Date().getTime()))
+        ],
         intervalTimer: null,
         intervalList: [{
           value: 0,
@@ -274,7 +278,7 @@
     components: {
       'chart-box': ChartBox,
       'chart-list': ChartList,
-      //'calendar':calendar
+      //'time-picker':timePicker
     },
     methods: {
       //刷新
@@ -411,7 +415,7 @@
         if (params.start_time === '' || params.end_time === '') {
           let now = new Date();
           let endTimeTmp = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
-          let startTimeTmp = bus.timeFormate(now.setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss');
+          let startTimeTmp = bus.timeFormate(now.setMinutes(now.getMinutes() - 5), 'yyyy-MM-dd hh:mm:ss');
           params.start_time = startTimeTmp;
           params.end_time = endTimeTmp;
         }
@@ -423,8 +427,8 @@
       /*图表相关操作--end*/
       /*时间条件查询--start*/
       // 选择日期变化
-      dateChange() {
-        //this.$refs.searchInput.select();
+      dateChange(val) {
+        this.searchTime = [...val];
         this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
         this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
         this.filter.panelId = this.showPanel.id;