feat：修改y轴显示数值

2020-09-22 09:41:17 +08:00
parent 0c59fd7031
commit 2a1df14e5f
5 changed files with 158 additions and 29 deletions
--- a/nezha-fronted/src/components/charts/chartDataFormat.js
+++ b/nezha-fronted/src/components/charts/chartDataFormat.js
@@ -12,6 +12,7 @@ function short(value,index,type=1,dot){
  if(type == 1){
    return asciiCompute(value,1000,[' ','K','Mil','Bil','Til','Quadrillion','Quintillion'],0)
  }else if(type == -1){
+    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)
@@ -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;
  }
 }
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/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);
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -725,6 +725,7 @@
    height: 50px;
    background-color: #232f3e;
    z-index: 1;
+
  }

  .menu-create {
--- a/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
+++ b/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;
        }
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/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:{