perf: overview、endpoint、alertmsg图表tooltip统一

nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue

@@ -6,7 +6,8 @@
 </style>
 <style>
   .endpoint-dialog .el-dialog__body{
-    height: 100% !important;
+    height: calc(100% - 48px) !important;
+    padding-bottom: 0 !important;
   }
 </style>
 <template>
@@ -51,19 +52,6 @@
             </transition>
           </button>
         </div>
-        <!--<el-dropdown split-button type="primary"  size="mini" class="dropdownBtn" @click="viewGraph">
-          <i class="nz-icon nz-icon-chart"  :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i>
-          <el-dropdown-menu slot="dropdown" style="padding:10px 4px 10px 10px;">
-            <el-row>
-              <el-col :span="16" style="padding-top: 4px;padding-left: 1px"><span style="padding-top: 2px">{{$t('project.endpoint.hideSameLabels')}}</span></el-col>
-              <el-col :span="8">
-                <el-dropdown-item class="dropdown-content" >
-                  <el-switch v-model="hideSameLabels" active-color="#ee9d3f" size="small"></el-switch>
-                </el-dropdown-item>
-              </el-col>
-            </el-row>
-          </el-dropdown-menu>
-        </el-dropdown>-->
       </div>
     </div>
     <div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
@@ -102,52 +90,6 @@
         width="180">
       </pl-table-column>
     </pl-table>
-    <!--<el-table
-      :data="tableData"
-      border
-      v-scrollBar:el-table="'normal'"
-      class="nz-table endpoint-query-table"
-      v-loading="loading"
-      :header-cell-class-name="cellClass"
-      :height="$tableHeight.noPagination"
-      @selection-change="selectChange"
-      ref="endpointQueryTable"
-      style="width: 100%;">
-      <el-table-column
-        :resizable="false"
-        type="selection"
-        width="38"
-        align="center"
-        :selectable="selectable"
-      >
-      </el-table-column>
-
-      <el-table-column
-        prop="element"
-        :label="$t('project.endpoint.element')">
-        <template slot-scope="scope">
-          <el-popover trigger="click" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
-            <div>
-              <ul>
-                <li><span class="metirc-tip-list">metric&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.metric?scope.row.metricTip.metric:'&#45;&#45;'}}</span></li>
-                <li><span class="metirc-tip-list">type&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.type?scope.row.metricTip.type:'unknown'}}</span></li>
-                <li><span class="metirc-tip-list">help&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.help?scope.row.metricTip.help:'&#45;&#45;'}}</span></li>
-                <li><span class="metirc-tip-list">unit&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.unit?scope.row.metricTip.unit:'&#45;&#45;'}}</span></li>
-              </ul>
-            </div>
-            <span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
-          </el-popover>
-          <span v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span>
-          &lt;!&ndash;            <span>{{hideSameLabels?scope.row.simpleElement: scope.row.element}}</span>&ndash;&gt;
-        </template>
-      </el-table-column>
-      <el-table-column
-        :resizable="false"
-        prop="value"
-        :label="$t('project.endpoint.value')"
-        width="180">
-      </el-table-column>
-    </el-table>-->
     <button class="to-top" v-show="showTopBtn" :class="{'to-top-is-hover': tableHover}" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
 
     <el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
@@ -503,23 +445,29 @@
                     alias:alias,
                     // showText:this.formatLegend(chartData.name),
                     isGray:false
-                  }
+                  };
                   this.legend.push(legend);
                   chartData.data=queryData.values.map((dpsItem, dpsIndex) => {
                     return [dpsItem[0] * 1000, Number(dpsItem[1])];
                   });
