diff --git a/nezha-fronted/src/components/charts/chartDataFormat.js b/nezha-fronted/src/components/charts/chartDataFormat.js index be919df85..a66c29295 100644 --- a/nezha-fronted/src/components/charts/chartDataFormat.js +++ b/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; } } diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index 8486bb4c1..35d26c770 100644 --- 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 = `