perf:chart组件增加设置随机颜色方法

tip:当线条过多，默认颜色数量不够时须使用此方法

nezha-fronted/src/components/common/language/en.js

@@ -174,7 +174,7 @@ const en = {
       lastSevenDay:'Last 7 days',
       lastThirtyDay:'Last 30 days',
       refreshInterval:{
-        never:'OFF', //'从不'
+        never:'Off', //'从不'
         oneMinute:'1 minute', // 1 minute
         threeMinutes:'3 minutes', //'3分钟'
         fiveMinutes:'5 minutes', //'5分钟'

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

@@ -171,7 +171,7 @@
       selectInterval(val) {
         this.visible = false;
         clearInterval(this.intervalTimer);
-        if (val) {
+        if (val && val.value != -1) {
           this.interval = val;
           const start = new Date(this.searchTime[1]);
           const now = new Date();

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

@@ -22,7 +22,7 @@
                 <template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
               </pick-time>
             </div>
-            <div style="height: 100%;width: 100%;" >
+            <div style="height: calc(100% - 50px);width: 100%;" >
               <el-scrollbar style="height: 100%" class="el-scrollbar-large">
               <div class="expression-room right-margin" style="padding-top: 5px">
                 <!--坑，这个index居然是从1开始-->
@@ -292,6 +292,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
                   }
                 })
                 this.$refs.exploreChart.setLegend(legend);
+                this.$refs.exploreChart.setRandomColors(series.length)
                 this.$refs.exploreChart.setSeries(series)
               }
               this.defaultChartVisible = true;
@@ -511,7 +512,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
 
   .explore .chart-room {
     width: 100%;
-    height: 500px
+    height: 400px
   }
 
   .explore .chart-view, .table-view {

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

@@ -20,10 +20,10 @@
   import echarts from 'echarts';
   import chartDataFormat from "../../../charts/chartDataFormat";
   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";
+  import {randomcolor} from "../../../common/js/radomcolor/randomcolor";
   export default {
     name: "chart",
     components:{
@@ -41,9 +41,10 @@
     data(){
       return {
         chart:null,
-        option:{},
+        option:null,
-        chartId: this.name + new uuidv1()+'-'+new Date().getTime(),
+        chartId: this.name + '-'+this.guid()+'-'+new Date().getTime(),
         legend:[],
+        colors:chartConfig.getBgColorList(),
       }
     },
     created() {
@@ -86,7 +87,7 @@
         if (this.tooltipFormatter) {
           this.modifyOption('tooltip', 'formatter', this.tooltipFormatter)
         } else {
-          //this.modifyOption('tooltip', 'formatter', this.defaultTooltipFormatter)
+          this.modifyOption('tooltip', 'formatter', this.defaultTooltipFormatter)
         }
 
         if(this.chartType == 'line'){
@@ -140,7 +141,7 @@
         }
       },
       getBgColor:function(index){
-        let color=chartConfig.getBgColorList()[index];
+        let color=this.colors[index];
         return color;
       },
       clickLegend(legendName,index){
@@ -245,12 +246,27 @@
         let unit=chartDataFormat.getUnit(5);
         return unit.compute(value,index);
       },
+      setRandomColors:function(num){
+        let colors=[];
+        for(let i=0;i<num;i++){
+          colors.push(randomcolor())
+        }
+        this.colors=Object.assign([],colors)
+        this.option.color=colors;
+      },
       startLoading:function(){
         this.$refs.loading.startLoading();
       },
       endLoading:function(){
         this.$refs.loading.endLoading();
+      },
+      guid() {
+        function S4() {
+          return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
         }
+
+        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
+      },
     },
     mounted() {
       this.chart=echarts.init(document.getElementById(this.chartId));