From 7cafaf12da4e556a652a9bb7149476de55a98ac6 Mon Sep 17 00:00:00 2001
From: hyx <hanyuxia@iie.ac.cn>
Date: Fri, 17 Apr 2020 21:50:26 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=201=20dashboard=E6=A8=A1=E5=9D=97prometheus=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E6=8E=A5=E5=8F=A3query=E5=86=85=E5=AE=B9=E8=BF=9B?=
 =?UTF-8?q?=E8=A1=8Cencode=202=20panel=E4=B8=8B=E6=8B=89=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95=E6=94=B6?=
 =?UTF-8?q?=E7=BC=A9=E5=90=8E=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8=203=20ec?=
 =?UTF-8?q?harts=E5=9B=BE=E8=A1=A8=E5=AF=B9=E4=BA=8E=E8=BF=94=E5=9B=9E?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AEmetric=E4=B8=BA=E7=A9=BA=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=EF=BC=8Ctooltip=E6=97=A0=E6=B3=95=E6=AD=A3=E5=B8=B8=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E4=BF=AE=E6=94=B9=EF=BC=88=E5=88=97=E8=A1=A8=E5=8F=8A?=
 =?UTF-8?q?=E5=85=A8=E5=B1=8F=EF=BC=8C=E9=A2=84=E8=A7=88=E5=8F=8A=E5=85=A8?=
 =?UTF-8?q?=E5=B1=8F=EF=BC=8Cexplore=E5=8F=8A=E5=85=A8=E5=B1=8F=EF=BC=89?=
 =?UTF-8?q?=204=20=E5=9B=BE=E8=A1=A8tooltip=E4=B8=AD=E7=9A=84=E5=86=92?=
 =?UTF-8?q?=E5=8F=B7=E5=88=A0=E6=8E=89=205=20metric=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=EF=BC=8Cmetric=E5=8F=8Alabel=E9=AB=98=E5=BA=A6=E4=B8=BA100%?=
 =?UTF-8?q?=EF=BC=8C=E6=97=A0=E6=BB=9A=E5=8A=A8=E6=9D=A1=206=20=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E7=BD=91=E6=A0=BC=EF=BC=8C=E5=8F=96=E6=B6=88y?=
 =?UTF-8?q?=E8=BD=B4=207=20tooltip=E5=86=85=E5=AE=B9=E5=92=8Clegend?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E6=98=BE=E7=A4=BA=E4=B8=8D=E4=B8=80=E8=87=B4?=
 =?UTF-8?q?=208=20tooltip=E9=A2=9C=E8=89=B2=E9=9A=8F=E6=9C=BA=E4=BA=A7?=
 =?UTF-8?q?=E7=94=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/charts/chart-list.vue      |   7 +-
 .../src/components/charts/chart-url.vue       |  17 +-
 .../src/components/charts/chartPreview.vue    |  39 ++-
 .../components/charts/line-chart-block.vue    |  37 +-
 .../components/common/js/radomcolor/color.txt | 177 ++++++++++
 .../common/js/radomcolor/randomcolor.js       | 322 ++++++++++++++++++
 .../components/page/dashboard/chartMetric.vue |  14 +-
 7 files changed, 575 insertions(+), 38 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/js/radomcolor/color.txt
 create mode 100644 nezha-fronted/src/components/common/js/radomcolor/randomcolor.js

diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index cc5f2261d..95f17ffba 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -69,8 +69,7 @@
                  handle:'.chartTitle',
                }"  >@clone="clone"
      -->
-    <draggable v-model="dataList" @chang="change" @start="start" @end="end" :move="move" @choose="choose"
-               @add="add"  @update="update" @remove="remove" @sort="sort"
+    <draggable v-model="dataList" @start="start" @end="end" :move="move"
                :scroll-sensitivity="150"
                :options="{
                  group:{name:'chartGroup',pull:'false'},
@@ -501,7 +500,6 @@ export default {
           }else {
             this.dataList = this.dataTotalList;
           }
