feat: overview（部分）

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

@@ -56,7 +56,7 @@
     created() {
       this.option=chartConfig.getOption(this.chartType);
       if(this.showToolbox == false){
-        this.option.grid.top=10;
+        //this.option.grid.top = 10;
       }
     },
     methods:{
@@ -158,7 +158,6 @@
           this.chart.setOption(option);
         }
 
-
         //坐标轴label鼠标悬浮提示
         if (this.axisTooltip) {
           let tooltipDom = document.querySelector(".axis-tooltip");

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

@@ -194,22 +194,25 @@
       series: [],
       tooltip : {}
     };
-    const alertMessageBar = {
+    const alertMessageBarByRule = {
       title: {
         show: false,
       },
-      color: overviewBgColor,
       legend: {
         show: false,
       },
       grid: {
-        top: 30,
+        top: 60,
-        left: 0,
+        left: 80,
         right: 30,
-        bottom:8
+        bottom: 60,
       },
       series: [],
-      tooltip : {},
+      tooltip : {
+        backgroundColor: "rgba(255, 255, 255, 0.66)",
+        extraCssText: "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);",
+        textStyle: {color: "#333"}
+      },
       xAxis: {
         type: 'value',
         axisLine: {
@@ -220,7 +223,7 @@
         },
         axisLabel: {
           show:true,
-          fontSize: 10
+          fontSize: 14
         }
       },
       yAxis: {
@@ -234,18 +237,82 @@
         data: [],
         axisLabel: {
           show: true,
+          fontSize: 14,
           formatter: function(value) {
-            if (value.length > 33) {
+            if (value.length > 10) {
-              return value.substring(0, 30) + "...";
+              return value.substring(0, 6) + "...";
             }
             return value;
           },
-          align: 'left',
-          margin: 200,
         },
         triggerEvent: true
       },
     };
+    const alertMessageBarByAsset = {
+      title: {
+        show: false,
+      },
+      color: function(params) {
+        //首先定义一个数组
+        let colorList = [pieColor[0], pieColor[1]];;
+        if(params.dataIndex % 2 == 0){
+          return colorList[0]
+        }else{
+          return colorList[1]
+        }
+      },
+      legend: {
+        show: false,
+      },
+      grid: {
+        top: 60,
+        left: 80,
+        right: 30,
+        bottom: 60,
+      },
+      series: [],
+      tooltip : {
+        backgroundColor: "rgba(255, 255, 255, 0.66)",
+        extraCssText: "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);",
+        textStyle: {color: "#333"}
+      },
+      yAxis: {
+        type: 'value',
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          show:true,
+          fontSize: 14
+        }
+      },
+      xAxis: {
+        type: 'category',
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        data: [],
+        axisLabel: {
+          show: true,
+          fontSize: 12,
+          formatter: function(value) {
+            let r = value;
+            if (r.length > 4) {
+              r = value.substring(0, 3) + "...";
+            }
+            return r.split("").join("\n");
+          },
+        },
+        triggerEvent: true
+      },
+    };
+
     const overviewLine = {
       title:{
         show: false,
@@ -399,7 +466,9 @@
       overviewLine: {name: 'line', option: overviewLine},
       map:{name:'map',option:mapOptions},
       pie: {name: 'assetType', option: assetTypePie},
-      bar: {name: 'alertMessage', option: alertMessageBar},
+      bar: {name: 'alertMessage', option: alertMessageBarByAsset},
+      ruleBar: {name: 'ruleMessage', option: alertMessageBarByRule},
+      assetBar: {name: 'assetMessage', option: alertMessageBarByAsset},
       noData:{name:'noData',option:noDataOption},
     };
     export default {

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

@@ -338,6 +338,7 @@
   position: fixed;
   transform: translate(-100%, -50%);
   min-width: unset;
+  background-color: rgba(255, 255, 255, 0.8) !important;
 }
 .axis-tooltip::after {
   content: '';

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

@@ -129,7 +129,30 @@
 <!--                <div class="chart-no-data"v-if="!assetTypeLoading && assetData.typeStat && assetData.typeStat.length == 0">No Data</div>-->
           </div>
         </div>
+
         <!--第二个图-->
+        <div class="content-col-box">
+          <div class="content-col-title">
+            <span>
+              <span v-if="alertMessageShow == 'asset'">{{$t("dashboard.overview.alert.assetTopN")}}</span>
+              <span v-if="alertMessageShow == 'module'">{{$t("dashboard.overview.alert.moduleTopN")}}</span>
+              <!--<span class="dropdown-btn" @mouseenter="alertMessageDropdownHandler(true)" @mouseleave="alertMessageDropdownHandler(false)">
+                <i class="el-icon-arrow-down"></i>
+                <transition name="el-zoom-in-top">
+                  <ul class="el-dropdown-menu el-popper el-dropdown-menu&#45;&#45;mini" v-if="bottom3DropdownShow">
+                    <li @click="alertMessageChange('asset')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.asset.title")}}</li>
+                    <li @click="alertMessageChange('module')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.module.module")}}</li>
+                  </ul>
+                </transition>
+              </span>-->
+            </span>
+          </div>
+          <div class="content-col-content">
+            <chart-box axis-tooltip="x" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="assetBar" ref="assetMessage" name="assetMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.assetMessageLoading = isLoading}"></chart-box>
+            <chart-box axis-tooltip="y" v-show="alertMessageShow == 'module'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.moduleMessageLoading = isLoading}"></chart-box>
+          </div>
+        </div>
+        <!--第三个图-->
         <div class="content-col-box">
           <div class="content-col-title">
             <span>{{$t("dashboard.overview.alert.alertRuleTopN")}}</span>
