feat：修改y轴显示数值

nezha-fronted/src/components/charts/chartDataFormat.js

@@ -10,11 +10,12 @@ function none(value, index){
 }
 function short(value,index,type=1,dot){
   if(type == 1){
-    return asciiCompute(value,1000,['','K','Mil','Bil','Til','Quadrillion','Quintillion'],0)
+    return asciiCompute(value,1000,[' ','K','Mil','Bil','Til','Quadrillion','Quintillion'],0)
   }else if(type == -1){
-    return asciiCompute(value,1000,['','K','Mil','Bil','Til','Quadrillion','Quintillion'],dot)
+    console.log(value);
+    return asciiCompute(value,1000,[' ','K','Mil','Bil','Til','Quadrillion','Quintillion'],dot)
   }else{
-    return asciiCompute(value,1000,['','K','Mil','Bil','Til','Quadrillion','Quintillion'],2)
+    return asciiCompute(value,1000,[' ','K','Mil','Bil','Til','Quadrillion','Quintillion'],2)
   }
 
 }
@@ -316,7 +317,7 @@ function days(value,index,type=1,dot){
 function asciiCompute(num,ascii,units,dot=2){
   num=Number(num)
   let carry=0;
-  if(num > 0){
+  if(num > 1){
     let log=Math.log(num)/Math.log(ascii)
     carry = parseInt(log)
     num = num / Math.pow(ascii,carry)
@@ -446,37 +447,37 @@ let unitOptions=[
       {
         value:6,
         compute:bits,
-        label:'bits'
+        label:'bits',
       },
       {
         value:7,
         compute:bytes,
-        label:'bytes'
+        label:'bytes',
       },
       {
         value:8,
         compute:kilobytes,
-        label:'kilobytes'
+        label:'kilobytes',
       },
       {
         value:9,
         compute:megabytes,
-        label:'megabytes'
+        label:'megabytes',
       },
       {
         value:10,
         compute:gigabytes,
-        label:'gigabytes'
+        label:'gigabytes',
       },
       {
         value:11,
         compute:terabytes,
-        label:'terabytes'
+        label:'terabytes',
       },
       {
         value:12,
         compute:petabytes,
-        label:'petabytes'
+        label:'petabytes',
       }
     ]
   },//Data end
@@ -487,47 +488,47 @@ let unitOptions=[
       {
         value:13,
         compute:packetsSec,
-        label:'packets/sec'
+        label:'packets/sec',
       },
       {
         value:14,
         compute:bitsSec,
-        label:'bits/sec'
+        label:'bits/sec',
       },
       {
         value:15,
         compute:bytesSec,
-        label:'bytes/sec'
+        label:'bytes/sec',
       },
       {
         value:16,
         compute:kilobytesSec,
-        label:'kilobytes/sec'
+        label:'kilobytes/sec',
       },
       {
         value:17,
         compute:kilobitsSec,
-        label:'kilobits/sec'
+        label:'kilobits/sec',
       },
       {
         value:18,
         compute:megabytesSec,
-        label:'megabytes/sec'
+        label:'megabytes/sec',
       },
       {
         value:19,
         compute:megabitsSec,
-        label:'megabits/sec'
+        label:'megabits/sec',
       },
       {
         value:20,
         compute:gigabytesSec,
-        label:'gigabytes/sec'
+        label:'gigabytes/sec',
       },
       {
         value:21,
         compute:gigabitsSec,
-        label:'gigabits/sec'
+        label:'gigabits/sec',
       },
       {
         value:22,
@@ -617,7 +618,7 @@ export default {
     if(units.length < 1){
       unitOptions.forEach((item,index)=>{
         item.children.forEach((n,i)=>{
-          units.push(n);
+          units.push({...n,type:item.label});
         })
       })
     }
@@ -625,5 +626,79 @@ export default {
   },
   formatData:function(value,unit){
     return this.getUnit(unit).compute(value,null,2)
+  },
+  formatDatas:function(value,type,flow='ceil'){
+    let pow=0;
+    if(type ==='Time'){
+      return value
+    }
+    
+    if(type==='Data' || type==='DataRate'){
+     if(value>1){
+       while(value>1000){
+         pow++;
+         value=value/1000
+       }
+  
+       if(flow==='ceil'){
+         let length=JSON.stringify(Math.ceil(value)).length;
+         value=value/Math.pow(10,length-1);
+         return Math.ceil(value)*Math.pow(1024,pow)*Math.pow(10,length-1);
+       }else if(flow==='floor'){
+         let length=JSON.stringify(Math.floor(value)).length;
+         value=value/Math.pow(10,length-1);
+         return Math.floor(value)*Math.pow(1024,pow)*Math.pow(10,length-1);
+       }
+     }else{
+       return value
+     }
+    }
+  
+    if(type==='Misc'){
+      if(value>1){
+        while(value>1000){
+          pow++;
+          value=value/1000
+        }
+      
+        if(flow==='ceil'){
+          let length=JSON.stringify(Math.ceil(value)).length;
+          value=value/Math.pow(10,length-1);
+          return Math.ceil(value)*Math.pow(1000,pow)*Math.pow(10,length-1);
+        }else if(flow==='floor'){
+          let length=JSON.stringify(Math.floor(value)).length;
+          value=value/Math.pow(10,length-1);
+          return Math.floor(value)*Math.pow(1000,pow)*Math.pow(10,length-1);
+        }
+      }else{
+        return value
+      }
+    }
+    
+    return value;
+    
+  },
+  copies:function(value){
+    switch(parseInt(value)){
+      case 1: return 5;
+      case 2: return 2;
+      case 3: return 3;
+      case 4: return 4;
+      case 5: return 5;
+      case 6: return 3;
+      case 7: return 7;
+      case 8: return 8;
+      case 9: return 3;
+      case 10: return 5;
+    }
+  },
+  Interval:function(value,copies,type){
+    if(type==='Data' || type==='DataRate' || type==='Misc'){
+      let interVal=value/copies;
+      interVal = interVal || 1;
+      console.log(interVal);
+      return interVal
+    }
+    return 1;
   }
 }

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

@@ -397,6 +397,7 @@
       },
       // chartSite用于区分是全屏显示还是局部显示
       initChart(chartInfo, dataArg, ele, chartSite,legend) {
+        console.log(dataArg);
         this.chartInfo=chartInfo;
         const self = this;
         this.chartType = ''; // 图表类型
@@ -404,7 +405,7 @@
           this.chartType = 'line';
         }
         let minTime = null;
-        let maxTime = null
+        let maxTime = null;
         if(dataArg.length>0 && dataArg[0].data
           && dataArg[0].data.length>0 && dataArg[0].data[0].length>0){
           let len = dataArg[0].data.length-1;
@@ -435,6 +436,48 @@
         };
         let stackIconBorderColor = (chartInfo.type==='stackArea'?'#53a3cb':'#7e7e7e');
         let stackIconChooseBorderColor = (chartInfo.type==='stackArea'?'#7e7e7e':'#53a3cb');
+        console.log(chartInfo, dataArg, chartSite,legend);
+        let maxValue='';
+        let minValue='';
+        if(chartInfo.type==='line' && chartInfo.unit){
+          maxValue=dataArg[0].data[0][1];
+          minValue=dataArg[0].data[0][1];
+          for(let j = 0; j < dataArg.length ; j++){
+            for (let i = 0; i < dataArg[j].data.length - 1; i++) {
+              maxValue = (maxValue < dataArg[j].data[i+1][1] ? dataArg[j].data[i+1][1] : maxValue);
+              minValue = (minValue > dataArg[j].data[i+1][1] ? dataArg[j].data[i+1][1] : minValue);
+            }
+          }
+        }
+        let chartUnit=chartInfo.unit?chartInfo.unit:2;
+        let unit=chartDataFormat.getUnit(chartUnit);
+        maxValue=chartDataFormat.formatDatas(maxValue,unit.type,'ceil');
+        minValue=chartDataFormat.formatDatas(minValue,unit.type,'floor');
+        let oldValue=maxValue;
+        console.log(maxValue,'123123');
+        let dot=0;
+        if(maxValue==1){
+          dot++;
+        }
+        if(oldValue>10){
+          while(oldValue>10){
+            oldValue=oldValue/10;
+          }
+        }else if(oldValue<1&&maxValue!==0){
+          while(oldValue<1&&oldValue>0){
+            oldValue=oldValue*10;
+            dot++;
+          }
+          maxValue=Math.ceil(oldValue)/Math.pow(10,dot);
+          dot++;
+        }
+        let copies=chartDataFormat.copies(oldValue);
+        console.log(oldValue,copies,maxValue)
+        let oldDot=2;
+        if(maxValue<=1){
+          oldDot=dot>6?6:dot;
+        }
+        // console.log(unit.compute(maxValue),unit.compute(minValue));
         var option = {
           title:{
             show:false,
@@ -532,7 +575,6 @@
             formatter:function(params){
               //display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;
               let str = `<div>`;
-
               //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;'>`;
               let sum = 0;
               params.forEach((item, i) => {
@@ -553,7 +595,7 @@
                 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: ${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 += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,-1,oldDot);
                 str += `</div>`;
                 str += `</div>`;
               });
@@ -693,11 +735,12 @@
                 width: 1
               }
             },
+            // maxInterval:{},
             //去掉y轴--start
             axisLine:{
               show:false
             },
-            minInterval: 1,
+            minInterval: chartDataFormat.Interval(maxValue,copies,unit.type),
             axisTick: {
               show: false,
             },
@@ -709,8 +752,10 @@
                 let chartUnit=chartInfo.unit;
                 chartUnit=chartUnit?chartUnit:2;
                 let unit=chartDataFormat.getUnit(chartUnit);
+                console.log(value);
+                // console.log(value,unit,unit.compute(value,index),123);
                 //console.info(value, chartUnit, unit.compute(value,index))
-                return unit.compute(value,index);
+                return unit.compute(value,index,-1,dot);
               },
             },
             //boundaryGap:[0,0.2]
@@ -718,8 +763,10 @@
           useUTC: false,//使用本地时间
           series: dataArg
         };
+
         // params.series = dataArg;
         if (chartSite === 'local') { // 本地显示
+          console.log(legend,'legend');
           if(legend){
             this.legendList = [];
             legend.forEach((item, i) => {
@@ -1376,6 +1423,7 @@
         this.divFirstShow = true;
       },
       dealLegendAlias:function(legend,expression){
+        console.log(legend,expression,'123123');
         if(/\{\{.+\}\}/.test(expression)){
           let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
             let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2);

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

@@ -725,6 +725,7 @@
     height: 50px;
     background-color: #232f3e;
     z-index: 1;
+
   }
 
   .menu-create {

nezha-fronted/src/components/common/project/popData/expressionInfo.vue

@@ -13,7 +13,7 @@
               <span class="expressions-box-value" style="font-weight: bold">Value</span>
             </div>
             <div v-for="item1 in item.value" class="expressions-metric">
-              <span class="expressions-box-label">{{legendFormat(item.metric,item.legend)}}</span>
+              <span class="expressions-box-label">{{legendFormat(item.metric,item.legend,item1.metric)}}</span>
               <span class="expressions-box-value">{{ dataFormat(item.unit,item1.value[1])}}</span>
             </div>
           </div>
@@ -85,7 +85,8 @@
       dataFormat(unit,value){
         return chartDataFormat.getUnit(unit?unit:2).compute(value)
       },
-      legendFormat:function(legend,expression){
+      legendFormat:function(legend,expression,metric){
+        console.log(metric)
         if(/\{\{.+\}\}/.test(expression)&&expression){
           let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
             let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2);
@@ -97,7 +98,7 @@
             }
             return value?value:label;
           });
-          return labelValue
+          return metric[labelValue]?metric[labelValue]:labelValue
         }else{
           return expression?expression:legend;
         }

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

@@ -57,6 +57,7 @@
     },
     created() {
       this.option=chartConfig.getOption(this.chartType);
+      console.log(this.option);
       if(this.showToolbox == false){
         //this.option.grid.top = 10;
       }
@@ -158,6 +159,7 @@
           this.noData=false;
           this.chart.clear();
           this.optionSeriesAll=[...this.option.series];
+          console.log( this.optionSeriesAll);
           if(this.option.series instanceof Array){
             this.option.series=this.option.series.filter((item,index)=>index<this.dataSize);
           }
@@ -374,6 +376,7 @@
         let option={
           series:this.optionSeriesAll
         };
+        console.log(option);
         this.chart.setOption(option);
         this.chart.resize()
       },
@@ -384,6 +387,7 @@
     mounted() {
       this.chartInit();
       EleResize.on(this.$el, this.resize, this.chartType);
+      console.log(this.chartType)
     },
     watch:{