diff --git a/nezha-fronted/src/App.vue b/nezha-fronted/src/App.vue
index d7335f6aa..d65551a40 100644
--- a/nezha-fronted/src/App.vue
+++ b/nezha-fronted/src/App.vue
@@ -12,9 +12,9 @@
 export default {
   name: 'App',
   mounted() {
-    /*this.$http.get("config.json").then((result)=>{
-      this.$axios.defaults.baseURL = result.body.baseUrl;
-    });*/
+    // this.$http.get("config.json").then((result)=>{
+    //   this.$axios.defaults.baseURL = result.body.baseUrl;
+    // });
     this.$axios.defaults.baseURL = 'http://192.168.40.247:8080/nz-admin';
   }
 }
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 026839fdb..8618624b5 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -45,6 +45,9 @@
         <el-menu-item index="1-2">
           <div @click="jumpTo('metricPreview')" :class="{'menu-item-active' :activeIndex == 'metricPreview'}">{{$t('dashboard.metricPreview.title')}}</div>
         </el-menu-item>
+        <el-menu-item index="1-3">
+          <div @click="jumpTo('explore')" :class="{'menu-item-active' :activeIndex == 'explore'}">{{$t('dashboard.metricPreview.title')}}</div>
+        </el-menu-item>
       </el-submenu>
 
       <el-submenu index="2" popper-class="nz-submenu">
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 69cb8369c..831005d2c 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -202,6 +202,7 @@ const en = {
     },
     metricPreview:{
       title:'Explore',
+      inputTip:'Enter a PromQL query'
     },
     refresh:'Refresh',//'刷新'
     edit:'Edit',//'编辑'
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 68b97530a..549055598 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -326,7 +326,9 @@
     },
     methods: {
       show(show) {
-        this.panelName2 = this.showPanel.name;
+        if(this.showPanel){
+          this.panelName2 = this.showPanel.name;
+        }
         this.rightBox.show = show;
         this.isUrl = false;
       },
diff --git a/nezha-fronted/src/components/page/dashboard/explore/explore.vue b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
index c1e5c1a6d..2ecffa97c 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/explore.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
@@ -1,36 +1,42 @@
 <template>
-    <div class="explore">
-      <left-menu >
-        <div slot="content-left" class="slot-content">
-          <div class="sidebar-title">{{$t('dashboard.title')}}</div>
-          <div class="sidebar-info">
-            <div class="sidebar-info-item " @click="jumpTo('overview')">{{$t('dashboard.overview.title')}}</div>
-            <div class="sidebar-info-item" @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
-            <div class="sidebar-info-item" @click="jumpTo('metricPreview')">{{$t('dashboard.metricPreview.title')}}</div>
-            <div class="sidebar-info-item sidebar-info-item-active" >{{$t('dashboard.metricPreview.title')}}</div>
-          </div>
+  <div class="explore">
+    <left-menu>
+      <div slot="content-left" class="slot-content">
+        <div class="sidebar-title">{{$t('dashboard.title')}}</div>
+        <div class="sidebar-info">
+          <div class="sidebar-info-item " @click="jumpTo('overview')">{{$t('dashboard.overview.title')}}</div>
+          <div class="sidebar-info-item" @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
+          <div class="sidebar-info-item sidebar-info-item-active" >{{$t('dashboard.metricPreview.title')}}</div>
         </div>
-        <div slot="content-right" class="slot-content">
-          <div class="main-list main-and-sub-transition" >
+      </div>
+      <div slot="content-right" class="slot-content">
+        <div class="main-list main-and-sub-transition">
+          <el-scrollbar style="height: 100%">
             <!-- 顶部工具栏 -->
-            <div class="top-tools" >
+            <div class="top-tools" style="z-index: 1">
+              <button :disabled="saveDisabled" type="button" @click="saveChart" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120" :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}">
+                {{$t('dashboard.metric.saveChart')}}
+              </button>
               <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20">
                 <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button"
-                        class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()">
+                        class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="expressionChange">
                   <i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
-                </button><el-popover
-                v-model="visible" placement="bottom-start" width="200" trigger="click">
-                <ul class="popover_ul">
-                  <li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name"
-                      @click="selectInterval(i.value)">
-                    {{i.name}}
-                  </li>
-                </ul>
-                <button type="button" style="border-radius: 0 4px 4px 0" class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
-                  <i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
                 </button>
-              </el-popover>
+                <el-popover
+                  v-model="visible" placement="bottom-start" width="200" trigger="click">
+                  <ul class="popover_ul">
+                    <li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name"
+                        @click="selectInterval(i.value)">
+                      {{i.name}}
+                    </li>
+                  </ul>
+                  <button type="button" style="border-radius: 0 4px 4px 0"
+                          class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
+                    <i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
+                  </button>
+                </el-popover>
               </div>
+
               <el-date-picker size="mini" ref="calendar"
                               format="yyyy/MM/dd HH:mm"
                               @change="dateChange"
@@ -55,35 +61,107 @@
                 @removeExpression="removeExpression"
               ></promql-input>
             </div>
-            <div class="chart-room" style="width: 100%;height: 500px">
-              <chart ref="exploreChart"></chart>
+            <div class="chart-view " v-show="!showIntroduce" :class="{'shrink-view':!chartVisible || !defaultChartVisible}">
+              <div class="view-title" @click="changeChartVisible"><i class="el-icon-caret-top"></i>&nbsp;graph</div>
+              <div class="chart-room">
+                <chart ref="exploreChart"></chart>
+              </div>
             </div>
-            <div class="table-room">table</div>
-          </div>
+            <div class="table-view " v-show="!showIntroduce" :class="{'shrink-view':!tableVisible || !defaultTableVisible}">
+              <div class="view-title" @click="changeTableVisible"><i class="el-icon-caret-top"></i>&nbsp;table</div>
+              <div class="table-room">
+                <el-table class="nz-table explore-table"
+                          :data="tableData"
+                          border
+                          ref="exploreTable"
+                          tooltip-effect="light"
+                          v-scrollBar:el-table="'large'"
+                          v-loading="tableLoading"
+                          style="width: 100%;">
+                  <el-table-column
+                    :resizable="false"
+                    v-for="(item, index) in tableLabels"
+                    :key="`col-${index}`"
+                    :label="item.label"
+                    :prop="item.prop"
+                    show-overflow-tooltip
+                    min-width="110px"
+                  ></el-table-column>
+                </el-table>
+                <pagination :page-obj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination" :append-to-body="false"></pagination>
+              </div>
+            </div>
+            <div class="introduce-view" v-show="showIntroduce">
+              <div class="info-room">
+                <div><h2>PromQL Cheat Sheet</h2>
+                  <div class="cheat-sheet-item">
+                    <div class="cheat-sheet-item__title">Request Rate</div>
+                    <div class="cheat-sheet-item__example"><code>rate(http_request_total[5m])</code></div>
+                    <div class="cheat-sheet-item__label">Given an HTTP request counter, this query calculates the
+                      per-second average request rate over the last 5 minutes.
+                    </div>
+                  </div>
+                  <div class="cheat-sheet-item">
+                    <div class="cheat-sheet-item__title">95th Percentile of Request Latencies</div>
+                    <div class="cheat-sheet-item__example"><code>histogram_quantile(0.95,
+                      sum(rate(prometheus_http_request_duration_seconds_bucket[5m])) by (le))</code></div>
+                    <div class="cheat-sheet-item__label">Calculates the 95th percentile of HTTP request rate over 5
+                      minute windows.
+                    </div>
+                  </div>
+                  <div class="cheat-sheet-item">
+                    <div class="cheat-sheet-item__title">Alerts Firing</div>
+                    <div class="cheat-sheet-item__example"><code>sort_desc(sum(sum_over_time(ALERTS{alertstate="firing"}[24h]))
+                      by (alertname))</code></div>
+                    <div class="cheat-sheet-item__label">Sums up the alerts that have been firing over the last 24
+                      hours.
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-scrollbar>
         </div>
-      </left-menu>
-    </div>
+        <chart-box ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" ></chart-box>
+      </div>
+    </left-menu>
+  </div>
 </template>
 
 <script>
   import bus from "../../../../libs/bus";
   import promqlInput from "./promqlInput";
   import chart from "../overview/chart";
-  import axios from 'axios'
-  import chartDataFormat from "../../../charts/chartDataFormat";
+  import axios from 'axios';
+  import chartBox from "../../../page/dashboard/chartBox";
   export default {
     name: "explore",
-    components:{
-      'promql-input':promqlInput,
-      'chart':chart,
+    components: {
+      'promql-input': promqlInput,
+      'chart': chart,
+      'chart-box':chartBox,
     },
-    data(){
-      return{
-        promqlCount:1,
-        expressions:[''],
-        searchTime:[new Date().setHours(new Date().getHours() -1),new Date()],
-        filterTime:{},
-        visible:false,
+    data() {
+      return {
+        promqlCount: 1,
+        expressions: [''],
+        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
+        filterTime: {},
+        visible: false,
+        showIntroduce:true,
+        defaultChartVisible:true,
+        defaultTableVisible:true,
+        chartVisible: true,
+        tableVisible: true,
+        pageObj: {
+          pageNo: 1,
+          pageSize: 20,
+          total: 0
+        },
+        tableData: [],
+        tableLabels: [],
+        tableLoading: false,
+        intervalTimer: null,
         intervalList: [{
           value: 0,
           name: this.$t("dashboard.panel.refreshInterval.never"),
@@ -101,17 +179,19 @@
           name: this.$t("dashboard.panel.refreshInterval.tenMinutes"),
         }],
         interval: 0,
+        saveDisabled:true,
+        panelData:[],
         pickerOptions: {
           shortcuts: [
             {
-              text:  this.$t("dashboard.panel.recOne"),
+              text: this.$t("dashboard.panel.recOne"),
               onClick(picker) {
                 const end = new Date();
                 const start = new Date();
                 start.setHours(start.getHours() - 1);
                 picker.$emit('pick', [start, end]);
               }
-            },{
+            }, {
               text: this.$t("dashboard.panel.recFour"),
               onClick(picker) {
                 const end = new Date();
@@ -127,7 +207,7 @@
                 start.setDate(start.getDate() - 1);
                 picker.$emit('pick', [start, end]);
               }
-            },  {
+            }, {
               text: this.$t("dashboard.panel.yesterday"),
               onClick(picker) {
                 const start = new Date();
@@ -142,7 +222,7 @@
                 end.setSeconds(59);
                 picker.$emit('pick', [start, end]);
               }
-            },{
+            }, {
               text: this.$t("dashboard.panel.recSevenDay"),
               onClick(picker) {
                 const end = new Date();
@@ -168,7 +248,7 @@
                 start.setMinutes(0);
                 picker.$emit('pick', [start, end]);
               }
-            },{
+            }, {
               text: this.$t("dashboard.panel.lastMonth"),
               onClick(picker) {
                 const end = new Date();
@@ -184,92 +264,232 @@
         },
       }
     },
-    created(){
-      this.filterTime.startTime=bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
-      this.filterTime.endTime=bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
+    created() {
+      this.filterTime.startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
+      this.filterTime.endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
+      this.getPanelData();
     },
-    methods:{
-      queryChartData:function(){
-        setTimeout(()=>{
-          if(this.expressions.length>0){
-            let requestArr=[];
-            this.expressions.forEach((item,index)=>{
-              if(item != ''){
-                requestArr.push(axios.get('/prom/api/v1/query_range?query='+item+'&start='+this.filterTime.startTime+'&end='+this.filterTime.endTime+'&step=15'))
+    methods: {
+      pageNo(val) {
+        this.pageObj.pageNo = val;
+        this.tableData=this.filterShowData(this.storedTableData,this.pageObj)
+      },
+      pageSize(val) {
+        this.pageObj.pageSize = val;
+        this.tableData=this.filterShowData(this.storedTableData,this.pageObj)
+      },
+      filterShowData(source,pageObj){
+        return source.slice((pageObj.pageNo-1)*pageObj.pageSize,pageObj.pageNo*pageObj.pageSize)
+      },
+      queryChartData: function () {
+        this.$refs.exploreChart.startLoading();
+        setTimeout(() => {
+          if (this.expressions.length > 0) {
+            let requestArr = [];
+            this.expressions.forEach((item, index) => {
+              if (item != '') {
+                requestArr.push(axios.get('/prom/api/v1/query_range?query=' + item + '&start=' + this.filterTime.startTime + '&end=' + this.filterTime.endTime + '&step=15'))
               }
             })
-            axios.all(requestArr).then(res=>{
-              if(res.length>0){
-                let series=[];
-                let legend=[];
-                res.forEach((response,index)=>{
-                  if(response.data.status == 'success'){
-                    let data=response.data.data.result;
-                    data.forEach((result,index)=>{
-                      let seriesItem={
+            if(requestArr.length>0){
+              this.showIntroduce=false;
+              this.saveDisabled=false;
+            }
+            axios.all(requestArr).then(res => {
+              let series = [];
+              let legend = [];
+              if (res.length > 0) {
+                res.forEach((response, index) => {
+                  if (response.data.status == 'success') {
+                    let data = response.data.data.result;
+                    data.forEach((result, index) => {
+                      let seriesItem = {
                         name: '',
-                        symbol:'none',  //去掉点
-                        smooth:true,  //曲线变平滑
+                        symbol: 'none',  //去掉点
+                        smooth: true,  //曲线变平滑
                         data: [],
-                        type:'line',
+                        type: 'line',
                       }
-                      seriesItem.data=result.values.map((item)=>{
-                        return [item[0]*1000,item[1]];
+                      seriesItem.data = result.values.map((item) => {
+                        return [item[0] * 1000, item[1]];
                       })
-                      console.log(seriesItem);
-                      let metric=Object.assign({},result.metric);
-                      seriesItem.name+=metric.__name__+'{';
+                      // console.log(seriesItem);
+                      let metric = Object.assign({}, result.metric);
+                      seriesItem.name += metric.__name__ + '{';
                       delete metric.__name__;
-                      for (let key in metric){
-                        seriesItem.name+=key+"="+'"'+metric[key]+'",';
+                      for (let key in metric) {
+                        seriesItem.name += key + "=" + '"' + metric[key] + '",';
                       }
-                      seriesItem.name=seriesItem.name.substr(0,seriesItem.name.length-1);
-                      seriesItem.name+="}";
+                      seriesItem.name = seriesItem.name.substr(0, seriesItem.name.length - 1);
+                      seriesItem.name += "}";
                       series.push(seriesItem);
-                      legend.push({name:seriesItem.name,alias:null,isGray:false});
+                      legend.push({name: seriesItem.name, alias: null, isGray: false});
                     })
                   }
                 })
                 this.$refs.exploreChart.setLegend(legend);
                 this.$refs.exploreChart.setSeries(series)
               }
+              this.defaultChartVisible=true;
+              this.$refs.exploreChart.endLoading();
             })
           }
-        },200)
+        }, 200)
       },
-      queryTableData:function(){
-        setTimeout(()=>{
-          if(this.expressions.length>0){
-            let requestArr=[];
-            this.expressions.forEach((item,index)=>{
-              if(item != ''){
-                requestArr.push(axios.get('/prom/api/v1/query?query='+item))
-              }
-            })
-
-            axios.all(requestArr).then(res=>{
-              res.forEach((response,index)=>{
-                // console.log(response);
+      queryTableData: function () {
+        this.tableLoading = true,
+          setTimeout(() => {
+            if (this.expressions.length > 0) {
+              console.log(this.expressions)
+              let requestArr = [];
+              this.expressions.forEach((item, index) => {
+                if (item != '') {
+                  requestArr.push(axios.get('/prom/api/v1/query?query=' + item))
+                }
               })
-            })
-          }
-        },200)
+              if(requestArr.length>0){
+                this.showIntroduce=false;
+              }
+              axios.all(requestArr).then(res => {
+                let tData = [];
+                let tLabels = [];
+                if (res.length > 0) {
+                  this.tableData = [];
+                  this.tableLabels = [];
+                  res.forEach((response, index) => {
+                    if (response.data.status == 'success') {
+                      let data = response.data.data.result;
+                      if (data) {
+                        data.forEach((result, i) => {
+                          let metrics = Object.assign({}, result.metric);
+                          this.$set(metrics, 'value#' + index, result.value[1]);
+                          for (let key in metrics) {
+                            let label = {
+                              label: key,
+                              prop: key
+                            }
+                            let temp = tLabels.find((item, index) => {
+                              return item.prop == label.prop
+                            });
+                            if (!temp) {
+                              tLabels.push(label)
+                            }
+                          }
+                          tData.push(metrics);
+                        })
+                      }
+                    }
+                    tLabels.sort((a, b) => {
+                      return a.prop.charCodeAt(0) - b.prop.charCodeAt(0);
+                    })
+                  })
+                  this.storedTableData=Object.assign([],tData);
+                  this.pageObj.total=this.storedTableData.length;
+                  this.tableData = this.filterShowData(this.storedTableData,this.pageObj);
+                  this.tableLabels = tLabels;
+                }
+                this.defaultTableVisible=true;
+                this.tableLoading = false;
+              })
+            }
+          }, 200)
       },
-      expressionChange:function(){
-        this.queryTableData();
-        this.queryChartData()
+      expressionChange: function () {
+        if (this.expressions && this.expressions.length >= 1) {
+          this.queryTableData();
+          this.queryChartData()
+        }
       },
-      addExpression:function(index){
-        this.expressions.splice(index+1,0,'');
+      addExpression: function (index) {
+        this.expressions.splice(index + 1, 0, '');
         this.promqlCount++;
       },
-      removeExpression:function(index){
-        this.expressions.splice(index,1);
-        this.promqlCount--;
+      removeExpression: function (index) {
+        if (this.promqlCount > 1) {
+          this.expressions.splice(index, 1);
+          this.promqlCount--;
+        }
       },
       dateChange(time) {
-        this.filterTime.startTime=bus.timeFormate(time[0], 'yyyy-MM-dd hh:mm:ss');
-        this.filterTime.endTime=bus.timeFormate(time[1], 'yyyy-MM-dd hh:mm:ss');
+        this.filterTime.startTime = bus.timeFormate(time[0], 'yyyy-MM-dd hh:mm:ss');
+        this.filterTime.endTime = bus.timeFormate(time[1], 'yyyy-MM-dd hh:mm:ss');
+        this.expressionChange();
+      },
+      //定期刷新
+      selectInterval(val) {
+        this.visible = false;
+        clearInterval(this.intervalTimer);
+        if (val) {
+          this.interval = val;
+          const start = new Date(this.searchTime[1]);
+          const now = new Date();
+          const interval = Math.floor((now.getTime() - start.getTime()) / 1000); //计算当前结束时间到现在的间隔（秒）
+          if (interval >= 60) { //如果结束时间到现在超过1分钟，则
+            this.getIntervalData(interval);
+          }
+          this.intervalTimer = setInterval(() => {
+            this.getIntervalData(this.interval);
+          }, val * 1000);
+        }
+      },
+      getIntervalData(interval) { //interval:结束时间到现在的秒数
+        const start = new Date(this.searchTime[0]);
+        const end = new Date(this.searchTime[1]);
+        start.setSeconds(start.getSeconds() + interval);
+        end.setSeconds(end.getSeconds() + interval);
+        const startTime = bus.timeFormate(start, 'yyyy-MM-dd hh:mm');
+        const endTime = bus.timeFormate(end, 'yyyy-MM-dd hh:mm');
+        this.searchTime = [startTime, endTime];
+        this.filterTime.startTime = startTime;
+        this.filterTime.endTime = endTime;
+        //刷新数据
+        this.expressionChange();
+      },
+      changeChartVisible:function(){
+        this.chartVisible=!this.chartVisible;
+      },
+      changeTableVisible:function(){
+        this.tableVisible=!this.tableVisible;
+      },
+      saveChart:function(){
+        this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
+        this.$refs.addChartModal.show(true);
+        let metricInfo = {};
+        metricInfo.elements = [];
+        // {"metric":"ALERTS_FOR_STATE","elements":[{"expression":"ALERTS_FOR_STATE{project='kafka',module='node_exporter'}","type":"normal"}]}
+        for(let i = 0; i < this.expressions.length; i++) {
+          if(this.expressions[i] != ''){
+            let type = 'expert';
+            metricInfo.metric=this.expressions[i];
+            metricInfo.elements.push({expression: this.expressions[i], type: type});
+          }
+        }
+        console.log(metricInfo)
+        this.$refs.addChartModal.createData(-1, metricInfo);
+      },
+      createSuccess(type, response, param, panel) { //添加chart成功
+        this.$confirm(this.$t("dashboard.metric.goPanelTip"),this.$t("tip.saveSuccess"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'success'
+        }).then(() => {
+          bus.$emit("menu-change", 'panel');
+          this.$store.state.showPanel.id = panel.id;
+          this.$store.state.showPanel.name = panel.name;
+          this.$router.push({
+            path: "/panel",
+            query: {
+              t: +new Date()
+            }
+          });
+        });
+      },
+      getPanelData() { //获取panel数据
+        this.$get('panel?pageNo=1&pageSize=-1').then(response => {
+          if (response.code === 200) {
+            this.panelData = response.data.list;
+          }
+        });
       },
       jumpTo(data, id) {
         bus.$emit("menu-change", data);
@@ -281,16 +501,106 @@
         });
       },
     },
-    watch:{
-      promqlCount:function(n,o){
+    watch: {
+      promqlCount: function (n, o) {
         this.expressionChange();
+      },
+      expressions:{
+        immediate:true,
+        handler:function(n,o){
+          if(this.promqlCount == 1 && (!n[0]|| n[0] =='')){
+            this.showIntroduce=true
+          }else if(this.promqlCount>1){
+            let temp=n.find((item,index)=>{item != ''});
+            if(typeof temp != undefined){
+              this.showIntroduce=false;
+            }else{
+              this.showIntroduce=true;
+            }
+          }else{
+            this.showIntroduce=false;
+          }
+        }
       }
     }
   }
 </script>
 
-<style scoped>
-.explore{
-  height: 100%;
-}
+<style scoped lang="scss">
+  .explore {
+    height: 100%;
+  }
+
+  .explore .chart-room {
+    width: 100%;
+    height: 500px
+  }
+
+  .explore .chart-view, .table-view{
+    padding: 10px;
+    border: 1px solid lightgrey;
+    box-sizing: inherit;
+    margin-bottom: 5px;
+    transition: height 1s;
+  }
+  .shrink-view{
+    height: 30px;
+    .view-title i{
+      transform: rotate(180deg);
+    }
+    .chart-room,.table-room{
+      height: 0px;
+      visibility: hidden;
+    }
+
+  }
+  .explore .view-title {
+    font-weight: 500;
+    margin-right: 8px;
+    font-size: 14px;
+    box-shadow: none;
+  }
+  .introduce-view .info-room{
+    padding: 24px;
+    background-color: #e9edf2;
+    border-top: 3px solid #3274d9;
+    margin-bottom: 16px;
+    margin-right: 4px;
+    -webkit-box-shadow: -1px -1px 0 0 hsla(0,0%,100%,.1), 1px 1px 0 0 rgba(0,0,0,.1);
+    box-shadow: -1px -1px 0 0 hsla(0,0%,100%,.1), 1px 1px 0 0 rgba(0,0,0,.1);
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+  .info-room .cheat-sheet-item__title {
+    font-size: 21px;
+  }
+  .info-room .cheat-sheet-item__label{
+    font-size: 13px;
+  }
+  .info-room code{
+    font-family: Menlo,Monaco,Consolas,Courier New,monospace;
+    font-size: 11px;
+    background-color: #e9edf2;
+    color: #52545c;
+    border: 1px solid #c7d0d9;
+    border-radius: 4px;
+  }
+  .popover_ul li {
+    padding: 10px 3px;
+    cursor: pointer;
+  }
+
+  .popover_ul li:hover {
+    background: $dropdown-hover-background-color !important;
+    color: $global-text-color-active !important;
+  }
+</style>
+<style>
+  .explore-table tr td .cell {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 </style>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index cc44f07d2..16db86ef1 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -5,21 +5,20 @@
           <div class="metricBtn">
             <el-dropdown class="metric-selector">
               <el-dropdown-menu style="display: none"></el-dropdown-menu>
-              <el-button class="metric-btn" @click="toggleDropdown">Metric &nbsp;<i class="el-icon-arrow-down"></i></el-button>
-              <el-cascader-panel v-show="dropDownVisible" v-model="cascaderValue" slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions"  @change="metricChange"></el-cascader-panel>
+              <el-button class="metric-btn nz-btn nz-btn-size-normal nz-btn-style-light" @click="toggleDropdown">Metric &nbsp;<i class="el-icon-arrow-down"></i></el-button>
+              <el-cascader-panel v-show="dropDownVisible"  slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions"  @change="metricChange"></el-cascader-panel>
             </el-dropdown>
 
           </div>
           <div class="inputBox">
-            <el-autocomplete :fetch-suggestions="filterInput" :trigger-on-focus="false" v-model="expressionList[index]" @blur="expressionChange" style="width: 100%"></el-autocomplete>
+            <el-autocomplete :placeholder="$t('dashboard.metricPreview.inputTip')" :fetch-suggestions="filterInput" clearable @clear="clearExpression" :trigger-on-focus="false" v-model="expressionList[index]" @blur="expressionChange" style="width: 100%;height:36px"></el-autocomplete>
           </div>
         </div>
       </div>
-      <div>
-        <div class="query-options">
-          <div class="option" @click="clearExpression"><i class="el-icon-close"></i></div>
-          <div class="option" @click="addExpression"><i class="el-icon-plus"></i></div>
-          <div class="option" @click="removeExpression"><i class="el-icon-minus"></i></div>
+      <div style="margin-left: 5px">
+        <div class="query-options nz-btn-group nz-btn-group-size-normal nz-btn-group-light">
+          <div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="addExpression"><i class="el-icon-plus"></i></div>
+          <div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="removeExpression"><i class="el-icon-minus"></i></div>
         </div>
       </div>
     </div>
@@ -37,7 +36,6 @@
           dropDownVisible:false,
           metricStore:[],
           metricOptions:[],
-          cascaderValue:'',
         }
       },
       created() {
@@ -46,7 +44,7 @@
       },
       methods:{
         clearExpression:function(){
-          this.expressionList[this.index]='';
+          this.expressionChange();
         },
         addExpression:function(){
           this.$emit('addExpression',this.index);
@@ -133,7 +131,7 @@
 <style scoped>
   .promqlInput{
     position: relative;
-    height: 40px;
+    height: 36px;
     width: 100%;
     display: flex;
     margin-bottom: 10px;
@@ -146,17 +144,17 @@
     justify-content: flex-start;
   }
   .promqlInput .query-options{
-    display: flex;
-    justify-content: space-around;
-    width: 126px;
+    /*display: flex;*/
+    /*justify-content: flex-start;*/
+    /*width: 84px;*/
   }
   .query-options .option{
-    border-right: 1px solid #dde4ed;
-    border-radius: 3px;
-    background-color: #dde4ed;
-    width: 40px;
-    height: 40px;
-    line-height: 40px;
+    /*border-right: 1px solid #dde4ed;*/
+    /*border-radius: 3px;*/
+    /*background-color: #dde4ed;*/
+    width: 34px;
+    height: 34px !important;
+    line-height: 34px;
     text-align: center;
   }
   .query-options .option:focus,.query-options .option:hover{
@@ -170,7 +168,9 @@
     width: 100%;
   }
   .metric-btn{
-    background-color: #dde4ed;
+    height: 36px !important;
+    width: 105px;
+    margin-left: 1px;
   }
   .metric-btn:hover ,.metric-btn:focus {
     background-color: #CCD7E4;
@@ -188,5 +188,7 @@
     position:relative;
     z-index: 2100;
   }
-
+  .inputBox .el-input__inner{
+    height: 36px;
+  }
 </style>
diff --git a/nezha-fronted/src/components/page/dashboard/metricPreview.vue b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
index 511838981..98b38f1a7 100644
--- a/nezha-fronted/src/components/page/dashboard/metricPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
@@ -10,6 +10,7 @@
                 <div class="sidebar-info-item " @click="jumpTo('overview')">{{$t('dashboard.overview.title')}}</div>
                 <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
                 <div class="sidebar-info-item sidebar-info-item-active">{{$t('dashboard.metricPreview.title')}}</div>
+<!--                <div class="sidebar-info-item "@click="jumpTo('explore')">{{$t('dashboard.metricPreview.title')}}</div>-->
             </div>
         </div>
         <div slot="content-right" class="slot-content">
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
index 53754d9e8..30b176dc5 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-room">
+  <div class="chart-room" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
     <loading  ref="loading"></loading>
 
     <div class="chart-header">{{chartTitle}}</div>
@@ -31,6 +31,7 @@
     },
     props:{
       chartTitle:{type:String},
+      showToolbox:{type:Boolean,default:true},
       chartType:{type:String,default:'line'},
       tooltipFormatter:Function,
       yAxisFormatter:Function,
@@ -45,7 +46,10 @@
       }
     },
     created() {
-
+      this.option=chartConfig.getOption(this.chartType);
+      if(this.showToolbox == false){
+        this.option.grid.top=10;
+      }
     },
     methods:{
       modifyOption:function(target,name,obj){
@@ -105,7 +109,7 @@
       },
       resize:function(){
         if(this.chart){
-          let height=this.$el.clientHeight ;
+          let height=this.$el.clientHeight;
           let width=this.$el.clientWidth;
           if(this.chartTitle){
             height = height - 20;
@@ -116,6 +120,24 @@
           this.chart.resize({width:width,height:height});
         }
       },
+      mouseEnterChart(){
+        if (this.chart&&this.showToolbox) {
+          this.chart.setOption({
+            toolbox: {
+              show:true,
+            }
+          })
+        }
+      },
+      mouseLeaveChart(){
+        if (this.chart) {
+          this.chart.setOption({
+            toolbox: {
+              show:false,
+            }
+          })
+        }
+      },
       getBgColor:function(index){
         let color=chartConfig.getBgColorList()[index];
         return color;
@@ -246,7 +268,7 @@
 
 <style scoped>
   .chart-room{
-    width: 95%;
+    width: 100%;
     height: 100%;
     position: relative;
   }
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
index 74ba15a41..08dfbb15b 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
@@ -1,7 +1,7 @@
 <script>
     import chartDataFormat from "../../../charts/chartDataFormat";
     import bus from '../../../../libs/bus';
-    let bgColorList=['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
+    let bgColorList=['#b3424a','#7bbfea', '#f05b72', '#596032', '#bd6758',
       '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
       '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
       '#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
@@ -17,6 +17,23 @@
       legend:{
         show:false,
       },
+      toolbox:{
+        show:false,
+        top:'0',
+        showTitle:false,
+        tooltip:{
+          show:false,
+        },
+        feature:{
+          dataZoom:{
+            yAxisIndex:false
+          },
+          magicType:{
+            type:['stack']
+          },
+          // restore: {},
+        }
+      },
       tooltip: {
         trigger: 'axis',
         confine:false,
@@ -25,11 +42,11 @@
         // position:null,
       },
       grid: {
-        top: 13,
+        top: 30,
         left: 0,
         right: 30,
         containLabel: true,
-        bottom:35,//156
+        bottom:8,//156
       },
       dataZoom: [{
         type: 'slider',
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview.vue b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
index ed4799d53..6ee6e8870 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
@@ -7,7 +7,6 @@
         <div class="sidebar-info">
           <div class="sidebar-info-item sidebar-info-item-active" >{{$t('dashboard.overview.title')}}</div>
           <div class="sidebar-info-item sidebar-info-top " @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
-          <div class="sidebar-info-item" @click="jumpTo('metricPreview')">{{$t('dashboard.metricPreview.title')}}</div>
           <div class="sidebar-info-item" @click="jumpTo('explore')">{{$t('dashboard.metricPreview.title')}}</div>
         </div>
       </div>
@@ -79,7 +78,7 @@
                   <table-box :pop-data="topNStatData" ref="topNTab" style="height: 90%;"></table-box>
                 </div>
                 <div class="content-col-box  "style="flex: 8;" id="alertTrendBox" >
-                  <chart-box  ref="chartbox" :chart-title="$t('dashboard.overview.alert.chart.chartTitle')"></chart-box>
+                  <chart-box  ref="chartbox" :chart-title="$t('dashboard.overview.alert.chart.chartTitle')" :show-toolbox="false"></chart-box>
                 </div>
                 <div class="content-col-box  "style="flex: 2;" >
                   <table-box :pop-data="alertRuleStatData" ref="alertRuleTab"></table-box>
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index c2bd99cd3..11e0c5829 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -6,7 +6,7 @@
       <div class="sidebar-info">
         <div class="sidebar-info-item " @click="jumpTo('overview')">{{$t('dashboard.overview.title')}}</div>
         <div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('dashboard.panel.title')}}</div>
-        <div class="sidebar-info-item" @click="jumpTo('metricPreview')">{{$t('dashboard.metricPreview.title')}}</div>
+        <div class="sidebar-info-item" @click="jumpTo('explore')">{{$t('dashboard.metricPreview.title')}}</div>
       </div>
     </div>
     <div slot="content-right" class="slot-content">
diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js
index 3c60f39c0..462e3a776 100644
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -40,6 +40,10 @@ export default new Router({
           path: '/metricPreview',
           component: resolve => require(['../components/page/dashboard/metricPreview.vue'], resolve),
         },
+        {
+          path: '/explore',
+          component: resolve => require(['../components/page/dashboard/explore/explore.vue'], resolve),
+        },
         {
           path: 'overview',
           component: resolve => require(['../components/page/dashboard/overview/overview.vue'],resolve)