@@ -141,49 +164,11 @@
             </el-dropdown>-->
           </div>
           <div class="content-col-content">
-            <chart-box axis-tooltip="y" chart-type="bar" ref="ruleMessage" :tooltip-formatter="simpleFormatter" :show-toolbox="false" name="ruleMessage" @is-loading="(isLoading)=>{this.ruleMessageLoading = isLoading}"></chart-box>
+            <chart-box axis-tooltip="y" chart-type="ruleBar" ref="ruleMessage" :tooltip-formatter="simpleFormatter" :show-toolbox="false" name="ruleMessage" @is-loading="(isLoading)=>{this.ruleMessageLoading = isLoading}"></chart-box>
             <!--                <div class="no-data-tip" v-if="!ruleMessageLoading && ((!messageByRuleSeries.data && !messageByRuleSeries.category) || (messageByRuleSeries.data.length == 0 && messageByRuleSeries.category.length == 0))">N/A</div>-->
             <!--                <div class="chart-no-data" v-if="!ruleMessageLoading && ((!messageByRuleSeries.data && !messageByRuleSeries.category) || (messageByRuleSeries.data.length == 0 && messageByRuleSeries.category.length == 0))">No Data</div>-->
           </div>
         </div>
-        <!--第三个图-->
-        <div class="content-col-box">
-          <div class="content-col-title">
-            <span>
-              <span v-if="alertMessageShow == 'asset'">{{$t("dashboard.overview.alert.assetTopN")}}</span>
-              <span v-if="alertMessageShow == 'module'">{{$t("dashboard.overview.alert.moduleTopN")}}</span>
-              <span class="dropdown-btn" @mouseenter="alertMessageDropdownHandler(true)" @mouseleave="alertMessageDropdownHandler(false)">
-                <i class="el-icon-arrow-down"></i>
-                <transition name="el-zoom-in-top">
-                  <ul class="el-dropdown-menu el-popper el-dropdown-menu--mini" v-if="bottom3DropdownShow">
-                    <li @click="alertMessageChange('asset')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.asset.title")}}</li>
-                    <li @click="alertMessageChange('module')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.module.module")}}</li>
-                  </ul>
-                </transition>
-              </span>
-            </span>
-            <!--<el-dropdown trigger="hover" v-if="alertMessageShow == 'asset'" :show-timeout="0" size="small">
-              <span>Top&nbsp;{{topFilter.asset}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('asset', item)">{{item}}</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-            <el-dropdown trigger="hover" v-if="alertMessageShow == 'module'" :show-timeout="0" size="small">
-              <span>Top&nbsp;{{topFilter.module}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('module', item)">{{item}}</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>-->
-          </div>
-          <div class="content-col-content">
-            <chart-box axis-tooltip="y" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="assetMessage" name="assetMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.assetMessageLoading = isLoading}"></chart-box>
-            <chart-box axis-tooltip="y" v-show="alertMessageShow == 'module'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.moduleMessageLoading = isLoading}"></chart-box>
-<!--                <div class="no-data-tip" v-show="alertMessageShow == 'asset'" v-if="!assetMessageLoading && ((!messageByAssetSeries.data && !messageByAssetSeries.category) || (messageByAssetSeries.data.length == 0 && messageByAssetSeries.category.length == 0))">N/A</div>-->
-<!--                <div class="no-data-tip" v-show="alertMessageShow == 'module'" v-if="!moduleMessageLoading && ((!messageByModuleSeries.data && !messageByModuleSeries.category) || (messageByModuleSeries.data.length == 0 && messageByModuleSeries.category.length == 0))">N/A</div>-->
-<!--                <div class="chart-no-data" v-show="alertMessageShow == 'asset'" v-if="!assetMessageLoading && ((!messageByAssetSeries.data && !messageByAssetSeries.category) || (messageByAssetSeries.data.length == 0 && messageByAssetSeries.category.length == 0))">No Data</div>-->
-<!--                <div class="chart-no-data" v-show="alertMessageShow == 'module'" v-if="!moduleMessageLoading && ((!messageByModuleSeries.data && !messageByModuleSeries.category) || (messageByModuleSeries.data.length == 0 && messageByModuleSeries.category.length == 0))">No Data</div>-->
-          </div>
-        </div>
       </div>
     </div>
     <div class="axis-tooltip el-popover"></div>
@@ -779,16 +764,20 @@
               name: 'alertStatByRule',
               data: seriesData,
               type: 'bar',
-              barMaxWidth: 30,
+              barMaxWidth: 20,
+              itemStyle: {
+                color: function(params) {
+                  let colorList = ["#ECCD82", "#99CEB9"];;
+                  if(params.dataIndex % 2 == 0){
+                    return colorList[0]
+                  }else{
+                    return colorList[1]
+                  }
+                },
+              },
               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", 200);
-            this.$refs.ruleMessage.modifyOption("grid", "right", 30);
-            this.$refs.ruleMessage.modifyOption("grid", "bottom", 8);
             this.$refs.ruleMessage.setSeries(this.messageByRuleSeries);
             this.$refs.ruleMessage.endLoading();
           }
@@ -809,15 +798,19 @@
               data: seriesData,
               type: 'bar',
               barMaxWidth: 30,
-              category: categoryData
+              category: categoryData,
+              itemStyle: {
+                color: function(params) {
+                  let colorList = ["#ECCD82", "#99CEB9"];;
+                  if(params.dataIndex % 2 == 0){
+                    return colorList[0]
+                  }else{
+                    return colorList[1]
+                  }
+                },
+              },
             };
-            this.$refs.assetMessage.modifyOption('yAxis', 'data', categoryData);
+            this.$refs.assetMessage.modifyOption('xAxis', '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", 200);
-            this.$refs.assetMessage.modifyOption("grid", "right", 30);
-            this.$refs.assetMessage.modifyOption("grid", "bottom", 8);
             this.$refs.assetMessage.setSeries(this.messageByAssetSeries);
             this.$refs.assetMessage.endLoading();
           }
@@ -840,13 +833,7 @@
               barMaxWidth: 30,
               category: categoryData
             };
-            this.$refs.moduleMessage.modifyOption('yAxis', 'data', categoryData);
+            this.$refs.moduleMessage.modifyOption('xAxis', '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", 200);
-            this.$refs.moduleMessage.modifyOption("grid", "right", 30);
-            this.$refs.moduleMessage.modifyOption("grid", "bottom", 8);
             this.$refs.moduleMessage.setSeries(this.messageByModuleSeries);
             this.$refs.moduleMessage.endLoading();
           }