perf:panel页面后台报错问题修复 & chart组件调整

nezha-fronted/src/components/charts/chart-table.vue

@@ -20,6 +20,7 @@
         <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
 
           <el-dropdown trigger="click" v-show="firstShow"   class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
+            <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
               <span class="chart-title-text">{{data.title}}</span>
               <span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right"  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>

nezha-fronted/src/components/charts/chart-url.vue

@@ -13,6 +13,7 @@
         <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
 
           <el-dropdown trigger="click" v-show="firstShow"   class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
+            <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
               <span class="chart-title-text">{{data.title}}</span>
               <span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right"  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -26,6 +26,7 @@
     <div class="clearfix chartTitle" :id="'chartTitle'+chartIndex" >
 
       <el-dropdown trigger="click" v-show="firstShow"   class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
+        <el-dropdown-menu style="display: none"></el-dropdown-menu>
           <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
             <span class="chart-title-text">{{data.title}}</span>
             <span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right"  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>

nezha-fronted/src/components/common/js/divResize.js

@@ -0,0 +1,106 @@
+var EleResize = {
+  _handleResize: function (e) {
+    var ele = e.target || e.srcElement;
+    var trigger = ele.__resizeTrigger__;
+    if (trigger) {
+      var handlers = trigger.__z_resizeListeners;
+      if (handlers) {
+        var size = handlers.length;
+        for (var i = 0; i < size; i++) {
+          var h = handlers[i];
+          var handler = h.handler;
+          var context = h.context;
+          handler.apply(context, [e]);
+        }
+      }
+    }
+  },
+  _removeHandler: function (ele, handler, context) {
+    var handlers = ele.__z_resizeListeners;
+    if (handlers) {
+      var size = handlers.length;
+      for (var i = 0; i < size; i++) {
+        var h = handlers[i];
+        if (h.handler === handler && h.context === context) {
+          handlers.splice(i, 1);
+          return;
+        }
+      }
+    }
+  },
+  _createResizeTrigger: function (ele) {
+    var obj = document.createElement('object');
+    obj.setAttribute('style',
+      'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;');
+    obj.onload = EleResize._handleObjectLoad;
+    obj.type = 'text/html';
+    ele.appendChild(obj);
+    obj.data = 'about:blank';
+    return obj;
+  },
+  _handleObjectLoad: function (evt) {
+    this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
+    this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize);
+  }
+};
+if (document.attachEvent) {//ie9-10
+  EleResize.on = function (ele, handler, context) {
+    var handlers = ele.__z_resizeListeners;
+    if (!handlers) {
+      handlers = [];
+      ele.__z_resizeListeners = handlers;
+      ele.__resizeTrigger__ = ele;
+      ele.attachEvent('onresize', EleResize._handleResize);
+    }
+    handlers.push({
+      handler: handler,
+      context: context
+    });
+  };
+  EleResize.off = function (ele, handler, context) {
+    var handlers = ele.__z_resizeListeners;
+    if (handlers) {
+      EleResize._removeHandler(ele, handler, context);
+      if (handlers.length === 0) {
+        ele.detachEvent('onresize', EleResize._handleResize);
+        delete  ele.__z_resizeListeners;
+      }
+    }
+  }
+} else {
+  EleResize.on = function (ele, handler, context) {
+    var handlers = ele.__z_resizeListeners;
+    if (!handlers) {
+      handlers = [];
+      ele.__z_resizeListeners = handlers;
+
+      if (getComputedStyle(ele, null).position === 'static') {
+        ele.style.position = 'relative';
+      }
+      var obj = EleResize._createResizeTrigger(ele);
+      ele.__resizeTrigger__ = obj;
+      obj.__resizeElement__ = ele;
+    }
+    handlers.push({
+      handler: handler,
+      context: context
+    });
+  };
+  EleResize.off = function (ele, handler, context) {
+    var handlers = ele.__z_resizeListeners;
+    if (handlers) {
+      EleResize._removeHandler(ele, handler, context);
+      if (handlers.length === 0) {
+        var trigger = ele.__resizeTrigger__;
+        if (trigger) {
+          trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize);
+          ele.removeChild(trigger);
+          delete ele.__resizeTrigger__;
+        }
+        delete  ele.__z_resizeListeners;
+      }
+    }
+  }
+}
+
+export default EleResize;

