优化界面

web/public/js/components/server/metric-charts.js

@@ -14,16 +14,20 @@ Vue.component("metric-chart", {
 				return v.value
 			})
 			if (sum < stats[0].total) {
-				stats.push({
-					keys: ["其他"],
-					value: stats[0].total - sum,
-					total: stats[0].total,
-					time: stats[0].time
-				})
+				if (this.vChart.type == "pie") {
+					stats.push({
+						keys: ["其他"],
+						value: stats[0].total - sum,
+						total: stats[0].total,
+						time: stats[0].time
+					})
+				}
 			}
 		}
 		if (this.vChart.maxItems > 0) {
 			stats = stats.slice(0, this.vChart.maxItems)
+		} else {
+			stats = stats.slice(0, 10)
 		}
 
 		stats.$rsort(function (v1, v2) {
@@ -55,6 +59,9 @@ Vue.component("metric-chart", {
 		},
 		render: function (el) {
 			let chart = echarts.init(el)
+			window.addEventListener("resize", function () {
+				chart.resize()
+			})
 			switch (this.chart.type) {
 				case "pie":
 					this.renderPie(chart)
@@ -271,6 +278,15 @@ Vue.component("metric-chart", {
 					})
 					break
 			}
+			let bottom = 24
+			let rotate = 0
+			let result = teaweb.xRotation(chart, this.stats.map(function (v) {
+				return v.keys[0]
+			}))
+			if (result != null) {
+				bottom = result[0]
+				rotate = result[1]
+			}
 			let that = this
 			chart.setOption({
 				xAxis: {
@@ -278,7 +294,8 @@ Vue.component("metric-chart", {
 						return v.keys[0]
 					}),
 					axisLabel: {
-						interval: 0
+						interval: 0,
+						rotate: rotate
 					}
 				},
 				tooltip: {
@@ -310,7 +327,7 @@ Vue.component("metric-chart", {
 					left: 40,
 					top: 10,
 					right: 20,
-					bottom: 25
+					bottom: bottom
 				},
 				series: [
 					{
@@ -327,6 +344,19 @@ Vue.component("metric-chart", {
 					}
 				]
 			})
+
+			// IP相关操作
+			if (this.item.keys != null && this.item.keys.$contains("${remoteAddr}")) {
+				let that = this
+				chart.on("click", function (args) {
+					let index = that.item.keys.$indexesOf("${remoteAddr}")[0]
+					let value = that.stats[args.dataIndex].keys[index]
+					teaweb.popup("/servers/ipbox?ip=" + value, {
+						width: "50em",
+						height: "30em"
+					})
+				})
+			}
 		},
 		renderTable: function (chart) {
 			let table = `<table class="ui table celled">

web/public/js/utils.js

@@ -410,16 +410,24 @@ window.teaweb = {
 		}
 		let click = options.click
 
+		let bottom = 24
+		let rotate = 0
 		let chartBox = document.getElementById(chartId)
 		if (chartBox == null) {
 			return
 		}
-		let chart = echarts.init(chartBox)
+		let chart = this.initChart(chartBox)
+		let result = this.xRotation(chart, values.map(xFunc))
+		if (result != null) {
+			bottom = result[0]
+			rotate = result[1]
+		}
 		let option = {
 			xAxis: {
 				data: values.map(xFunc),
 				axisLabel: {
-					interval: 0
+					interval: 0,
+					rotate: rotate
 				}
 			},
 			yAxis: {
@@ -440,7 +448,7 @@ window.teaweb = {
 				left: 40,
 				top: 10,
 				right: 20,
-				bottom: 24
+				bottom: bottom
 			},
 			series: [
 				{
@@ -478,7 +486,7 @@ window.teaweb = {
 		if (chartBox == null) {
 			return
 		}
-		let chart = echarts.init(chartBox)
+		let chart = this.initChart(chartBox)
 		let option = {
 			xAxis: {
 				data: values.map(xFunc),
@@ -522,6 +530,25 @@ window.teaweb = {
 		}
 		chart.setOption(option)
 		chart.resize()
+	},
+	xRotation: function (chart, names) {
+		let chartWidth = chart.getWidth()
+		let width = 0
+		names.forEach(function (name) {
+			width += name.length * 10
+		})
+		if (width <= chartWidth) {
+			return null
+		}
+
+		return [40, -20]
+	},
+	initChart: function (dom) {
+		let instance = echarts.init(dom)
+		window.addEventListener("resize", function () {
+			instance.resize()
+		})
+		return instance
 	}
 }
 
@@ -537,4 +564,4 @@ String.prototype.quoteIP = function () {
 		return ip
 	}
 	return "[" + ip + "]"
-}
+}