-                  console.info(chartData.data)
                   this.chartDatas.push(chartData);
                 }
               }else{
-                this.$message.error(response.data.error)
+                this.$message.error(response.data.error);
-                console.error(response.data)
+                console.error(response.data);
               }
             }
           });
           this.$nextTick(()=>{
             this.$refs.endpointChart.setRandomColors(this.chartDatas.length)
             this.$refs.endpointChart.setLegend(this.legend)
+            this.$refs.endpointChart.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
+            this.$refs.endpointChart.modifyOption("tooltip", "textStyle", {color: "#000"});
+            this.$refs.endpointChart.modifyOption("grid", "top", 30);
+            this.$refs.endpointChart.modifyOption("grid", "left", 0);
+            this.$refs.endpointChart.modifyOption("grid", "right", 30);
+            this.$refs.endpointChart.modifyOption("grid", "bottom", 8);
+            this.$refs.endpointChart.modifyOption("grid", "containLabel", true);
             this.$refs.endpointChart.setSeries(this.chartDatas);
             this.$refs.endpointChart.endLoading();
           });

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

@@ -6,10 +6,9 @@
 
     <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 class="legend-container legend-container-screen" 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>
 
@@ -131,17 +130,25 @@
         }
       },
       resize:function(){
+        this.$nextTick(() => {
           if(this.chart){
-          let height=this.$el.clientHeight;
+            //let height=this.$el.clientHeight;
+            //console.info(this.$el.clientHeight)
+            let height = this.$el.clientHeight-document.querySelector("#legendArea").offsetHeight;
+            //console.info(document.querySelector("#legendArea").offsetHeight)
+            /*for (let i in document.querySelector("#legendArea")) {
+              console.info(i, document.querySelector("#legendArea")[i])
+            }*/
             let width=this.$el.clientWidth;
-          if(this.chartTitle){
+            /*if(this.chartTitle){
               height = height - 20;
             }
             if(this.legend && this.legend.length>0){
               height = height - 80;
-          }
+            }*/
             this.chart.resize({width:width,height:height});
           }
+        });
       },
       mouseEnterChart(){
         if (this.chart&&this.showToolbox) {
@@ -321,7 +328,9 @@
     }
   }
 </script>
-
+<!--<style>
+ @import "../../../charts/line-chart-block.scss";
+</style>-->
 <style scoped>
   .chart-room{
     width: 100%;
@@ -330,19 +339,19 @@
   }
   .chart-room .legend-container{
     width: calc(100% - 30px);
-    /*max-height:80px;*/
+    max-height:80px;
-    /*min-height:40px;*/
+    min-height:25px;
-    height: 80px;
+    /*height: 80px;*/
     font-size:12px;
     text-align:left;
-    margin:0 auto;
+    left: 10px;
+    bottom: 5px;
     line-height: 18px;
-    position: relative;
+    position: absolute;
   }
   .chart-room .legend-container .legend-item{
     text-overflow:ellipsis;
     white-space:nowrap;
-    width:100%;
     overflow-x:hidden;
     cursor:pointer;
     display:inline-block;

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

@@ -235,7 +235,6 @@
         confine: false,
         extraCssText:'z-index:1000;',
         formatter: function(v, i) {
-          console.info(v)
           return v;
         }
       },

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

@@ -445,6 +445,13 @@
               }
               return name;
             });*/
+            this.$refs.assetTypePie.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
+            this.$refs.assetTypePie.modifyOption("tooltip", "textStyle", {color: "#000"});
+            this.$refs.assetTypePie.modifyOption("grid", "top", 30);
+            this.$refs.assetTypePie.modifyOption("grid", "left", 0);
+            this.$refs.assetTypePie.modifyOption("grid", "right", 30);
+            this.$refs.assetTypePie.modifyOption("grid", "bottom", 8);
+            this.$refs.assetTypePie.modifyOption("grid", "containLabel", true);
             this.$refs.assetTypePie.setSeries(series);
             this.$refs.assetTypePie.endLoading();
           }
