优化指标图表

This commit is contained in:
刘祥超
2021-07-19 18:19:33 +08:00
parent 4ecba0040a
commit c16c6ea6a6
7 changed files with 65 additions and 14 deletions

View File

@@ -91,7 +91,13 @@ Vue.component("metric-chart", {
if (stat.total > 0) {
percent = Math.round((stat.value * 100 / stat.total) * 100) / 100
}
return stat.keys[0] + ":" + stat.value + ",占比:" + percent + "%"
let value = stat.value
switch (that.item.valueType) {
case "byte":
value = teaweb.formatBytes(value)
break
}
return stat.keys[0] + ": " + value + ",占比:" + percent + "%"
}
},
series: [
@@ -120,7 +126,7 @@ Vue.component("metric-chart", {
return v
})
break
case "bytes":
case "byte":
axis = teaweb.bytesAxis(values, function (v) {
return v
})
@@ -146,14 +152,20 @@ Vue.component("metric-chart", {
trigger: "item",
formatter: function (data) {
let stat = that.stats[data.dataIndex]
return that.formatTime(stat.time) + ": " + stat.value
let value = stat.value
switch (that.item.valueType) {
case "byte":
value = teaweb.formatBytes(value)
break
}
return that.formatTime(stat.time) + ": " + value
}
},
grid: {
left: 50,
top: 10,
right: 20,
bottom: 20
bottom: 25
},
series: [
{
@@ -186,7 +198,7 @@ Vue.component("metric-chart", {
return v
})
break
case "bytes":
case "byte":
axis = teaweb.bytesAxis(values, function (v) {
return v
})
@@ -212,14 +224,20 @@ Vue.component("metric-chart", {
trigger: "item",
formatter: function (data) {
let stat = that.stats[data.dataIndex]
return that.formatTime(stat.time) + ": " + stat.value
let value = stat.value
switch (that.item.valueType) {
case "byte":
value = teaweb.formatBytes(value)
break
}
return that.formatTime(stat.time) + ": " + value
}
},
grid: {
left: 50,
top: 10,
right: 20,
bottom: 20
bottom: 25
},
series: [
{
@@ -247,13 +265,12 @@ Vue.component("metric-chart", {
return v
})
break
case "bytes":
case "byte":
axis = teaweb.bytesAxis(values, function (v) {
return v
})
break
}
let that = this
chart.setOption({
xAxis: {
@@ -273,7 +290,13 @@ Vue.component("metric-chart", {
if (stat.total > 0) {
percent = Math.round((stat.value * 100 / stat.total) * 100) / 100
}
return stat.keys[0] + ": " + stat.value + ",占比:" + percent + "%"
let value = stat.value
switch (that.item.valueType) {
case "byte":
value = teaweb.formatBytes(value)
break
}
return stat.keys[0] + ": " + value + ",占比:" + percent + "%"
}
},
yAxis: {
@@ -287,7 +310,7 @@ Vue.component("metric-chart", {
left: 40,
top: 10,
right: 20,
bottom: 20
bottom: 25
},
series: [
{
@@ -315,7 +338,13 @@ Vue.component("metric-chart", {
</tr>
</thead>`
this.stats.forEach(function (v) {
table += "<tr><td>" + v.keys[0] + "</td><td>" + v.value + "</td>"
let value = v.value
switch (that.item.valueType) {
case "byte":
value = teaweb.formatBytes(value)
break
}
table += "<tr><td>" + v.keys[0] + "</td><td>" + value + "</td>"
let percent = 0
if (v.total > 0) {
percent = Math.round((v.value * 100 / v.total) * 100) / 100

View File

@@ -30,4 +30,8 @@
.chart-box {
height: 20em;
}
h4 span {
font-size: 0.8em;
color: grey;
}
/*# sourceMappingURL=index.css.map */

View File

@@ -1 +1 @@
{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,GAAG,QACF,EACC;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAKH;EACC,0BAAA;EACA,2BAAA;;AAFD,KAIC;EACC,kBAAA;EACA,4BAAA;;AANF,KAIC,QAIC,IAAG;EACF,iBAAA;;AATH,KAIC,QAIC,IAAG,MAGF;EACC,cAAA;EACA,mBAAA;;AAbJ,KAkBC,QAAO;EACN,eAAA;;AAnBF,KAsBC,GACC;EACC,aAAA;;AAxBH,KA4BC,QAAO,MACN;EACC,eAAA;;AAKH;EACC,YAAA","file":"index.css"}
{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,GAAG,QACF,EACC;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAKH;EACC,0BAAA;EACA,2BAAA;;AAFD,KAIC;EACC,kBAAA;EACA,4BAAA;;AANF,KAIC,QAIC,IAAG;EACF,iBAAA;;AATH,KAIC,QAIC,IAAG,MAGF;EACC,cAAA;EACA,mBAAA;;AAbJ,KAkBC,QAAO;EACN,eAAA;;AAnBF,KAsBC,GACC;EACC,aAAA;;AAxBH,KA4BC,QAAO,MACN;EACC,eAAA;;AAKH;EACC,YAAA;;AAGD,EACC;EACC,gBAAA;EACA,WAAA","file":"index.css"}

View File

@@ -45,4 +45,11 @@
.chart-box {
height: 20em;
}
h4 {
span {
font-size: 0.8em;
color: grey;
}
}

View File

@@ -30,4 +30,8 @@
.chart-box {
height: 20em;
}
h4 span {
font-size: 0.8em;
color: grey;
}
/*# sourceMappingURL=index.css.map */

View File

@@ -1 +1 @@
{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,GAAG,QACF,EACC;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAKH;EACC,0BAAA;EACA,2BAAA;;AAFD,KAIC;EACC,kBAAA;EACA,4BAAA;;AANF,KAIC,QAIC,IAAG;EACF,iBAAA;;AATH,KAIC,QAIC,IAAG,MAGF;EACC,cAAA;EACA,mBAAA;;AAbJ,KAkBC,QAAO;EACN,eAAA;;AAnBF,KAsBC,GACC;EACC,aAAA;;AAxBH,KA4BC,QAAO,MACN;EACC,eAAA;;AAKH;EACC,YAAA","file":"index.css"}
{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,GAAG,QACF,EACC;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAKH;EACC,0BAAA;EACA,2BAAA;;AAFD,KAIC;EACC,kBAAA;EACA,4BAAA;;AANF,KAIC,QAIC,IAAG;EACF,iBAAA;;AATH,KAIC,QAIC,IAAG,MAGF;EACC,cAAA;EACA,mBAAA;;AAbJ,KAkBC,QAAO;EACN,eAAA;;AAnBF,KAsBC,GACC;EACC,aAAA;;AAxBH,KA4BC,QAAO,MACN;EACC,eAAA;;AAKH;EACC,YAAA;;AAGD,EACC;EACC,gBAAA;EACA,WAAA","file":"index.css"}

View File

@@ -45,4 +45,11 @@
.chart-box {
height: 20em;
}
h4 {
span {
font-size: 0.8em;
color: grey;
}
}