增加服务流量统计

internal/rpc/rpc_client.go

@@ -131,6 +131,10 @@ func (this *RPCClient) ServerHTTPFirewallDailyStatRPC() pb.ServerHTTPFirewallDai
 	return pb.NewServerHTTPFirewallDailyStatServiceClient(this.pickConn())
 }
 
+func (this *RPCClient) ServerDailyStatRPC() pb.ServerDailyStatServiceClient {
+	return pb.NewServerDailyStatServiceClient(this.pickConn())
+}
+
 func (this *RPCClient) ServerGroupRPC() pb.ServerGroupServiceClient {
 	return pb.NewServerGroupServiceClient(this.pickConn())
 }

internal/web/actions/default/servers/server/stat/index.go

@@ -1,12 +1,12 @@
+// Copyright 2021 Liuxiangchao iwind.liu@gmail.com. All rights reserved.
+
 package stat
 
 import (
 	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
-	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/dao"
 	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
-	"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs"
 	"github.com/iwind/TeaGo/maps"
-	timeutil "github.com/iwind/TeaGo/utils/time"
+	"sort"
 )
 
 type IndexAction struct {
@@ -20,140 +20,34 @@ func (this *IndexAction) Init() {
 
 func (this *IndexAction) RunGet(params struct {
 	ServerId int64
-	Month    string
 }) {
-	month := params.Month
-	if len(month) != 6 {
-		month = timeutil.Format("Ym")
-	}
-	this.Data["month"] = month
-
-	serverTypeResp, err := this.RPC().ServerRPC().FindEnabledServerType(this.AdminContext(), &pb.FindEnabledServerTypeRequest{ServerId: params.ServerId})
-	if err != nil {
-		this.ErrorPage(err)
-		return
-	}
-	serverType := serverTypeResp.Type
-
-	statIsOn := false
-
-	// 是否已开启
-	if serverconfigs.IsHTTPServerType(serverType) {
-		webConfig, err := dao.SharedHTTPWebDAO.FindWebConfigWithServerId(this.AdminContext(), params.ServerId)
-		if err != nil {
-			this.ErrorPage(err)
-			return
-		}
-		if webConfig != nil && webConfig.StatRef != nil {
-			statIsOn = webConfig.StatRef.IsOn
-		}
-	} else {
-		this.WriteString("此类型服务暂不支持统计")
-		return
-	}
-
-	this.Data["statIsOn"] = statIsOn
-
-	// 统计数据
-	countryStatMaps := []maps.Map{}
-	provinceStatMaps := []maps.Map{}
-	cityStatMaps := []maps.Map{}
-
-	if statIsOn {
-		// 地区
 	{
-			resp, err := this.RPC().ServerRegionCountryMonthlyStatRPC().FindTopServerRegionCountryMonthlyStats(this.AdminContext(), &pb.FindTopServerRegionCountryMonthlyStatsRequest{
+		resp, err := this.RPC().ServerDailyStatRPC().FindServerHourlyStats(this.AdminContext(), &pb.FindServerHourlyStatsRequest{
-				Month:    month,
 			ServerId: params.ServerId,
-				Offset:   0,
+			Hours:    24,
-				Size:     10,
 		})
 		if err != nil {
 			this.ErrorPage(err)
 			return
 		}
+
+		sort.Slice(resp.Stats, func(i, j int) bool {
+			stat1 := resp.Stats[i]
+			stat2 := resp.Stats[j]
+			return stat1.Hour < stat2.Hour
+		})
+		statMaps := []maps.Map{}
 		for _, stat := range resp.Stats {
-				countryStatMaps = append(countryStatMaps, maps.Map{
+			statMaps = append(statMaps, maps.Map{
-					"count": stat.Count,
+				"day":                 stat.Hour[:4] + "-" + stat.Hour[4:6] + "-" + stat.Hour[6:8],
-					"country": maps.Map{
+				"hour":                stat.Hour[8:],
-						"id":   stat.RegionCountry.Id,
+				"bytes":               stat.Bytes,
-						"name": stat.RegionCountry.Name,
+				"cachedBytes":         stat.CachedBytes,
-					},
+				"countRequests":       stat.CountRequests,
+				"countCachedRequests": stat.CountCachedRequests,
 			})
 		}
-		}
+		this.Data["hourlyStats"] = statMaps
-
-		// 省份
-		{
-			resp, err := this.RPC().ServerRegionProvinceMonthlyStatRPC().FindTopServerRegionProvinceMonthlyStats(this.AdminContext(), &pb.FindTopServerRegionProvinceMonthlyStatsRequest{
-				Month:    month,
-				ServerId: params.ServerId,
-				Offset:   0,
-				Size:     10,
-			})
-			if err != nil {
-				this.ErrorPage(err)
-				return
-			}
-			for _, stat := range resp.Stats {
-				provinceStatMaps = append(provinceStatMaps, maps.Map{
-					"count": stat.Count,
-					"country": maps.Map{
-						"id":   stat.RegionCountry.Id,
-						"name": stat.RegionCountry.Name,
-					},
-					"province": maps.Map{
-						"id":   stat.RegionProvince.Id,
-						"name": stat.RegionProvince.Name,
-					},
-				})
-			}
-		}
-
-		// 城市
-		{
-			resp, err := this.RPC().ServerRegionCityMonthlyStatRPC().FindTopServerRegionCityMonthlyStats(this.AdminContext(), &pb.FindTopServerRegionCityMonthlyStatsRequest{
-				Month:    month,
-				ServerId: params.ServerId,
-				Offset:   0,
-				Size:     10,
-			})
-			if err != nil {
-				this.ErrorPage(err)
-				return
-			}
-			for _, stat := range resp.Stats {
-				cityStatMaps = append(cityStatMaps, maps.Map{
-					"count": stat.Count,
-					"country": maps.Map{
-						"id":   stat.RegionCountry.Id,
-						"name": stat.RegionCountry.Name,
-					},
-					"province": maps.Map{
-						"id":   stat.RegionProvince.Id,
-						"name": stat.RegionProvince.Name,
-					},
-					"city": maps.Map{
-						"id":   stat.RegionCity.Id,
-						"name": stat.RegionCity.Name,
-					},
-				})
-			}
-		}
-	}
-
-	this.Data["countryStats"] = countryStatMaps
-	this.Data["provinceStats"] = provinceStatMaps
-	this.Data["cityStats"] = cityStatMaps
-
-	// 记录最近使用
-	_, err = this.RPC().LatestItemRPC().IncreaseLatestItem(this.AdminContext(), &pb.IncreaseLatestItemRequest{
-		ItemType: "server",
-		ItemId:   params.ServerId,
-	})
-	if err != nil {
-		this.ErrorPage(err)
-		return
 	}
 
 	this.Show()

internal/web/actions/default/servers/server/stat/init.go

@@ -14,6 +14,7 @@ func init() {
 			Helper(serverutils.NewServerHelper()).
 			Prefix("/servers/server/stat").
 			Get("", new(IndexAction)).
+			Get("/regions", new(RegionsAction)).
 			Get("/providers", new(ProvidersAction)).
 			Get("/clients", new(ClientsAction)).
 			Get("/waf", new(WafAction)).

internal/web/actions/default/servers/server/stat/regions.go

@@ -0,0 +1,160 @@
+package stat
+
+import (
+	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
+	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/dao"
+	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
+	"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs"
+	"github.com/iwind/TeaGo/maps"
+	timeutil "github.com/iwind/TeaGo/utils/time"
+)
+
+type RegionsAction struct {
+	actionutils.ParentAction
+}
+
+func (this *RegionsAction) Init() {
+	this.Nav("", "stat", "")
+	this.SecondMenu("region")
+}
+
+func (this *RegionsAction) RunGet(params struct {
+	ServerId int64
+	Month    string
+}) {
+	month := params.Month
+	if len(month) != 6 {
+		month = timeutil.Format("Ym")
+	}
+	this.Data["month"] = month
+
+	serverTypeResp, err := this.RPC().ServerRPC().FindEnabledServerType(this.AdminContext(), &pb.FindEnabledServerTypeRequest{ServerId: params.ServerId})
+	if err != nil {
+		this.ErrorPage(err)
+		return
+	}
+	serverType := serverTypeResp.Type
+
+	statIsOn := false
+
+	// 是否已开启
+	if serverconfigs.IsHTTPServerType(serverType) {
+		webConfig, err := dao.SharedHTTPWebDAO.FindWebConfigWithServerId(this.AdminContext(), params.ServerId)
+		if err != nil {
+			this.ErrorPage(err)
+			return
+		}
+		if webConfig != nil && webConfig.StatRef != nil {
+			statIsOn = webConfig.StatRef.IsOn
+		}
+	} else {
+		this.WriteString("此类型服务暂不支持统计")
+		return
+	}
+
+	this.Data["statIsOn"] = statIsOn
+
+	// 统计数据
+	countryStatMaps := []maps.Map{}
+	provinceStatMaps := []maps.Map{}
+	cityStatMaps := []maps.Map{}
+
+	if statIsOn {
+		// 地区
+		{
+			resp, err := this.RPC().ServerRegionCountryMonthlyStatRPC().FindTopServerRegionCountryMonthlyStats(this.AdminContext(), &pb.FindTopServerRegionCountryMonthlyStatsRequest{
+				Month:    month,
+				ServerId: params.ServerId,
+				Offset:   0,
+				Size:     10,
+			})
+			if err != nil {
+				this.ErrorPage(err)
+				return
+			}
+			for _, stat := range resp.Stats {
+				countryStatMaps = append(countryStatMaps, maps.Map{
+					"count": stat.Count,
+					"country": maps.Map{
+						"id":   stat.RegionCountry.Id,
+						"name": stat.RegionCountry.Name,
+					},
+				})
+			}
+		}
+
+		// 省份
+		{
+			resp, err := this.RPC().ServerRegionProvinceMonthlyStatRPC().FindTopServerRegionProvinceMonthlyStats(this.AdminContext(), &pb.FindTopServerRegionProvinceMonthlyStatsRequest{
+				Month:    month,
+				ServerId: params.ServerId,
+				Offset:   0,
+				Size:     10,
+			})
+			if err != nil {
+				this.ErrorPage(err)
+				return
+			}
+			for _, stat := range resp.Stats {
+				provinceStatMaps = append(provinceStatMaps, maps.Map{
+					"count": stat.Count,
+					"country": maps.Map{
+						"id":   stat.RegionCountry.Id,
+						"name": stat.RegionCountry.Name,
+					},
+					"province": maps.Map{
+						"id":   stat.RegionProvince.Id,
+						"name": stat.RegionProvince.Name,
+					},
+				})
+			}
+		}
+
+		// 城市
+		{
+			resp, err := this.RPC().ServerRegionCityMonthlyStatRPC().FindTopServerRegionCityMonthlyStats(this.AdminContext(), &pb.FindTopServerRegionCityMonthlyStatsRequest{
+				Month:    month,
+				ServerId: params.ServerId,
+				Offset:   0,
+				Size:     10,
+			})
+			if err != nil {
+				this.ErrorPage(err)
+				return
+			}
+			for _, stat := range resp.Stats {
+				cityStatMaps = append(cityStatMaps, maps.Map{
+					"count": stat.Count,
+					"country": maps.Map{
+						"id":   stat.RegionCountry.Id,
+						"name": stat.RegionCountry.Name,
+					},
+					"province": maps.Map{
+						"id":   stat.RegionProvince.Id,
+						"name": stat.RegionProvince.Name,
+					},
+					"city": maps.Map{
+						"id":   stat.RegionCity.Id,
+						"name": stat.RegionCity.Name,
+					},
+				})
+			}
+		}
+	}
+
+	this.Data["countryStats"] = countryStatMaps
+	this.Data["provinceStats"] = provinceStatMaps
+	this.Data["cityStats"] = cityStatMaps
+
+	// 记录最近使用
+	_, err = this.RPC().LatestItemRPC().IncreaseLatestItem(this.AdminContext(), &pb.IncreaseLatestItemRequest{
+		ItemType: "server",
+		ItemId:   params.ServerId,
+	})
+	if err != nil {
+		this.ErrorPage(err)
+		return
+	}
+
+	this.Show()
+}

internal/web/actions/default/servers/serverutils/server_helper.go

@@ -159,10 +159,15 @@ func (this *ServerHelper) createLogMenu(secondMenuItem string, serverIdString st
 func (this *ServerHelper) createStatMenu(secondMenuItem string, serverIdString string, serverConfig *serverconfigs.ServerConfig) []maps.Map {
 	menuItems := []maps.Map{}
 	menuItems = append(menuItems, maps.Map{
-		"name":     "地域分布",
+		"name":     "流量统计",
 		"url":      "/servers/server/stat?serverId=" + serverIdString,
 		"isActive": secondMenuItem == "index",
 	})
+	menuItems = append(menuItems, maps.Map{
+		"name":     "地域分布",
+		"url":      "/servers/server/stat/regions?serverId=" + serverIdString,
+		"isActive": secondMenuItem == "region",
+	})
 	menuItems = append(menuItems, maps.Map{
 		"name":     "运营商",
 		"url":      "/servers/server/stat/providers?serverId=" + serverIdString,

web/public/js/utils.js

@@ -115,16 +115,66 @@ window.teaweb = {
 	formatBytes: function (bytes) {
 		bytes = Math.ceil(bytes);
 		if (bytes < 1024) {
-            return bytes + " bytes";
+			return bytes + "B";
 		}
 		if (bytes < 1024 * 1024) {
-            return (Math.ceil(bytes * 100 / 1024) / 100) + " k";
+			return (Math.ceil(bytes * 100 / 1024) / 100) + "K";
 		}
-        return (Math.ceil(bytes * 100 / 1024 / 1024) / 100) + " m";
+		if (bytes < 1024 * 1024 * 1024) {
+			return (Math.ceil(bytes * 100 / 1024 / 1024) / 100) + "M";
+		}
+		if (bytes < 1024 * 1024 * 1024 * 1024) {
+			return (Math.ceil(bytes * 100 / 1024 / 1024 / 1024) / 100) + "G";
+		}
+		if (bytes < 1024 * 1024 * 1024 * 1024 * 1024) {
+			return (Math.ceil(bytes * 100 / 1024 / 1024 / 1024 / 1024) / 100) + "T";
+		}
+		return (Math.ceil(bytes * 100 / 1024 / 1024 / 1024 / 1024 / 1024) / 100) + "P";
 	},
 	formatNumber: function (x) {
 		return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ", ");
 	},
+	bytesAxis: function (stats, countFunc) {
+		let max = Math.max.apply(this, stats.map(countFunc))
+		let divider = 1
+		let unit = ""
+		if (max >= 1024 * 1024 * 1024 * 1024) {
+			unit = "T"
+			divider = 1024 * 1024 * 1024 * 1024
+		} else if (max >= 1024 * 1024 * 1024) {
+			unit = "G"
+			divider = 1024 * 1024 * 1024
+		} else if (max >= 1024 * 1024) {
+			unit = "M"
+			divider = 1024 * 1024
+		} else if (max >= 1024) {
+			unit = "K"
+			divider = 1024
+		}
+		return {
+			unit: unit,
+			divider: divider
+		}
+	},
+	countAxis: function (stats, countFunc) {
+		let max = Math.max.apply(this, stats.map(countFunc))
+		let divider = 1
+		let unit = ""
+		if (max >= 1000 * 1000 * 1000) {
+			unit = "B"
+			divider = 1000 * 1000 * 1000
+		} else if (max >= 1000 * 1000) {
+			unit = "M"
+			divider = 1000 * 1000
+		} else if (max >= 1000) {
+			unit = "K"
+			divider = 1000
+		}
+		return {
+			unit: unit,
+			divider: divider
+		}
+	},
 	popup: function (url, options) {
 		if (options == null) {
 			options = {};

web/views/@default/servers/server/stat/index.css

@@ -1,4 +1,4 @@
 .chart-box {
-  height: 20em;
+  height: 21em;
 }
 /*# sourceMappingURL=index.css.map */

web/views/@default/servers/server/stat/index.html

@@ -7,24 +7,11 @@
 
 {$template "/left_menu"}
 <div class="right-box">
-    {$ if eq .statIsOn false}
+    <div class="ui column">
-	<p class="ui message">
+        <h4>请求数统计（小时）</h4>
-        要想查看统计数据，需要先开启统计功能，<a :href="'/servers/server/settings/stat?serverId=' + serverId">[点击这里]</a>修改配置。
+        <div class="chart-box" id="hourly-requests-chart"></div>
-    </p>
-    {$else}
-        <h4>地区排行</h4>
-        <div class="chart-box" id="country-chart">
 
+        <h4>流量统计（小时）</h4>
+        <div class="chart-box" id="hourly-traffic-chart"></div>
     </div>
-
-        <h4>省市排行</h4>
-        <div class="chart-box" id="province-chart">
-
-        </div>
-
-        <h4>城市排行</h4>
-        <div class="chart-box" id="city-chart">
-
-        </div>
-    {$end}
 </div>

web/views/@default/servers/server/stat/index.js

@@ -2,43 +2,54 @@ Tea.context(function () {
 	this.$delay(function () {
 		let that = this
 
-        let countryUnit = this.processMaxUnit(this.countryStats)
+		this.reloadRequestsChart("hourly-requests-chart", "请求数统计", this.hourlyStats, function (args) {
-        this.reloadChart("country-chart", "地区", this.countryStats, function (v) {
+			if (args.seriesIndex == 0) {
-            return v.country.name
+				return that.hourlyStats[args.dataIndex].day + " " + that.hourlyStats[args.dataIndex].hour + " 请求数: " + teaweb.formatNumber(that.hourlyStats[args.dataIndex].countRequests)
-        }, function (args) {
+			}
-            return that.countryStats[args.dataIndex].country.name + ": " + teaweb.formatNumber(that.countryStats[args.dataIndex].rawCount)
+			if (args.seriesIndex == 1) {
-        }, countryUnit)
+				let ratio = 0
-
+				if (that.hourlyStats[args.dataIndex].countRequests > 0) {
-        let provinceUnit = this.processMaxUnit(this.provinceStats)
+					ratio = Math.round(that.hourlyStats[args.dataIndex].countCachedRequests * 10000 / that.hourlyStats[args.dataIndex].countRequests) / 100
-        this.reloadChart("province-chart", "省市", this.provinceStats, function (v) {
+				}
-            return v.province.name
+				return that.hourlyStats[args.dataIndex].day + " " + that.hourlyStats[args.dataIndex].hour + " 缓存请求数: " + teaweb.formatNumber(that.hourlyStats[args.dataIndex].countCachedRequests) + ", 命中率：" + ratio + "%"
-        }, function (args) {
+			}
-            return that.provinceStats[args.dataIndex].country.name + ": " + that.provinceStats[args.dataIndex].province.name + " " + teaweb.formatNumber(that.provinceStats[args.dataIndex].rawCount)
+			return ""
-        }, provinceUnit)
+		})
-
+		this.reloadTrafficChart("hourly-traffic-chart", "流量统计", this.hourlyStats, function (args) {
-        let cityUnit = this.processMaxUnit(this.cityStats)
+			if (args.seriesIndex == 0) {
-        this.reloadChart("city-chart", "城市", this.cityStats, function (v) {
+				return that.hourlyStats[args.dataIndex].day + " " + that.hourlyStats[args.dataIndex].hour + " 流量: " + teaweb.formatBytes(that.hourlyStats[args.dataIndex].bytes)
-            return v.city.name
+			}
-        }, function (args) {
+			if (args.seriesIndex == 1) {
-            return that.cityStats[args.dataIndex].country.name + ": " + that.cityStats[args.dataIndex].province.name + " " + that.cityStats[args.dataIndex].city.name + " " + teaweb.formatNumber(that.cityStats[args.dataIndex].rawCount)
+				let ratio = 0
-        }, cityUnit)
+				if (that.hourlyStats[args.dataIndex].bytes > 0) {
-
+					ratio = Math.round(that.hourlyStats[args.dataIndex].cachedBytes * 10000 / that.hourlyStats[args.dataIndex].bytes) / 100
+				}
+				return that.hourlyStats[args.dataIndex].day + " " + that.hourlyStats[args.dataIndex].hour + " 缓存流量: " + teaweb.formatBytes(that.hourlyStats[args.dataIndex].cachedBytes) + ", 命中率：" + ratio + "%"
+			}
+			return ""
+		})
 		window.addEventListener("resize", function () {
-            that.resizeChart("country-chart")
+			that.resizeChart("hourly-requests-chart")
-            that.resizeChart("province-chart")
+			that.resizeChart("hourly-traffic-chart")
-            that.resizeChart("city-chart")
 		})
 	})
 
-    this.reloadChart = function (chartId, name, stats, xFunc, tooltipFunc, unit) {
+	this.reloadRequestsChart = function (chartId, name, stats, tooltipFunc) {
 		let chartBox = document.getElementById(chartId)
 		if (chartBox == null) {
 			return
 		}
+
+		let axis = teaweb.countAxis(stats, function (v) {
+			return Math.max(v.countRequests, v.countCachedRequests)
+		})
+
 		let chart = echarts.init(chartBox)
 		let option = {
 			xAxis: {
-                data: stats.map(xFunc),
+				data: stats.map(function (v) {
+					return v.hour
+				}),
 				axisLabel: {
 					interval: 0
 				}
@@ -46,7 +57,7 @@ Tea.context(function () {
 			yAxis: {
 				axisLabel: {
 					formatter: function (value) {
-                        return value + unit
+						return value + axis.unit
 					}
 				}
 			},
@@ -56,24 +67,117 @@ Tea.context(function () {
 				formatter: tooltipFunc
 			},
 			grid: {
-                left: 40,
+				left: 50,
-                top: 10,
+				top: 40,
 				right: 20,
 				bottom: 20
 			},
 			series: [
 				{
-                    name: name,
+					name: "请求数",
-                    type: "bar",
+					type: "line",
 					data: stats.map(function (v) {
-                        return v.count;
+						return v.countRequests / axis.divider
 					}),
 					itemStyle: {
 						color: "#9DD3E8"
 					},
-                    barWidth: "20em"
+					areaStyle: {
+						color: "#9DD3E8"
+					}
+				},
+				{
+					name: "缓存请求数",
+					type: "line",
+					data: stats.map(function (v) {
+						return v.countCachedRequests / axis.divider
+					}),
+					itemStyle: {
+						color: "#61A0A8"
+					},
+					areaStyle: {
+						color: "#61A0A8"
+					}
 				}
 			],
+			legend: {
+				data: ['请求数', '缓存请求数']
+			},
+			animation: true
+		}
+		chart.setOption(option)
+		chart.resize()
+	}
+
+	this.reloadTrafficChart = function (chartId, name, stats, tooltipFunc) {
+		let chartBox = document.getElementById(chartId)
+		if (chartBox == null) {
+			return
+		}
+
+		let axis = teaweb.bytesAxis(stats, function (v) {
+			return Math.max(v.bytes, v.cachedBytes)
+		})
+
+		let chart = echarts.init(chartBox)
+		let option = {
+			xAxis: {
+				data: stats.map(function (v) {
+					return v.hour
+				}),
+				axisLabel: {
+					interval: 0
+				}
+			},
+			yAxis: {
+				axisLabel: {
+					formatter: function (value) {
+						return value + axis.unit
+					}
+				}
+			},
+			tooltip: {
+				show: true,
+				trigger: "item",
+				formatter: tooltipFunc
+			},
+			grid: {
+				left: 50,
+				top: 40,
+				right: 20,
+				bottom: 20
+			},
+			series: [
+				{
+					name: "流量",
+					type: "line",
+					data: stats.map(function (v) {
+						return v.bytes / axis.divider
+					}),
+					itemStyle: {
+						color: "#9DD3E8"
+					},
+					areaStyle: {
+						color: "#9DD3E8"
+					}
+				},
+				{
+					name: "缓存流量",
+					type: "line",
+					data: stats.map(function (v) {
+						return v.cachedBytes / axis.divider
+					}),
+					itemStyle: {
+						color: "#61A0A8"
+					},
+					areaStyle: {
+						color: "#61A0A8"
+					}
+				}
+			],
+			legend: {
+				data: ['流量', '缓存流量']
+			},
 			animation: true
 		}
 		chart.setOption(option)
@@ -88,29 +192,4 @@ Tea.context(function () {
 		let chart = echarts.init(chartBox)
 		chart.resize()
 	}
-
-    this.processMaxUnit = function (stats) {
-        let max = stats.$map(function (k, v) {
-            return v.count
-        }).$max()
-        let divider = 0
-        let unit = ""
-        if (max >= 1000 * 1000 * 1000) {
-            unit = "B"
-            divider = 1000 * 1000 * 1000
-        } else if (max >= 1000 * 1000) {
-            unit = "M"
-            divider = 1000 * 1000
-        } else if (max >= 1000) {
-            unit = "K"
-            divider = 1000
-        }
-        stats.forEach(function (v) {
-            v.rawCount = v.count
-            if (divider > 0) {
-                v.count /= divider
-            }
-        })
-        return unit
-    }
 })

web/views/@default/servers/server/stat/index.less

@@ -1,3 +1,3 @@
 .chart-box {
-	height: 20em;
+	height: 21em;
 }

web/views/@default/servers/server/stat/providers.js

@@ -2,12 +2,17 @@ Tea.context(function () {
 	this.$delay(function () {
 		let that = this
 
-        let providerUnit = this.processMaxUnit(this.providerStats)
+		let axis = teaweb.countAxis(this.providerStats, function (v) {
+			return v.count
+		})
+		this.providerStats.forEach(function (v) {
+			v.count /= axis.divider
+		})
 		this.reloadChart("provider-chart", "运营商", this.providerStats, function (v) {
 			return v.provider.name
 		}, function (args) {
 			return that.providerStats[args.dataIndex].provider.name + ": " + teaweb.formatNumber(that.providerStats[args.dataIndex].rawCount)
-        }, providerUnit)
+		}, axis.unit)
 		window.addEventListener("resize", function () {
 			that.resizeChart("provider-chart")
 		})
@@ -71,29 +76,4 @@ Tea.context(function () {
 		let chart = echarts.init(chartBox)
 		chart.resize()
 	}
-
-    this.processMaxUnit = function (stats) {
-        let max = stats.$map(function (k, v) {
-            return v.count
-        }).$max()
-        let divider = 0
-        let unit = ""
-        if (max >= 1000 * 1000 * 1000) {
-            unit = "B"
-            divider = 1000 * 1000 * 1000
-        } else if (max >= 1000 * 1000) {
-            unit = "M"
-            divider = 1000 * 1000
-        } else if (max >= 1000) {
-            unit = "K"
-            divider = 1000
-        }
-        stats.forEach(function (v) {
-            v.rawCount = v.count
-            if (divider > 0) {
-                v.count /= divider
-            }
-        })
-        return unit
-    }
 })

web/views/@default/servers/server/stat/regions.css

@@ -0,0 +1,4 @@
+.chart-box {
+  height: 20em;
+}
+/*# sourceMappingURL=index.css.map */

web/views/@default/servers/server/stat/regions.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA;EACC,YAAA","file":"index.css"}

web/views/@default/servers/server/stat/regions.html

@@ -0,0 +1,30 @@
+{$layout}
+
+{$var "header"}
+<!-- echart -->
+<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
+{$end}
+
+{$template "/left_menu"}
+<div class="right-box">
+    {$ if eq .statIsOn false}
+	<p class="ui message">
+        要想查看统计数据，需要先开启统计功能，<a :href="'/servers/server/settings/stat?serverId=' + serverId">[点击这里]</a>修改配置。
+    </p>
+    {$else}
+        <h4>地区排行</h4>
+        <div class="chart-box" id="country-chart">
+
+        </div>
+
+        <h4>省市排行</h4>
+        <div class="chart-box" id="province-chart">
+
+        </div>
+
+        <h4>城市排行</h4>
+        <div class="chart-box" id="city-chart">
+
+        </div>
+    {$end}
+</div>

web/views/@default/servers/server/stat/regions.js

@@ -0,0 +1,116 @@
+Tea.context(function () {
+    this.$delay(function () {
+        let that = this
+
+        let countryUnit = this.processMaxUnit(this.countryStats)
+        this.reloadChart("country-chart", "地区", this.countryStats, function (v) {
+            return v.country.name
+        }, function (args) {
+            return that.countryStats[args.dataIndex].country.name + ": " + teaweb.formatNumber(that.countryStats[args.dataIndex].rawCount)
+        }, countryUnit)
+
+        let provinceUnit = this.processMaxUnit(this.provinceStats)
+        this.reloadChart("province-chart", "省市", this.provinceStats, function (v) {
+            return v.province.name
+        }, function (args) {
+            return that.provinceStats[args.dataIndex].country.name + ": " + that.provinceStats[args.dataIndex].province.name + " " + teaweb.formatNumber(that.provinceStats[args.dataIndex].rawCount)
+        }, provinceUnit)
+
+        let cityUnit = this.processMaxUnit(this.cityStats)
+        this.reloadChart("city-chart", "城市", this.cityStats, function (v) {
+            return v.city.name
+        }, function (args) {
+            return that.cityStats[args.dataIndex].country.name + ": " + that.cityStats[args.dataIndex].province.name + " " + that.cityStats[args.dataIndex].city.name + " " + teaweb.formatNumber(that.cityStats[args.dataIndex].rawCount)
+        }, cityUnit)
+
+        window.addEventListener("resize", function () {
+            that.resizeChart("country-chart")
+            that.resizeChart("province-chart")
+            that.resizeChart("city-chart")
+        })
+    })
+
+    this.reloadChart = function (chartId, name, stats, xFunc, tooltipFunc, unit) {
+        let chartBox = document.getElementById(chartId)
+        if (chartBox == null) {
+            return
+        }
+        let chart = echarts.init(chartBox)
+        let option = {
+            xAxis: {
+                data: stats.map(xFunc),
+                axisLabel: {
+                    interval: 0
+                }
+            },
+            yAxis: {
+                axisLabel: {
+                    formatter: function (value) {
+                        return value + unit
+                    }
+                }
+            },
+            tooltip: {
+                show: true,
+                trigger: "item",
+                formatter: tooltipFunc
+            },
+            grid: {
+                left: 40,
+                top: 10,
+                right: 20,
+                bottom: 20
+            },
+            series: [
+                {
+                    name: name,
+                    type: "bar",
+                    data: stats.map(function (v) {
+                        return v.count;
+                    }),
+                    itemStyle: {
+                        color: "#9DD3E8"
+                    },
+                    barWidth: "20em"
+                }
+            ],
+            animation: true
+        }
+        chart.setOption(option)
+        chart.resize()
+    }
+
+    this.resizeChart = function (chartId) {
+        let chartBox = document.getElementById(chartId)
+        if (chartBox == null) {
+            return
+        }
+        let chart = echarts.init(chartBox)
+        chart.resize()
+    }
+
+    this.processMaxUnit = function (stats) {
+        let max = stats.$map(function (k, v) {
+            return v.count
+        }).$max()
+        let divider = 0
+        let unit = ""
+        if (max >= 1000 * 1000 * 1000) {
+            unit = "B"
+            divider = 1000 * 1000 * 1000
+        } else if (max >= 1000 * 1000) {
+            unit = "M"
+            divider = 1000 * 1000
+        } else if (max >= 1000) {
+            unit = "K"
+            divider = 1000
+        }
+        stats.forEach(function (v) {
+            v.rawCount = v.count
+            if (divider > 0) {
+                v.count /= divider
+            }
+        })
+        return unit
+    }
+})

web/views/@default/servers/server/stat/regions.less

@@ -0,0 +1,3 @@
+.chart-box {
+	height: 20em;
+}