-          console.log('0000==========',this.dataList);
           this.$nextTick(() => {
             if (this.dataList.length > 0 && this.$refs.editChart) {
               this.$refs.editChart.forEach((item, i) => {
@@ -636,6 +634,9 @@ export default {
                         if(!alias || alias===''){
                           alias = chartItem.elements[innerPos].expression;
                         }
+                        //if(alias){
+                          //host = alias;
+                        //}
                         legend.push({name:host,alias:alias});
                         // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
                         seriesItem.theData.name = host;
diff --git a/nezha-fronted/src/components/charts/chart-url.vue b/nezha-fronted/src/components/charts/chart-url.vue
index 924a5e982..49c60880a 100644
--- a/nezha-fronted/src/components/charts/chart-url.vue
+++ b/nezha-fronted/src/components/charts/chart-url.vue
@@ -32,7 +32,7 @@
         </div>
         <div :id="'chartUrl'+chartIndex" class="mt-10 url-container"  v-show="firstShow" >
             <iframe :id="'urlContainer'+chartIndex" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto
-                    style="z-index:5000;"
+                    style="z-index:5000;padding-bottom:6px;"
             ></iframe><!--  style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;"  :src="chart.url" v-scrollBar:char-url-preview-->
         </div>
         <!--全屏-->
@@ -41,7 +41,7 @@
               <span class="nz-dialog-title">{{data.title}}</span>
             </div>
             <iframe :id="'urlContainerFull'+chartIndex"  frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto
-                    style="z-index:5000;"
+                    style="z-index:5000;padding-bottom:6px;"
             ></iframe><!--  style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;"  :src="chart.url" v-scrollBar:char-url-preview-->
 
             <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
@@ -92,6 +92,7 @@ export default {
             minHeight:200,
             chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
             titleHeight:38,//title-height:28,magrin-bottom:10
+            paddingBottom:6,
             divFirstShow:false,
         };
     },
@@ -113,7 +114,7 @@ export default {
           }
           chartBox.style.height = `${height-this.chartSpaceHeight}px`;
           const urlBox = document.getElementById('urlContainer'+this.chartIndex);
-          urlBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight}px`;// -75-32
+          urlBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight-this.paddingBottom}px`;// -75-32
         });
         this.startLoading();
         this.setLoadFrame();
@@ -150,7 +151,7 @@ export default {
         this.setLoadFrameFull();
       },
       dragResize:function(e){
-        console.log('========',this.data)
+        console.log('========',this.data);
         var diffWidth =20; //界面的宽度空白的地方的宽度
         var chartBoxPadding = 22;
         var targetDiv= document.getElementById('chartUrlDiv'+this.chartIndex); //e.target.parentNode.parentNode;.children[0]
@@ -214,7 +215,7 @@ export default {
             //表格的高度
             const tableBox = document.getElementById('urlContainer'+_this.chartIndex);
             tableBox.style.height = `${containerHeight-_this.titleHeight}px`;//-75-32+25
-        }
+        };
 
         document.onmouseup=function(){
           document.onmousemove=null;
@@ -273,10 +274,10 @@ export default {
             height:(containerHeight+_this.chartSpaceHeight),
             prev:parseInt(_this.data.prev),
             next:parseInt(_this.data.next),
-          }
-          console.log('========2',_this.data)
+          };
+          console.log('========2',_this.data);
           _this.$put('panel/'+  _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
-            console.log('========3',_this.data)
+            console.log('========3',_this.data);
             if (response.code === 200) {
               //更新当前图表数据
               _this.data.span= span;
diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index 04eb56841..3f8518253 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -17,8 +17,9 @@
 
   }
   #chartPreviewDailog .el-dialog__body {
-    padding-bottom:5px !important;
+    padding-bottom:20px !important;
   }
+
 </style>
 <template>
     <el-dialog class="chart-preview-dialog nz-dialog" id="chartPreviewDailog"
@@ -94,6 +95,7 @@
   import bus from '../../libs/bus';
   import loading from "../common/loading";
   import chartDataFormat from './chartDataFormat'
+  import {randomcolor} from  '../common/js/radomcolor/randomcolor.js'
 
   export default {
     name: 'chartPreview',
@@ -134,14 +136,7 @@
         screenLegendList:[],
         isGrey:[],
         isGreyScreen:[],
-        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',
-        ],
+        bgColorList: [],
         //firstShow: false, // 默认不显示操作按钮,
         //dropdownMenuShow:false,
         showLegend:true,
@@ -662,9 +657,10 @@ console.log('=======',this.chart);
 
               //let str = `<div  style='white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
               params.forEach((item, i) => {
-                let tip=legend.find((element)=>{
-                  return element.name == item.seriesName;
-                });
+                //let tip=legend.find((element)=>{
+                  //return element.name == item.seriesName;
+                //});
+                let tip=legend[i];
                 if(i===0){
                   let t_date = new Date(item.data[0]);
                   str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
@@ -676,7 +672,7 @@ console.log('=======',this.chart);
                   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>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}:  </div>`;
+                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>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}  </div>`;
                 str += `<div style="padding-left: 10px;">`;
                 str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
                 str += `</div>`;
@@ -777,7 +773,7 @@ console.log('=======',this.chart);
               show: true,
             },
             splitLine:{
-              show:false
+              show:true
             }
           },
           yAxis: {
@@ -785,6 +781,14 @@ console.log('=======',this.chart);
             splitLine:{
               show:true
             },
+            //去掉y轴--start
+            axisLine:{
+              show:false
+            },
+            axisTick: {
+              show: false,
+            },
+            //去掉y轴--end
             axisLabel: {
               formatter: function(value,index){
                 let chartUnit=chartInfo.unit;
@@ -843,8 +847,15 @@ console.log('=======',this.chart);
           })
         }
       },
+      setColor(colorNum){
+        this.bgColorList = [];
+        for(let i=0;i<colorNum;i++) {
+          this.bgColorList.push(randomcolor())
+        }
+      },
       // 设置数据
       setData(chartItem, seriesItem,legend) {
+          this.setColor(legend.length);
           this.legend = legend;
           //this.data = chartItem;
           //this.seriesItem = seriesItem;
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 419ef7036..b36f9f07f 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -120,6 +120,7 @@
   import bus from '../../libs/bus';
   import loading from "../common/loading";
   import chartDataFormat from './chartDataFormat'
+  import {randomcolor} from  '../common/js/radomcolor/randomcolor.js'
 
   export default {
     name: 'lineChartBlock',
@@ -182,13 +183,13 @@
         screenLegendList:[],
         isGrey:[],
         isGreyScreen:[],
-        bgColorList: ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
+        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',
+          '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',*/
         ],
         firstShow: false, // 默认不显示操作按钮,
         caretShow:false,
@@ -744,9 +745,13 @@
 
               //let str = `<div  style='white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
               params.forEach((item, i) => {
-                let tip=legend.find((element)=>{
-                  return element.name == item.seriesName;
-                });
+                //alert('tooltip====='+JSON.stringify(item))
+                //let tip=legend.find((element)=>{
+                  //alert('legend====='+JSON.stringify(element))
+                  //return element.name == item.seriesName;
+                //});
+                let tip=legend[i];
+                let color = self.bgColorList[i];
                 if(i===0){
                   let value=bus.computeTimezone(item.data[0]);
                   let t_date = new Date(value);
@@ -759,7 +764,7 @@
                   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>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}:  </div>`;
+                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: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}  </div>`;
                 str += `<div style="padding-left: 10px;">`;
                 str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
                 str += `</div>`;
@@ -868,14 +873,23 @@
               show: true,
             },
             splitLine:{
-              show:false
-            }
+              show:true
+            },
+            //boundaryGap:['20%', '0'],
           },
           yAxis: {
             type: 'value',
             splitLine:{
               show:true
             },
+            //去掉y轴--start
+            axisLine:{
+              show:false
+            },
+            axisTick: {
+              show: false,
+            },
+            //去掉y轴--end
             axisLabel: {
               formatter: function(value,index){
                 let chartUnit=chartInfo.unit;
@@ -1107,8 +1121,15 @@
         */
         //return rlt;
       },
+      setColor(colorNum){
+        this.bgColorList = [];
+        for(let i=0;i<colorNum;i++) {
+          this.bgColorList.push(randomcolor())
+        }
+      },
       // 设置数据, filter区分
       setData(chartItem, seriesItem, panelId, filter,legend,area) {
+        this.setColor(legend.length);
         if(area==='showFullScreen'){//全屏按时间查询
           /*
           this.legend = legend;
diff --git a/nezha-fronted/src/components/common/js/radomcolor/color.txt b/nezha-fronted/src/components/common/js/radomcolor/color.txt
new file mode 100644
index 000000000..c7e0b2172
--- /dev/null
+++ b/nezha-fronted/src/components/common/js/radomcolor/color.txt
@@ -0,0 +1,177 @@
+
+#d8a6ea
+#d8f799
+#7fe2d0
+#f7677b
+#6e4eed
+#adff3a
+#f082f2
+#cc2095
+#ea60aa
+#8cf2d7
+#51cc41
+#9c93d8
+#f4a1c5
+#a1f4b3
+#6de8a6
+#92a1e8
+#e5aa52
+#96c938
+#9dd7ea
+#ccd1ff
+#d65640
+#ffccd1
+#6ba5c4
+#6af7a0
+#ffa5fc
+#bff977
+#98f99a
+#c14c3f
+#0f1ec4
+#88e02a
+#d540dd
+#24f27d
+#4572ef
+#fff8af
+#5f56d8
+#5023ba
+#021b60
+#80ed76
+#cbfca9
+#235ad1
+#ed87ae
+#adf913
+#dbdb29
+#e23bc6
+#e2a33d
+#949fe8
+#bad7fc
+#4ce86e
+#9ccbe5
+#6354ea
+#98f2d7
+#fcc79c
+#192e96
+#a567ce
+#f72a56
+#f29e59
+#eb6eef
+#e03188
+#6050bf
+#beb9f7
+#9ec1ef
+#4083b7
+#f73302
+#614dd1
+#f7b183
+#d6ef97
+#13f7e4
+#bbccf7
+#c17c3c
+#db5c91
+#fcdfbf
+#88d32c
+#b33de5
+#5ef9b9
+#27e5b9
+#7f84d1
+#f98f7a
+#d05ae2
+#44c4c2
+#e5d04b
+#b23c2c
+#2209b5
+#cdc2f9
+#be40e8
+#b3d1fc
+#67e0d2
+#c5f9a4
+#89dbf9
+#f4b0d0
+#0e00aa
+#88a8d8
+#e595a3
+#9ef99a
+#ffdf2b
+#e59787
+#68f9ac
+#6620a3
+#6cd87a
+#ade8ed
+#e7f78a
+#d66a22
+#a24cff
+#959cdb
+#c6ffb2
+#db4cff
+#4dff47
+#ee24f2
+#41ce31
+#99efbd
+#2b8407
+#3db2c6
+#cb42ed
+#6d22a3
+#6357cc
+#012e77
+#fc2dc5
+#b27b21
+#ef1ce5
+#f75b87
+#e87ab6
+#a8ffcc
+#9ae2e1
+#b4f79b
+#13d681
+#85d85f
+#dd499d
+#e88db0
+#35ce35
+#fff7af
+#e57e91
+#2cc147
+#60f7e3
+#16af98
+#9b2ff9
+#dd0618
+#42c49d
+#c137ce
+#fcc3bf
+#1219e2
+#04a53f
+#69ea81
+#fcdbba
+#e53986
+#5656e2
+#423cfc
+#9ddd75
+#fc2500
+#f461a8
+#fc6fba
+#b53649
+#71e8ac
+#f26a8e
+#bf8511
+#21f2a2
+#b1bded
+#e5bd6e
+#c004e5
+#6fdbd9
+#98f9c4
+#f9e936
+#d16932
+#fcb86a
+#27e5d5
+#e2bc7f
+#ca52f2
+#3bd68e
+#74e3ed
+#e0e80b
+#bf5ced
+#ff14b0
+#66c3e8
+#fcf88a
+#6a2099
+#ea4ff2
+#c708e0
+#d35d6c
\ No newline at end of file
diff --git a/nezha-fronted/src/components/common/js/radomcolor/randomcolor.js b/nezha-fronted/src/components/common/js/radomcolor/randomcolor.js
new file mode 100644
index 000000000..5fa123f79
--- /dev/null
+++ b/nezha-fronted/src/components/common/js/radomcolor/randomcolor.js
@@ -0,0 +1,322 @@
+export function randomcolor() {
+	var e = null,
+		t = {};
+	r("monochrome", null, [
+			[0, 0],
+			[100, 0]
+		]),
+		r("red", [-26, 18], [
+			[20, 100],
+			[30, 92],
+			[40, 89],
+			[50, 85],
+			[60, 78],
+			[70, 70],
+			[80, 60],
+			[90, 55],
+			[100, 50]
+		]),
+		r("orange", [19, 46], [
+			[20, 100],
+			[30, 93],
+			[40, 88],
+			[50, 86],
+			[60, 85],
+			[70, 70],
+			[100, 70]
+		]),
+		r("yellow", [47, 62], [
+			[25, 100],
+			[40, 94],
+			[50, 89],
+			[60, 86],
+			[70, 84],
+			[80, 82],
+			[90, 80],
+			[100, 75]
+		]),
+		r("green", [63, 178], [
+			[30, 100],
+			[40, 90],
+			[50, 85],
+			[60, 81],
+			[70, 74],
+			[80, 64],
+			[90, 50],
+			[100, 40]
+		]),
+		r("blue", [179, 257], [
+			[20, 100],
+			[30, 86],
+			[40, 80],
+			[50, 74],
+			[60, 60],
+			[70, 52],
+			[80, 44],
+			[90, 39],
+			[100, 35]
+		]),
+		r("purple", [258, 282], [
+			[20, 100],
+			[30, 87],
+			[40, 79],
+			[50, 70],
+			[60, 65],
+			[70, 59],
+			[80, 52],
+			[90, 45],
+			[100, 42]
+		]),
+		r("pink", [283, 334], [
+			[20, 100],
+			[30, 90],
+			[40, 86],
+			[60, 84],
+			[80, 80],
+			[90, 75],
+			[100, 73]
+		]);
+	var n = function(r) {
+		if (void 0 !== (r = r || {}).seed && null !== r.seed && r.seed === parseInt(r.seed, 10))
+			e = r.seed;
+		else if ("string" == typeof r.seed)
+			e = function(e) {
+				for (var t = 0, n = 0; n !== e.length && !(t >= Number.MAX_SAFE_INTEGER); n++)
+					t += e.charCodeAt(n);
+				return t
+			};
+			(r.seed);
+		else {
+			if (void 0 !== r.seed && null !== r.seed)
+				throw new TypeError("The seed value must be an integer or string");
+			e = null
+		}
+		var c,
+			l;
+		if (null !== r.count && void 0 !== r.count) {
+			var u = r.count,
+				d = [];
+			for (r.count = null; u > d.length;)
+				e && r.seed && (r.seed += 1), d.push(n(r));
+			return r.count = u,
+				d
+		}
+		return function(e, t) {
+				switch (t.format) {
+					case "hsvArray":
+						return e;
+					case "hslArray":
+						return a(e);
+					case "hsl":
+						var n = a(e);
+						return "hsl(" + n[0] + ", " + n[1] + "%, " + n[2] + "%)";
+					case "hsla":
+						var s = a(e),
+							o = t.alpha || Math.random();
+						return "hsla(" + s[0] + ", " + s[1] + "%, " + s[2] + "%, " + o + ")";
+					case "rgbArray":
+						return i(e);
+					case "rgb":
+						return "rgb(" + i(e).join(", ") + ")";
+					case "rgba":
+						var r = i(e);
+						o = t.alpha || Math.random();
+						return "rgba(" + r.join(", ") + ", " + o + ")";
+					default:
+						return function(e) {
+								var t = i(e);
+
+								function n(e) {
+									var t = e.toString(16);
+									return 1 == t.length ? "0" + t : t
+								}
+								return "#" + n(t[0]) + n(t[1]) + n(t[2])
+							};
+							(e)
+				}
+			};
+			([c = function(e) {
+					var n = o(function(e) {
+							if ("number" == typeof parseInt(e)) {
+								var n = parseInt(e);
+								if (n < 360 && n > 0)
+									return [n, n]
+							}
+							if ("string" == typeof e)
+								if (t[e]) {
+									var s = t[e];
+									if (s.hueRange)
+										return s.hueRange
+								} else if (e.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)) {
+								var o = function(e) {
+										e = 3 === (e = e.replace(/^#/, "")).length ? e.replace(/(.)/g, "$1$1") : e;
+										var t = parseInt(e.substr(0, 2), 16) / 255,
+											n = parseInt(e.substr(2, 2), 16) / 255,
+											s = parseInt(e.substr(4, 2), 16) / 255,
+											o = Math.max(t, n, s),
+											r = o - Math.min(t, n, s),
+											i = o ? r / o : 0;
+										switch (o) {
+											case t:
+												return [(n - s) / r % 6 * 60 || 0, i, o];
+											case n:
+												return [60 * ((s - t) / r + 2) || 0, i, o];
+											case s:
+												return [60 * ((t - n) / r + 4) || 0, i, o]
+										}
+									};
+									(e)[0];
+								return [o, o]
+							}
+							return [0, 360]
+						};
+						(e.hue));
+					n < 0 && (n = 360 + n);
+					return n
+				};
+				(r), l = function(e, t) {
+					if ("monochrome" === t.hue)
+						return 0;
+					if ("random" === t.luminosity)
+						return o([0, 100]);
+					var n = function(e) {
+							return s(e).saturationRange
+						};
+						(e),
+						r = n[0],
+						i = n[1];
+					switch (t.luminosity) {
+						case "bright":
+							r = 55;
+							break;
+						case "dark":
+							r = i - 10;
+							break;
+						case "light":
+							i = 55
+					}
+					return o([r, i])
+				};
+				(c, r),
+				function(e, t, n) {
+					var r = function(e, t) {
+							for (var n = s(e).lowerBounds, o = 0; o < n.length - 1; o++) {
+								var r = n[o][0],
+									i = n[o][1],
+									a = n[o + 1][0],
+									c = n[o + 1][1];
+								if (t >= r && t <= a) {
+									var l = (c - i) / (a - r);
+									return l * t + (i - l * r)
+								}
+							}
+							return 0
+						};
+						(e, t),
+						i = 100;
+					switch (n.luminosity) {
+						case "dark":
+							i = r + 20;
+							break;
+						case "light":
+							r = (i + r) / 2;
+							break;
+						case "random":
+							r = 0,
+								i = 100
+					}
+					return o([r, i])
+				};
+				(c, l, r)
+			], r)
+	};
+
+	function s(e) {
+		for (var n in e >= 334 && e <= 360 && (e -= 360), t) {
+			var s = t[n];
+			if (s.hueRange && e >= s.hueRange[0] && e <= s.hueRange[1])
+				return t[n]
+		}
+		return "Color not found"
+	}
+
+	function o(t) {
+		if (null === e)
+			return Math.floor(t[0] + Math.random() * (t[1] + 1 - t[0]));
+		var n = t[1] || 1,
+			s = t[0] || 0,
+			o = (e = (9301 * e + 49297) % 233280) / 233280;
+		return Math.floor(s + o * (n - s))
+	}
+
+	function r(e, n, s) {
+		var o = s[0][0],
+			r = s[s.length - 1][0],
+			i = s[s.length - 1][1],
+			a = s[0][1];
+		t[e] = {
+			hueRange: n,
+			lowerBounds: s,
+			saturationRange: [o, r],
+			brightnessRange: [i, a]
+		}
+	}
+
+	function i(e) {
+		var t = e[0];
+		0 === t && (t = 1),
+			360 === t && (t = 359),
+			t /= 360;
+		var n = e[1] / 100,
+			s = e[2] / 100,
+			o = Math.floor(6 * t),
+			r = 6 * t - o,
+			i = s * (1 - n),
+			a = s * (1 - r * n),
+			c = s * (1 - (1 - r) * n),
+			l = 256,
+			u = 256,
+			d = 256;
+		switch (o) {
+			case 0:
+				l = s,
+					u = c,
+					d = i;
+				break;
+			case 1:
+				l = a,
+					u = s,
+					d = i;
+				break;
+			case 2:
+				l = i,
+					u = s,
+					d = c;
+				break;
+			case 3:
+				l = i,
+					u = a,
+					d = s;
+				break;
+			case 4:
+				l = c,
+					u = i,
+					d = s;
+				break;
+			case 5:
+				l = s,
+					u = i,
+					d = a
+		}
+		return [Math.floor(255 * l), Math.floor(255 * u), Math.floor(255 * d)]
+	}
+
+	function a(e) {
+		var t = e[0],
+			n = e[1] / 100,
+			s = e[2] / 100,
+			o = (2 - n) * s;
+		return [t, Math.round(n * s / (o < 1 ? o : 2 - o) * 1e4) / 100, o / 2 * 100]
+	}
+	return n()
+}
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetric.vue b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
index d67b35daf..79608ca0c 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetric.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
@@ -120,7 +120,12 @@
   .dashboard-metric-dropdown .el-scrollbar__wrap{
     margin-bottom: 0px !important;
   }
-
+  .dashboard-metric-dropdown>.el-cascader-panel{
+    height:200px !important;
+  }
+  .metric-dropdown>.el-cascader-panel{
+    height:200px !important;
+  }
   .dashboard-metric-dropdown .el-cascader-menu:nth-child(1){
     min-width:80px !important;
   }
@@ -132,7 +137,6 @@
   }
 
   .label-cascader .el-cascader__tags{
-
     max-height:50px;
     overflow-y:auto;
     right:5px !important;
@@ -756,7 +760,7 @@ export default {
           value:item.name,
           label:item.name,
           children:[]
-        }
+        };
         if(valList && valList.length>0){
           valList.forEach((valuItem)=>{
             let disabled = false;
@@ -767,7 +771,7 @@ export default {
               value:valuItem,
               label:valuItem,
               disabled: disabled,
-            }
+            };
             labelOption.children.push(valOption);
           });
         }
@@ -997,7 +1001,7 @@ export default {
                     }
                   })
                 }
-              })
+              });
 
               const tagsArr = Object.keys(tag);//["__name__","asset","idc","instance","job","module","project"]
               let labelValList = [];