nezha-fronted/src/components/common/login.vue

@@ -58,7 +58,7 @@ export default {
             localStorage.setItem('nz-sys-timezone',res.data.timezone);
             localStorage.setItem('nz-sys-default-cabinet-usize',res.data.defaultCabinetUsize);
             localStorage.setItem('nz-sys-max-terminal-num',res.data.maxTerminalNum);
-            localStorage.setItem('nz-sys-asset-ping-switch',res.data.assetPingSwith);
+            localStorage.setItem('nz-sys-asset-ping-switch',res.data.assetPingSwitch);
             this.$i18n.locale = this.lang;
             bus.$emit('login');
             this.$router.push({

nezha-fronted/src/components/page/dashboard/explore/explore.vue

@@ -0,0 +1,296 @@
+<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>
+        <div slot="content-right" class="slot-content">
+          <div class="main-list main-and-sub-transition" >
+            <!-- 顶部工具栏 -->
+            <div class="top-tools" >
+              <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()">
+                  <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>
+              </div>
+              <el-date-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')"
+                              style="margin-right: 20px"
+                              align="right">
+              </el-date-picker>
+            </div>
+            <div class="expression-room">
+              <promql-input
+                v-for="index of promqlCount"
+                :key="expressions[index]"
+                :expression-list="expressions"
+                :index="index"
+                @change="expressionChange"
+                @addExpression="addExpression"
+                @removeExpression="removeExpression"
+              ></promql-input>
+            </div>
+            <div class="chart-room" style="width: 100%;height: 500px">
+              <chart ref="exploreChart"></chart>
+            </div>
+            <div class="table-room">table</div>
+          </div>
+        </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";
+  export default {
+    name: "explore",
+    components:{
+      'promql-input':promqlInput,
+      'chart':chart,
+    },
+    data(){
+      return{
+        promqlCount:1,
+        expressions:[''],
+        searchTime:[new Date().setHours(new Date().getHours() -1),new Date()],
+        filterTime:{},
+        visible:false,
+        intervalList: [{
+          value: 0,
+          name: this.$t("dashboard.panel.refreshInterval.never"),
+        }, {
+          value: 60,
+          name: this.$t("dashboard.panel.refreshInterval.oneMinute"),
+        }, {
+          value: 180,
+          name: this.$t("dashboard.panel.refreshInterval.threeMinutes"),
+        }, {
+          value: 300,
+          name: this.$t("dashboard.panel.refreshInterval.fiveMinutes"),
+        }, {
+          value: 600,
+          name: this.$t("dashboard.panel.refreshInterval.tenMinutes"),
+        }],
+        interval: 0,
+        pickerOptions: {
+          shortcuts: [
+            {
+              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();
+                const start = new Date();
+                start.setHours(start.getHours() - 4);
+                picker.$emit('pick', [start, end]);
+              }
+            }, {
+              text: this.$t("dashboard.panel.recOneDay"),
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setDate(start.getDate() - 1);
+                picker.$emit('pick', [start, end]);
+              }
+            },  {
+              text: this.$t("dashboard.panel.yesterday"),
+              onClick(picker) {
+                const start = new Date();
+                const end = new Date();
+                start.setDate(start.getDate() - 1);
+                start.setHours(0);
+                start.setMinutes(0);
+                start.setSeconds(0);
+                end.setDate(end.getDate() - 1);
+                end.setHours(23);
+                end.setMinutes(59);
+                end.setSeconds(59);
+                picker.$emit('pick', [start, end]);
+              }
+            },{
+              text: this.$t("dashboard.panel.recSevenDay"),
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setDate(start.getDate() - 7);
+                picker.$emit('pick', [start, end]);
+              }
+            }, {
+              text: this.$t("dashboard.panel.recOneMonth"),
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setDate(start.getDate() - 30);
+                picker.$emit('pick', [start, end]);
+              }
+            }, {
+              text: this.$t("dashboard.panel.curMonth"),
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setDate(1);
+                start.setHours(0);
+                start.setMinutes(0);
+                picker.$emit('pick', [start, end]);
+              }
+            },{
+              text: this.$t("dashboard.panel.lastMonth"),
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setDate(1);
+                start.setMonth(start.getMonth() - 1);
+                end.setDate(0);
+                start.setStart();
+                end.setEnd();
+                picker.$emit('pick', [start, end]);
+              }
+            }],
+        },
+      }
+    },
+    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');
+    },
+    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'))
+              }
+            })
+            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={
+                        name: '',
+                        symbol:'none',  //去掉点
+                        smooth:true,  //曲线变平滑
+                        data: [],
+                        type:'line',
+                      }
+                      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__+'{';
+                      delete metric.__name__;
+                      for (let key in metric){
+                        seriesItem.name+=key+"="+'"'+metric[key]+'",';
+                      }
+                      seriesItem.name=seriesItem.name.substr(0,seriesItem.name.length-1);
+                      seriesItem.name+="}";
+                      series.push(seriesItem);
+                      legend.push({name:seriesItem.name,alias:null,isGray:false});
+                    })
+                  }
+                })
+                this.$refs.exploreChart.setLegend(legend);
+                this.$refs.exploreChart.setSeries(series)
+              }
+            })
+          }
+        },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);
+              })
+            })
+          }
+        },200)
+      },
+      expressionChange:function(){
+        this.queryTableData();
+        this.queryChartData()
+      },
+      addExpression:function(index){
+        this.expressions.splice(index+1,0,'');
+        this.promqlCount++;
+      },
+      removeExpression:function(index){
+        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');
+      },
+      jumpTo(data, id) {
+        bus.$emit("menu-change", data);
+        this.$router.push({
+          path: "/" + data,
+          query: {
+            t: +new Date()
+          }
+        });
+      },
+    },
+    watch:{
+      promqlCount:function(n,o){
+        this.expressionChange();
+      }
+    }
+  }
+</script>
+
+<style scoped>
+.explore{
+  height: 100%;
+}
+</style>

nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue

@@ -0,0 +1,192 @@
+<template>
+    <div class="promqlInput">
+      <div class="query-row">
+        <div class="query-input">
+          <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-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>
+          </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>
+      </div>
+    </div>
+</template>
+
+<script>
+    export default {
+      name: "promqlInput",
+      props:{
+        index:{type:Number},
+        expressionList:{}
+      },
+      data(){
+        return {
+          dropDownVisible:false,
+          metricStore:[],
+          metricOptions:[],
+          cascaderValue:'',
+        }
+      },
+      created() {
+        this.queryMetrics();
+
+      },
+      methods:{
+        clearExpression:function(){
+          this.expressionList[this.index]='';
+        },
+        addExpression:function(){
+          this.$emit('addExpression',this.index);
+        },
+        removeExpression:function(){
+          this.$emit('removeExpression',this.index);
+        },
+        toggleDropdown:function(){
+          this.dropDownVisible=!this.dropDownVisible;
+          if(this.dropDownVisible == true){
+            let $temp=this;
+            document.addEventListener('click',function(e){
+              e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
+              $temp.dropDownVisible=false;
+            },false)
+            this.$el.addEventListener('click',function(e){
+              e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
+            },false)
+          }
+        },
+        queryMetrics:function(){
+          this.metricOptions=[];
+          this.$get('prom/api/v1/label/__name__/values').then(response=>{
+            if(response.status == 'success'){
+              let metrics=response.data.sort();
+              let metricMap=new Map();
+              metrics.forEach((item)=>{
+                let key='';
+                if(/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)){
+                  key=item.split('_')[0];
+                }else if(/^_\w*/.test(item)){
+                  key='      ';
+                }else{
+                  key=item;
+                }
+                if(metricMap.get(key)){
+                  let values=metricMap.get(key);
+                  values.push({label:item,value:item});
+                }else{
+                  let values=[{label:item,value:item}];
+                  metricMap.set(key,values);
+                }
+                this.metricStore.push({label:item,value:item})
+              })
+              for(let key of metricMap.keys()){
+                let option={
+                  label:key,
+                  value:key,
+                }
+                if(metricMap.get(key) && metricMap.get(key).length>1){
+                  option.children=metricMap.get(key);
+                }
+                this.metricOptions.push(option);
+              }
+            }
+          })
+        },
+        filterInput:function(queryString, cb){
+          let metrics=Object.assign([],this.metricStore);
+          let result=queryString?metrics.filter((item)=>{
+            return item.value.toLowerCase().indexOf(queryString.toLowerCase()) != -1;
+          }):metrics;
+          cb(result)
+        },
+        metricChange:function(value){
+          this.expressionList[this.index]=value;
+          this.dropDownVisible=false;
+          this.$emit('change')
+        },
+        expressionChange:function(){
+          this.$emit('change')
+        }
+      },
+      watch:{
+        dropDownVisible:function(n,o){
+          if(this.$refs.metricSelector){
+            this.$refs.metricSelector.dropDownVisible=n;
+          }
+        },
+      }
+    }
+</script>
+
+<style scoped>
+  .promqlInput{
+    position: relative;
+    height: 40px;
+    width: 100%;
+    display: flex;
+    margin-bottom: 10px;
+  }
+  .promqlInput .query-row{
+    width: 100%;
+  }
+  .query-row .query-input{
+    display: flex;
+    justify-content: flex-start;
+  }
+  .promqlInput .query-options{
+    display: flex;
+    justify-content: space-around;
+    width: 126px;
+  }
+  .query-options .option{
+    border-right: 1px solid #dde4ed;
+    border-radius: 3px;
+    background-color: #dde4ed;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+  }
+  .query-options .option:focus,.query-options .option:hover{
+    background-color: #CCD7E4;
+  }
+  .query-input .metricBtn{
+    width: 100px;
+    margin-right: 10px;
+  }
+  .query-input .inputBox{
+    width: 100%;
+  }
+  .metric-btn{
+    background-color: #dde4ed;
+  }
+  .metric-btn:hover ,.metric-btn:focus {
+    background-color: #CCD7E4;
+    color:#606266;
+  }
+  .metric-selector .el-cascader-panel{
+    height: 300px;
+    position: absolute;
+    z-index: 2100;
+    background-color: #FFF;
+  }
+</style>
+<style>
+  .metric-selector-pop{
+    position:relative;
+    z-index: 2100;
+  }
+
+</style>

nezha-fronted/src/components/page/dashboard/overview/chart.vue

@@ -4,8 +4,14 @@
 
     <div class="chart-header">{{chartTitle}}</div>
 
-    <div class="chart-body" ref="chartBody" :id="chartId" style="height: 95%"></div>
+    <div class="chart-body" ref="chartBody" :id="chartId" ></div>
 
+    <div class="legend-container" id="legendArea" ref="legendArea" v-show="legend.length>0" v-scrollBar:legend>
+      <div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':item.isGray}" :key="'legend_' + item.name+'_'+index">
+        <span class="legend-shape" :style="{background:(item.isGray?'#D3D3D3':getBgColor(index))}"></span>{{item.alias?item.alias:item.name}}
+        <br/>
+      </div>
+    </div>
 
   </div>
 </template>
@@ -16,6 +22,8 @@
   import loading from "../../../common/loading";
   import uuidv1 from "uuid/v1";
   import chartConfig from './chartConfig'
+  import bus from "../../../../libs/bus";
+  import EleResize from "../../../common/js/divResize";
   export default {
     name: "chart",
     components:{
@@ -24,6 +32,8 @@
     props:{
       chartTitle:{type:String},
       chartType:{type:String,default:'line'},
+      tooltipFormatter:Function,
+      yAxisFormatter:Function,
       map:{}
     },
     data(){
@@ -31,19 +41,23 @@
         chart:null,
         option:{},
         chartId:new uuidv1()+'-'+new Date().getTime(),
+        legend:[],
       }
     },
     created() {
 
     },
     methods:{
-
       modifyOption:function(target,name,obj){
         if(this.option){
           this.option=chartConfig.getOption(this.chartType);
         }
         this.$set(this.option[target],name,obj)
       },
+      setLegend:function(legend){
+        this.legend=legend;
+        this.resize();
+      },
       setSeries:function(series){
         if(!this.chart){
           this.chart=echarts.init(document.getElementById(this.chartId));
@@ -61,21 +75,153 @@
         if(this.option){
           this.option=chartConfig.getOption(this.chartType);
         }
+
+        this.modifyOption('tooltip','position',this.defaultTooltipPosition)
+
+        if (this.tooltipFormatter) {
+          this.modifyOption('tooltip', 'formatter', this.tooltipFormatter)
+        } else {
+          this.modifyOption('tooltip', 'formatter', this.defaultTooltipFormatter)
+        }
+
+        if(this.chartType == 'line'){
+          if(this.yAxisFormatter){
+            this.modifyOption('yAxis','formatter',this.yAxisFormatter)
+          }else{
+            this.modifyOption('yAxis','formatter',this.defaultYAxisFormatter)
+          }
+        }
+
         this.$set(this.option,'series',this.series);
-        /*if(this.chartType == 'line'){
-          this.$set(this.option.tooltip,'formatter',this.tooltipFormatter);
-          this.$set(this.option.tooltip,'position',this.tooltipPosition);
-          this.$set(this.option.yAxis,'formatter',this.yAxisFormatter);
-        }*/
 
         this.chart.clear();
         this.chart.setOption(this.option)
+        this.resize();
       },
       resizeChart:function(width,height){
         if(this.chart){
           this.chart.resize({width:width,height:height});
         }
       },
+      resize:function(){
+        if(this.chart){
+          let height=this.$el.clientHeight ;
+          let width=this.$el.clientWidth;
+          if(this.chartTitle){
+            height = height - 20;
+          }
+          if(this.legend && this.legend.length>0){
+            height = height - 80;
+          }
+          this.chart.resize({width:width,height:height});
+        }
+      },
+      getBgColor:function(index){
+        let color=chartConfig.getBgColorList()[index];
+        return color;
+      },
+      clickLegend(legendName,index){
+        let curIsGrey=this.legend[index].isGray;
+        if(this.chart){
+          this.legend.forEach((item,i)=>{
+            let isGrey = item.isGray;
+            if(index != i){ //不是当前点击的
+              if(!curIsGrey && !isGrey){
+                this.chart.dispatchAction({
+                  type: 'legendUnSelect',
+                  name: item.name
+                });
+                item.isGray=true;
+              }else if(!curIsGrey && isGrey){
+                this.chart.dispatchAction({
+                  type: 'legendSelect',
+                  name: item.name
+                });
+                item.isGray=false;
+              }else{
+                this.chart.dispatchAction({
+                  type: 'legendUnSelect',
+                  name: item.name
+                });
+                item.isGray=true
+              }
+            }else {//当前点击的
+              this.chart.dispatchAction({
+                type: 'legendSelect',
+                name: item.name
+              });
+              if(item.isGray === true){
+                item.isGray = false;
+              }
+            }
+          });
+        }
+      },
+      defaultTooltipPosition:function(point,params,dom,rect,size){
+        dom.style.transform = "translateZ(0)";
+        //提示框位置
+        var x=0;
+        var y=0;
+        //当前鼠标位置
+        var pointX = point[0];
+        var pointY = point[1];
+        //外层div大小
+        var viewWidth = size.viewSize[0];
+        var viewHeight = size.viewSize[1];
+        //提示框大小
+        var boxWidth = size.contentSize[0];
+        var boxHeight = size.contentSize[1];
+        let chartDom = document.getElementById(this.chartId);
+        if(chartDom){
+          let parTop = chartDom.offsetTop;
+          let parLeft = chartDom.offsetLeft;
+
+          let parent = chartDom.parentElement;
+          let parClientHeight = parent.clientHeight;//可视高度
+          let parClientWidth = parent.clientWidth;//可视宽度
+          let parScrollTop = parent.scrollTop;
+          if((parClientWidth-pointX-parLeft-20)>=boxWidth){//说明鼠标在左边放不下提示框
+            x=pointX+10;
+          }else{
+            x = pointX - boxWidth;
+          }
+          if((parClientHeight-pointY-(parTop-parScrollTop)-20)>=boxHeight){//说明鼠标上面放不下提示框
+            y = pointY+10;
+          }else {
+            y = pointY-boxHeight;
+          }
+          return [x,y];
+        }else {
+          x = pointX - boxWidth;
+          y = pointY+10;
+          return [x,y];
+        }
+      },
+      defaultTooltipFormatter:function(params){
+        let str = `<div>`;
+        params.forEach((item, i) => {
+          if(i===0){
+            let value=bus.computeTimezone(item.data[0])
+            let t_date = new Date(value);
+            str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+              + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
+            str +=`<br/>`;
+          }
+          let val = Number(item.data[1]);
+          str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
+          str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${item.seriesName}:  </div>`;
+          str += `<div style="padding-left: 10px;">`;
+          str += chartDataFormat.getUnit(5).compute(val,null,2);
+          str += `</div>`;
+          str += `</div>`;
+        });
+        str +=`</div>`;
+        return str;
+      },
+      defaultYAxisFormatter:function(value,index){
+        let unit=chartDataFormat.getUnit(5);
+        return unit.compute(value,index);
+      },
       startLoading:function(){
         this.$refs.loading.startLoading();
       },
@@ -85,6 +231,7 @@
     },
     mounted() {
       this.chart=echarts.init(document.getElementById(this.chartId));
+      EleResize.on(this.$el,this.resize);
     },
     watch:{
 
@@ -98,9 +245,41 @@
 </script>
 
 <style scoped>
-.chart-room{
+  .chart-room{
-  width: 95%;
+    width: 95%;
-  height: 100%;
+    height: 100%;
-  position: relative;
+    position: relative;
-}
+  }
+  .chart-room .legend-container{
+    width: calc(100% - 30px);
+    /*max-height:80px;*/
+    /*min-height:40px;*/
+    height: 80px;
+    font-size:12px;
+    text-align:left;
+    margin:0 auto;
+    line-height: 18px;
+    position: relative;
+  }
+  .chart-room .legend-container .legend-item{
+    text-overflow:ellipsis;
+    white-space:nowrap;
+    width:100%;
+    overflow-x:hidden;
+    cursor:pointer;
+    display:inline-block;
+    float:left;
+    line-height: 20px;
+  }
+  .chart-room .ft-gr{
+    color:lightgray;
+  }
+  .chart-room .legend-shape{
+    display:inline-block;
+    margin-right:5px;
+    border-radius:10px;
+    width:15px;
+    height:5px;
+    vertical-align: middle;
+  }
 </style>

nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue

@@ -1,11 +1,19 @@
 <script>
     import chartDataFormat from "../../../charts/chartDataFormat";
     import bus from '../../../../libs/bus';
+    let bgColorList=['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
+      '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
+      '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
+      '#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
+      '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
+      '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
+      '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
+    ]
     const commonOption={
       title:{
         show:false,
       },
-      color: this.bgColorList,
+      color: bgColorList,
       legend:{
         show:false,
       },
@@ -25,7 +33,7 @@
       },
       dataZoom: [{
         type: 'slider',
-        show:true,
+        show:false,
         xAxisIndex: [0],
         start: 0,
         end: 100,
@@ -119,6 +127,9 @@
       },
       setMap:function(map){
         mapOptions.geo.map=map
+      },
+      getBgColorList:function(){
+        return Object.assign([],bgColorList)
       }
     }
 </script>

nezha-fronted/src/components/page/dashboard/overview/overview.vue

@@ -8,6 +8,7 @@
           <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>
       <!--右侧内容-->
@@ -48,7 +49,7 @@
                       <table-box :pop-data="dataCenterStatData" ref="dataCenterTab" ></table-box>
                     </div>
                     <div style="flex: 3;">
-                      <chart-box chart-title="" chart-type="map" :map="map" ref="dataCenterMap"></chart-box>
+                      <chart-box chart-title="" chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap"></chart-box>
                     </div>
                   </div>
                 </div>
@@ -940,71 +941,6 @@
 
         return tooltip;
       },
-      tooltipPosition:function(point,params,dom,rect,size){
-        dom.style.transform = "translateZ(0)";
-        //提示框位置
-        var x=0;
-        var y=0;
-        //当前鼠标位置
-        var pointX = point[0];
-        var pointY = point[1];
-        //外层div大小
-        var viewWidth = size.viewSize[0];
-        var viewHeight = size.viewSize[1];
-        //提示框大小
-        var boxWidth = size.contentSize[0];
-        var boxHeight = size.contentSize[1];
-        let chartDom = document.getElementById(this.chartId);
-        if(chartDom){
-          let parTop = chartDom.offsetTop;
-          let parLeft = chartDom.offsetLeft;
-
-          let parent = chartDom.parentElement;
-          let parClientHeight = parent.clientHeight;//可视高度
-          let parClientWidth = parent.clientWidth;//可视宽度
-          let parScrollTop = parent.scrollTop;
-          if((parClientWidth-pointX-parLeft-20)>=boxWidth){//说明鼠标在左边放不下提示框
-            x=pointX+10;
-          }else{
-            x = pointX - boxWidth;
-          }
-          if((parClientHeight-pointY-(parTop-parScrollTop)-20)>=boxHeight){//说明鼠标上面放不下提示框
-            y = pointY+10;
-          }else {
-            y = pointY-boxHeight;
-          }
-          return [x,y];
-        }else {
-          x = pointX - boxWidth;
-          y = pointY+10;
-          return [x,y];
-        }
-      },
-      tooltipFormatter:function(params){
-        let str = `<div>`;
-        params.forEach((item, i) => {
-          if(i===0){
-            let value=bus.computeTimezone(item.data[0])
-            let t_date = new Date(value);
-            str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
-              + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
-            str +=`<br/>`;
-          }
-          let val = Number(item.data[1]);
-          str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
-          str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${item.seriesName}:  </div>`;
-          str += `<div style="padding-left: 10px;">`;
-          str += chartDataFormat.getUnit(5).compute(val,null,2);
-          str += `</div>`;
-          str += `</div>`;
-        });
-        str +=`</div>`;
-        return str;
-      },
-      yAxisFormatter:function(value,index){
-        let unit=chartDataFormat.getUnit(5);
-        return unit.compute(value,index);
-      },
       getAssetTabTitle:function(){
         switch (this.typeFilter) {
           case "typeStat":