@@ -514,6 +521,13 @@
               }
               this.chartSeries.push(series);
               if (this.chartSeries.length == 2) {
+                this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
+                this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"});
+                this.$refs.chartbox.modifyOption("grid", "top", 30);
+                this.$refs.chartbox.modifyOption("grid", "left", 0);
+                this.$refs.chartbox.modifyOption("grid", "right", 30);
+                this.$refs.chartbox.modifyOption("grid", "bottom", 8);
+                this.$refs.chartbox.modifyOption("grid", "containLabel", true);
                 this.$refs.chartbox.setSeries(this.chartSeries);
                 this.$refs.chartbox.endLoading();
               }
@@ -539,6 +553,12 @@
               }
               this.chartSeries.push(series);
               if (this.chartSeries.length == 2) {
+                this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
+                this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"});
+                this.$refs.chartbox.modifyOption("grid", "top", 30);
+                this.$refs.chartbox.modifyOption("grid", "left", 0);
+                this.$refs.chartbox.modifyOption("grid", "right", 30);
+                this.$refs.chartbox.modifyOption("grid", "bottom", 8);
                 this.$refs.chartbox.setSeries(this.chartSeries);
                 this.$refs.chartbox.endLoading();
               }
@@ -797,6 +817,12 @@
               category: categoryData, //自定义，用来判断N/A是否显示
             };
             this.$refs.ruleMessage.modifyOption('yAxis', 'data', categoryData);
+            this.$refs.ruleMessage.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
+            this.$refs.ruleMessage.modifyOption("tooltip", "textStyle", {color: "#000"});
+            this.$refs.ruleMessage.modifyOption("grid", "top", 30);
+            this.$refs.ruleMessage.modifyOption("grid", "left", 0);
+            this.$refs.ruleMessage.modifyOption("grid", "right", 30);
+            this.$refs.ruleMessage.modifyOption("grid", "bottom", 8);
             this.$refs.ruleMessage.setSeries(this.messageByRuleSeries);
             this.$refs.ruleMessage.endLoading();
           }
@@ -822,6 +848,12 @@
               category: categoryData
             };
             this.$refs.assetMessage.modifyOption('yAxis', 'data', categoryData);
+            this.$refs.assetMessage.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
+            this.$refs.assetMessage.modifyOption("tooltip", "textStyle", {color: "#000"});
+            this.$refs.assetMessage.modifyOption("grid", "top", 30);
+            this.$refs.assetMessage.modifyOption("grid", "left", 0);
+            this.$refs.assetMessage.modifyOption("grid", "right", 30);
+            this.$refs.assetMessage.modifyOption("grid", "bottom", 8);
             this.$refs.assetMessage.setSeries(this.messageByAssetSeries);
             this.$refs.assetMessage.endLoading();
           }
@@ -847,6 +879,12 @@
               category: categoryData
             };
             this.$refs.moduleMessage.modifyOption('yAxis', 'data', categoryData);
+            this.$refs.moduleMessage.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
+            this.$refs.moduleMessage.modifyOption("tooltip", "textStyle", {color: "#000"});
+            this.$refs.moduleMessage.modifyOption("grid", "top", 30);
+            this.$refs.moduleMessage.modifyOption("grid", "left", 0);
+            this.$refs.moduleMessage.modifyOption("grid", "right", 30);
+            this.$refs.moduleMessage.modifyOption("grid", "bottom", 8);
             this.$refs.moduleMessage.setSeries(this.messageByModuleSeries);
             this.$refs.moduleMessage.endLoading();
           }
@@ -1360,7 +1398,6 @@
   .tooltip-table tr{
     display: table-row;
     vertical-align: inherit;
-    border-color: inherit;
   }
   .tooltip-table td{
     min-width: 0;
@@ -1369,7 +1406,7 @@
     text-overflow: ellipsis;
     vertical-align: middle;
     text-align: left;
-    border: 1px solid #EBEEF5;
+    border: 1px solid #b9b9bf;
     display: table-cell;
     padding:0px 5px ;
   }