diff --git a/web/public/js/components/server/metric-charts.js b/web/public/js/components/server/metric-charts.js
index 97a74923..69e35786 100644
--- a/web/public/js/components/server/metric-charts.js
+++ b/web/public/js/components/server/metric-charts.js
@@ -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
diff --git a/web/views/@default/dashboard/boards/index.css b/web/views/@default/dashboard/boards/index.css
index 59aa6592..28b730f2 100644
--- a/web/views/@default/dashboard/boards/index.css
+++ b/web/views/@default/dashboard/boards/index.css
@@ -30,4 +30,8 @@
 .chart-box {
   height: 20em;
 }
+h4 span {
+  font-size: 0.8em;
+  color: grey;
+}
 /*# sourceMappingURL=index.css.map */
\ No newline at end of file
diff --git a/web/views/@default/dashboard/boards/index.css.map b/web/views/@default/dashboard/boards/index.css.map
index d910f224..19ff90a8 100644
--- a/web/views/@default/dashboard/boards/index.css.map
+++ b/web/views/@default/dashboard/boards/index.css.map
@@ -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"}
\ No newline at end of file
+{"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"}
\ No newline at end of file
diff --git a/web/views/@default/dashboard/boards/index.less b/web/views/@default/dashboard/boards/index.less
index 64cb01cf..9a4e0b59 100644
--- a/web/views/@default/dashboard/boards/index.less
+++ b/web/views/@default/dashboard/boards/index.less
@@ -45,4 +45,11 @@
 
 .chart-box {
 	height: 20em;
+}
+
+h4 {
+	span {
+		font-size: 0.8em;
+		color: grey;
+	}
 }
\ No newline at end of file
diff --git a/web/views/@default/dashboard/index.css b/web/views/@default/dashboard/index.css
index 59aa6592..28b730f2 100644
--- a/web/views/@default/dashboard/index.css
+++ b/web/views/@default/dashboard/index.css
@@ -30,4 +30,8 @@
 .chart-box {
   height: 20em;
 }
+h4 span {
+  font-size: 0.8em;
+  color: grey;
+}
 /*# sourceMappingURL=index.css.map */
\ No newline at end of file
diff --git a/web/views/@default/dashboard/index.css.map b/web/views/@default/dashboard/index.css.map
index d910f224..19ff90a8 100644
--- a/web/views/@default/dashboard/index.css.map
+++ b/web/views/@default/dashboard/index.css.map
@@ -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"}
\ No newline at end of file
+{"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"}
\ No newline at end of file
diff --git a/web/views/@default/dashboard/index.less b/web/views/@default/dashboard/index.less
index 64cb01cf..9a4e0b59 100644
--- a/web/views/@default/dashboard/index.less
+++ b/web/views/@default/dashboard/index.less
@@ -45,4 +45,11 @@
 
 .chart-box {
 	height: 20em;
+}
+
+h4 {
+	span {
+		font-size: 0.8em;
+		color: grey;
+	}
 }
\ No newline at end of file