ASP.NET Core 一步步搭建个人网站（5）

ASP.NET Core 一步步搭建个人网站（5）_Api模拟和网站分析

Posted on 2018-01-10 15:35 Lancel0t 阅读(…) 评论(…) 编辑收藏

前言

经过前面几章，我们的网站已经最基本的功能，接下来就是继续拓展其他的功能，这期一起来实现一个该网站流量分析的工具，统计出这个网站每天用户相关数据，不仅要满足了我们对流量统计数字的基本要求，并且用更简单的图形显示方式，让我们一目了然地获取页面热度、点击率信息等等。有了这个想法以后，那怎么实现呢，跟着笔者一步步来吧。

首先，需要考虑怎么才能获得用户访问网站时的相关数据呢？我们没必要自己去记录这些信息，目前已经有很多成熟的解决方案，提供捕获这些信息的免费接口，我们只用去访问这些接口就可以了。

在众多的方案中，有2款目前是比较流行的，分别是google analytics和百度统计。怎么说呢，google的确实是行业的大牛，不仅很成熟，而且有详尽的技术文档，数据收集过程很顺利，但是数据呈现需要fanqiang(原因你们懂得)，这块是硬伤，一个开放的网站没法要求用户都要fanqiang吧，也是由于这个原因，让我忍痛放弃了google analytics。那只有一个选择了：百度统计。想比较而言，百度统计的相关技术文档不忍多说，都是泪，笔者在坑中摸爬滚打很久，才弄明白怎么调用和访问。

方案定下来，因为我们要访问百度统计的开放API，以后会经常调用到外网的各种API，为了磨刀不费砍柴工，我们开发一个API的模拟工具，用来调试。

API模拟工具

单独给API模拟工具增加一个菜单项，菜单管理–>新增菜单，增加一个根节点菜单下的一个子菜单：“工具箱”。以后一些常用的开发工具菜单，就放置该目录，然后在“工具箱”菜单下，再新建一个子菜单：“API模拟”。
那C#中怎么调用远程API方法呢，一般用HttpClient可以访问，这里我们稍微再封装一下，分为Get请求（传递url参数）和Post请求（传递url和content参数）：

 1 public static class HttpClientExtensions
 2 {
 3     /// <summary>
 4     /// Get请求API
 5     /// </summary>
 6     /// <param name="client"></param>
 7     /// <param name="url"></param>
 8     /// <param name="jsonValue"></param>
 9     /// <param name="headers"></param>
10     /// <returns></returns>
11     public static async Task<string> HttpGetAsync(this HttpClient client, string url)
12     {
13         //初始化内容
14         var responseMessage = await client.GetAsync(url);
15         if (responseMessage.IsSuccessStatusCode)
16         {
17             return await responseMessage.Content.ReadAsStringAsync();
18         }
19         else
20         {
21             return $"访问API地址:{url}出错,错误代码:{responseMessage.StatusCode},错误原因:{responseMessage.ReasonPhrase}";
22         }
23     }
24 
25 
26     /// <summary>
27     /// Post请求API
28     /// </summary>
29     /// <param name="client"></param>
30     /// <param name="url"></param>
31     /// <param name="jsonValue"></param>
32     /// <param name="headers"></param>
33     /// <returns></returns>
34     public static async Task<string> HttpPostAsync(this HttpClient client, string url, string jsonValue)
35     {
36         //初始化内容
37         var content = new StringContent(jsonValue, Encoding.UTF8, "application/json");
38 
39         var responseMessage = await client.PostAsync(url, content);
40         if (responseMessage.IsSuccessStatusCode)
41         {
42             return await responseMessage.Content.ReadAsStringAsync();
43         }
44         else
45         {
46             return $"访问API地址:{url}出错,参数:{jsonValue},错误代码:{responseMessage.StatusCode},错误原因:{responseMessage.ReasonPhrase}";
47         }
48     }

参考上一章的内容中，我们将Api的相关配置，比如url地址，url请求类型，参数等等，都配置到json文件中，并定义相应的数据结构MyRequest。后续依赖注入IOptions<MyRequest> myRequest即可访问。
Areas/Tools/Controllers创建对应的控制器ApiSimulatorController

InvokApi方法：根据读取的Api请求类型，想远程API服务商发送请求并传递参数，返回json格式给UI端；
Index方法：根据用户在下拉框中选择的Api，切换显示Api相关信息；

 1 [Area("Tools")]
 2 public class ApiSimulatorController : AppController
 3 {
 4     private readonly MyRequest _myRequest;
 5 
 6     public ApiSimulatorController(IOptions<MyRequest> myRequest)
 7     {
 8         _myRequest = myRequest.Value;
 9     }
10 
11     /// <summary>
12     /// API模拟主页
13     /// </summary>
14     /// <param name="selectedApiCode"></param>
15     /// <returns></returns>
16     public IActionResult Index(string selectedApiCode = null)
17     {
18         UpdateDropDownList(selectedApiCode);
19         if (selectedApiCode == null)
20         {
21             return View("Index", new ApiRequest());
22 
23         }
24         var selectedApi = _myRequest.ApiRequests.FirstOrDefault(s => s.ApiCode == selectedApiCode);
25         if (selectedApi != null && selectedApi.Methord == "POST")
26             selectedApi.ApiDatas = selectedApi.ApiDatas.ToJsonString();
27         return View("Index", selectedApi);
28     }
29 
30     /// <summary>
31     /// 调用API
32     /// </summary>
33     /// <param name="request"></param>
34     /// <returns></returns>
35     public async Task<IActionResult> InvokApi(ApiRequest request)
36     {
37         var hc = new HttpClient();
38 
39         if (request.Methord == "GET")
40         {
41             var getUrl = request.Url + "?";
42             foreach (var para in request.ApiParas)
43             {
44                 getUrl += "&" + para.ParaName + "=" + para.ParaValue;
45             }
46 
47             ViewBag.SendContent = getUrl;
48             ViewBag.ReturnResult = (await hc.HttpGetAsync(getUrl)).ToJsonString();
49         }
50         else if (request.Methord == "POST")
51         {
52             if (!string.IsNullOrEmpty(request.ApiDatas))
53             {
54                 ViewBag.SendContent = request.Url;
55                 ViewBag.ReturnResult = (await hc.HttpPostAsync(request.Url, request.ApiDatas)).ToJsonString();
56             }
57             else
58             {
59                 ModelState.AddModelError(string.Empty, "请输入Json格式请求参数");
60             }
61         }
62         else
63         {
64             ModelState.AddModelError(string.Empty, "请求方式非法");
65         }
66 
67         UpdateDropDownList(request.ApiCode);
68         return View("Index", request);
69     }
70 
71     /// <summary>
72     /// 初始化下拉选择框
73     /// </summary>
74     private void UpdateDropDownList(string selectedApiCode = null)
75     {
76         List<SelectListItem> listApiName = new List<SelectListItem>();
77         foreach (var request in _myRequest.ApiRequests.Select(s => new { s.ApiName, s.ApiCode }))
78         {
79             listApiName.Add(new SelectListItem
80             {
81                 Value = request.ApiCode,
82                 Text = request.ApiName,
83                 Selected = request.ApiCode == selectedApiCode
84             });
85         }
86         ViewBag.ApiCodes = listApiName;
87     }
88 }

Areas/Tools/Views创建对应的视图Index

  1 <section class="content">
  2     <div class="row">
  3         <!-- 参数配置 -->
  4         <div class="col-md-8">
  5             <div class="box">
  6                 <div class="box-header with-border">
  7                     <h3 class="box-title">参数配置</h3>
  8                 </div>
  9                 <form asp-action="InvokApi" method="post">
 10                     <div asp-validation-summary="All" class="text-danger"></div>
 11                     <div class="box-body row">
 12                         <div class="col-md-12">
 13                             <input asp-for="ApiName" hidden>
 14                             <div class="form-group">
 15                                 <label asp-for="ApiCode">API名称:</label>
 16                                 <select asp-for="ApiCode" class="form-control input-sm select2" asp-items="ViewBag.ApiCodes">
 17                                     <option value="">-- 请选择 --</option>
 18                                 </select>
 19                             </div>
 20                             <div class="form-group">
 21                                 <label asp-for="Url">API地址:</label>
 22                                 <input asp-for="Url" class="form-control input-sm" readonly>
 23                             </div>
 24                             <div class="form-group">
 25                                 <label asp-for="Methord">请求方式:</label>
 26                                 <input asp-for="Methord" class="form-control input-sm" readonly>
 27                             </div>
 28                             <div class="form-group">
 29                                 <label for="params" class="">请求参数：</label>
 30                                 @if (Model.Methord == "GET")
 31                                 {
 32                                     <div style="overflow-x:auto;">
 33                                         <table class="table table-bordered table-striped table-condensed" id="params">
 34                                             <thead>
 35                                                 <tr>
 36                                                     <td>参数名</td>
 37                                                     <td>类型</td>
 38                                                     <td>是否必填</td>
 39                                                     <td>说明</td>
 40                                                     <td>值</td>
 41                                                 </tr>
 42                                             </thead>
 43                                             <tbody>
 44                                                 @for (var i = 0; i < Model.ApiParas.Count(); i++)
 45                                                 {
 46                                                     <tr>
 47                                                         <td>
 48                                                             <span>@Model.ApiParas[i].ParaName</span>
 49                                                             @Html.TextBoxFor(a => a.ApiParas[i].ParaName,
 50                                                            new { @class = "form-control input-sm", type = "hidden" })
 51                                                         </td>
 52                                                         <td>
 53                                                             <span> @Model.ApiParas[i].ParaType</span>
 54                                                             @Html.TextBoxFor(a => a.ApiParas[i].ParaType,
 55                                                            new { @class = "form-control input-sm", type = "hidden" })
 56                                                         </td>
 57                                                         <td>
 58                                                             <span>@(Model.ApiParas[i].Required ? "是" : "否")</span>
 59                                                             @Html.TextBoxFor(a => a.ApiParas[i].Required,
 60                                                            new { @class = "form-control input-sm", type = "hidden" })
 61                                                         </td>
 62                                                         <td>
 63                                                             <span>@Model.ApiParas[i].Description</span>
 64                                                             @Html.TextBoxFor(a => a.ApiParas[i].Description,
 65                                                            new { @class = "form-control input-sm", type = "hidden" })
 66                                                         </td>
 67                                                         <td>
 68                                                             @Html.TextBoxFor(a => a.ApiParas[i].ParaValue,
 69                                                            new { @class = "form-control input-sm" })
 70                                                     </td>
 71                                                 </tr>
 72                                                 }
 73                                             </tbody>
 74                                         </table>
 75                                     </div>}
 76                                 else if ((Model.Methord == "POST"))
 77                                 {
 78                                     @Html.TextAreaFor(m => m.ApiDatas, 
　　　　　　　　　　　　　　　　　　　　　　 new { @class = "form-control", rows = "8", placeholder = "输入Json格式 ..." })
 79                                 }
 80                             </div>
 81                             <button type="submit" class="btn btn-success"><i class="fa fa-send-o margin-r-5"></i>发送请求</button>
 82                         </div>
 83                     </div>
 84                     <div class="box-footer">
 85                     </div>
 86                 </form>
 87             </div>
 88         </div>
 89         <!-- 请求与返回 -->
 90         <div class="col-md-4">
 91             <div class="box">
 92                 <div class="box-header with-border">
 93                     <h3 class="box-title">请求与返回</h3>
 94                 </div>
 95                 <div class="box-body row">
 96                     <div class="col-md-12">
 97                         <div class="form-group">
 98                             <label>请求详情:</label>
 99                             <textarea class="form-control" rows="3" readonly>@ViewBag.SendContent</textarea>
100                         </div>
101                         <div class="form-group">
102                             <label>请求返回:</label>
103                             <div class="well well-sm" style="height: 320px; overflow: auto;">@ViewBag.ReturnResult</div>
104                         </div>
105                     </div>
106                 </div>
107 
108             </div>
109 
110         </div>
111     </div>
112 </section>
113 @section Scripts {
114     <script>
115         $('#ApiCode').on('change',
116             function () {
117                 var selectCode = $(this).val();
118                 location.href = "/Tools/ApiSimulator/Index?selectedApiCode=" + selectCode;
119             })
120     </script>
121     @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
122 }

json文件中增加“手机号码归属地”、“百度统计”相关API的配置，我们来测试一下：

流量分析工具

有了上面API模拟工具，现在可以很方便的调试我们百度统计接口了。百度统计是怎么获取这些网站用户访问的相关信息的呢？原理其实很简单，百度针对你的注册服务提供一段js代码，其中包含标识你在百度统计的id。你在网页中添加这段代码后，每当用户访问该网站时，会下载这段js脚本，加载完毕和离开页面的时候，都会发送一次请求和传递参数，百度统计服务中心从而捕获到这些信息，维护在服务器中。调用百度统计API传递你的id，会根据id返回你的网站对应分析数据。关于流量统计原理，有兴趣详见揭秘百度统计和Google Analytics的工作原理

注册百度统计

知道了原理，那首先第一步我们注册百度统计用户。注册完成后，我们找到代码管理–>代码获取，将百度统计帮你自动生成好的js脚本复制过来，粘贴到site.js文件中。由于_layout母版页引用了site.js文件，这样的话，网站域名下所有的用户访问，都会被统计。

安装完百度统计的代码，发布网站程序，可以用百度统计中代码检查，看看自己统计代码有没有被正确的安装，如果安装成功，估计20分钟后，就可以在百度统计中查看网站的访问情况了。当然，你也可以添加多个域名的网站。

申请Tongji API数据导出

现在我们很方便的在百度统计中查看各种统计数据了，比如流量分析、来源分析、访问分析、转化分析等等，接下来需要获取这些数据，来移植到我们自己的网站中来。百度提供了Tongji API，我们可以调用API来查询自己网站的分析数据，从而进一步组织增加的分析视图了。

要访问Tongji API，需要提供一个token值，这个需要开通申请，在百度统计–>管理–>其他设置–>数据导出服务中，请求开通，开通后百度统计会提供给你一个token字符串，以后用这个token就可以访问Tongji API。Tongji API具体的请求格式说明详见：百度统计开发平台

比如我们需要请求站点列表，使用API模拟工具，请求类型POST，url地址：https://api.baidu.com/json/tongji/v1/ReportService/getSiteList，这里注意请求的data参数格式应该如下：

1 {
2     "header": {
3         "account_type": 1,
4         "password": "<密码>",
5         "token": "<token>",
6         "username": "<用户名>"
7     },
8     "body": {}
9 }

输入百度统计的用户名和密码及访问使用的token，即可正常访问我们的注册的所有站点，这里我们可以拿到站点的site_id(也可以通过百度统计页面查看)，后面请求该站点的分析数据会用到。

地域分布数据获取

百度统计提供的数据类型很多，我们选取其中一个来试验下效果。比如我们需要获得访问网站用户的地域信息，不同省份的用户访问情况。

使用API模拟工具调试：请求类型POST，url地址：https://api.baidu.com/json/tongji/v1/ReportService/getData，请求的data参数格式如下：

 1 {
 2     "header": {
 3         "account_type": 1,
 4         "password": "<密码>",
 5         "token": "<token>",
 6         "username": "<用户名>"
 7     },
 8     "body": {
 9         "site_id": <站点id>,
10         "method": "visit/district/a",
11         "start_date": "30daysago",
12         "end_date": "today",
13         "metrics": "pv_count,pv_ratio,visit_count,visitor_count,new_visitor_count,new_visitor_ratio,
　　　　　　　　　　　　　　ip_count,bounce_ratio,avg_visit_time,avg_visit_pages,trans_count,trans_ratio",
14         "order": "pv_count,desc",
15         "max_results": 0
16     }
17 }

可以看到，正常返回按照不同省份区域的网站统计数据。

实现控制器逻辑：按照上面提供的json格式，配置到json文件中，并定义MyRequest对象，映射我们所有的API请求，MyRequest存放的是所有API请求的配置信息，通过API请求的id，加载不同的API配置信息。Areas/Tools/Controllers创建对应的控制器SiteAnalyticsController，主要实现GetVisitDistrictAnalytics方法，用来根据时间范围，获取相应的区域分析json数据：

 1 [Area("Tools")]
 2 public class SiteAnalyticsController : AppController
 3 {
 4     private readonly IList<ApiRequest> _requests;
 5 
 6     public SiteAnalyticsController(IOptions<MyRequest> myRequest)
 7     {
 8         _requests = myRequest.Value.ApiRequests;
 9     }
10 
11     public IActionResult Index()
12     {
13         return View();
14     }
15 
16     /// <summary>
17     /// 获取百度访客区域统计数据
18     /// </summary>
19     /// <returns></returns>
20     public async Task<JsonResult> GetVisitDistrictAnalytics(string startDate, string endDate)
21     {
22         var hc = new HttpClient();
23         var request = _requests.FirstOrDefault(s => s.ApiCode == "BaiduGetVisitDistrict");
24         var data = request.ApiDatas.Replace("30daysago", startDate).Replace("today", endDate);
25         return Json(await hc.HttpPostAsync(request.Url, data));
26     }
27 
28     /// <summary>
29     /// 获取百度趋势分析数据
30     /// </summary>
31     /// <returns></returns>
32     public async Task<JsonResult> GetTrendAnalytics(string startDate, string endDate)
33     {
34         var hc = new HttpClient();
35         var request = _requests.FirstOrDefault(s => s.ApiCode == "BaiduGetTrend");
36         var data = request.ApiDatas.Replace("30daysago", startDate).Replace("today", endDate);
37         return Json(await hc.HttpPostAsync(request.Url, data));
38     }
39 }

区域分析显示

有了区域分析的数据，接下来考虑要怎么显示。

我们设计各个省份的访问量，可以通过地图展现，根据实际访问量的多少，通过颜色的深浅表现；
表格的形式，具体显示不同省份的访问量和占比；
柱状图的形式，显示最近7天的访问量趋势；

地图展现，采用jvectormap插件，它是矢量地图，且有自己的API，还是非常好用的，具体使用方法，推荐访问官网：http://jvectormap.com/

Areas/Tools/Views创建视图Index：

  1 @using MyWebSite.ViewModels
  2 @{
  3     ViewData["Title"] = "网站统计";
  4     var breadcrumb = new BreadCrumb("网站统计", "Version 2.0",
  5         new List<NavCrumb> { new NavCrumb("工具箱"), new NavCrumb("网站统计") });
  6     ViewBag.BreadCrumb = breadcrumb;
  7     Layout = "~/Views/Shared/_Layout.cshtml";
  8 }
  9 
 10 @section Styles {
 11     <link rel="stylesheet" href="~/lib/AdminLTE/plugins/jvectormap/jquery-jvectormap-1.2.2.css" />
 12     <link rel="stylesheet" href="~/lib/AdminLTE/bower_components/bootstrap-daterangepicker/daterangepicker.css" />
 13     <link rel="stylesheet" href="~/lib/AdminLTE/plugins/iCheck/all.css" />
 14 }
 15 
 16 <div class="row">
 17     <div class="col-md-12">
 18         <div class="box box-success">
 19             <div class="box-header with-border">
 20                 <h3 class="box-title"><i class="fa fa-map-marker text-light-blue margin-r-5"></i>地域分布</h3>
 21                 <div class="box-tools pull-right">
 22                     <button type="button" class="btn btn-box-tool" data-widget="collapse">
 23                         <i class="fa fa-minus"></i>
 24                     </button>
 25                     <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 26                 </div>
 27             </div>
 28             <div class="box-body">
 29                 <div class="row">
 30                     <div class="col-md-12">
 31                         <!-- 时间筛选 -->
 32                         <form class="form-inline" role="form">
 33                             <div class="form-group margin-r-15">
 34                                 <label class="margin-r-5">时间段:</label>
 35                                 <div class="input-group">
 36                                     <div class="input-group-addon">
 37                                         <i class="fa fa-clock-o"></i>
 38                                     </div>
 39                                     <input type="text" class="form-control" id="dateRange">
 40                                 </div>
 41                             </div>
 42                             <div class="form-group margin-r-10">
 43                                 <label class="margin-r-10">
 44                                     <input type="radio" name="rdDateRange" class="margin-r-15" id="rdToday" checked> 今天
 45                                 </label>
 46                                 <label class="margin-r-10">
 47                                     <input type="radio" name="rdDateRange" class="margin-r-15" id="rdYesterday"> 昨天
 48                                 </label>
 49                                 <label class="margin-r-10">
 50                                     <input type="radio" name="rdDateRange" class="margin-r-15" id="rdLast7Days"> 最近7天
 51                                 </label>
 52                                 <label class="margin-r-10">
 53                                     <input type="radio" name="rdDateRange" class="margin-r-15" id="rdLast30Days"> 最近30天
 54                                 </label>
 55                             </div>
 56                             <div class="form-group" style="overflow-x:auto;">
 57                                 <table class="summary-table">
 58                                     <tbody>
 59                                         <tr>
 60                                             <td class="text-muted">
 61                                                 <span class="text">
 62                                                     浏览量(PV)
 63                                                     <i class="fa fa-question-circle question-tooltip" data-toggle="tooltip" data-placement="bottom"
 64                                                        title="即通常说的Page View(PV)，用户每打开一个网站页面就被记录1次。用户多次打开同一页面，浏览量值累计。"></i>
 65                                                 </span>
 66                                                 <div id="pv_count"></div>
 67                                             </td>
 68                                             <td class="text-muted">
 69                                                 <span class="text">
 70                                                     访客数(UV)
 71                                                     <i class="fa fa-question-circle question-tooltip" data-toggle="tooltip" data-placement="bottom"
 72                                                        title="一天之内您网站的独立访客数(以Cookie为依据)，一天内同一访客多次访问您网站只计算1个访客。"></i>
 73                                                 </span>
 74                                                 <div id="visitor_count"></div>
 75                                             </td>
 76                                             <td class="text-muted">
 77                                                 <span class="text">
 78                                                     IP数
 79                                                     <i class="fa fa-question-circle question-tooltip" data-toggle="tooltip" data-placement="bottom"
 80                                                        title="一天之内您网站的独立访问ip数。"></i>
 81                                                 </span>
 82                                                 <div id="ip_count"></div>
 83                                             </td>
 84                                             <td class="text-muted">
 85                                                 <span class="text">
 86                                                     跳出率
 87                                                     <i class="fa fa-question-circle question-tooltip" data-toggle="tooltip" data-placement="bottom"
 88                                                        title="只浏览了一个页面便离开了网站的访问次数占总的访问次数的百分比。"></i>
 89                                                 </span>
 90                                                 <div id="bounce_ratio"></div>
 91                                             </td>
 92                                             <td class="text-muted">
 93                                                 <span class="text">
 94                                                     平均访问时长
 95                                                     <i class="fa fa-question-circle question-tooltip" data-toggle="tooltip" data-placement="bottom"
 96                                                        title="即每次访问中，打开第一个页面到关闭最后一个页面的平均值，打开一个页面时计算打开关闭的时间差。"></i>
 97                                                 </span>
 98                                                 <div id="avg_visit_time"></div>
 99                                             </td>
100                                         </tr>
101                                     </tbody>
102                                 </table>
103 
104                             </div>
105                         </form>
106                     </div>
107                     <!-- 分布地图 -->
108                     <div class="col-md-6 col-sm-6">
109                         <div class="box-body">
110                             <div id="map-markers" class="text-center" style="height: 420px;">
111                                 <div>浏览量地域分布</div>
112                             </div>
113                         </div>
114                     </div>
115                     <!-- 分布表格 -->
116                     <div class="col-md-4 col-sm-4" style="height: 440px; overflow: auto;">
117                         <table class="table table-bordered" id="districtTable">
118                             <tbody>
119                                 <tr>
120                                     <th style="width: 10px">#</th>
121                                     <th>省份</th>
122                                     <th>浏览量(PV)</th>
123                                     <th>占比</th>
124                                 </tr>
125                             </tbody>
126                         </table>
127                     </div>
128                     <!-- 近一周统计 -->
129                     <div class="col-md-2 col-sm-2">
130                         <div class="pad box-pane-right bg-green" style="min-height: 280px">
131                             <div class="description-block margin-bottom" id="trend_pv_count">
132                                 <div class="sparkbar pad" data-color="#fff"></div>
133                                 <h5 class="description-header"></h5>
134                                 <span class="description-text">浏览量(PV)</span>
135                             </div>
136                             <div class="description-block margin-bottom" id="trend_visitor_count">
137                                 <div class="sparkbar pad" data-color="#fff"></div>
138                                 <h5 class="description-header"></h5>
139                                 <span class="description-text">访客数(UV)</span>
140                             </div>
141                             <div class="description-block" id="trend_ip_count">
142                                 <div class="sparkbar pad" data-color="#fff"></div>
143                                 <h5 class="description-header"></h5>
144                                 <span class="description-text">IP数</span>
145                             </div>
146                             <div class="description-block" id="trend_avg_visit_time">
147                                 <div class="sparkbar pad" data-color="#fff"></div>
148                                 <h5 class="description-header"></h5>
149                                 <span class="description-text">平均访问时长</span>
150                             </div>
151                         </div>
152                     </div>
153                 </div>
154             </div>
155         </div>
156     </div>
157 </div>
158 @section Scripts {
159     <script src="~/lib/AdminLTE/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
160     <script src="~/lib/AdminLTE/plugins/jvectormap/jquery-jvectormap-cn-mill.js"></script>
161     <script src="~/lib/AdminLTE/bower_components/chart.js/Chart.js"></script>
162     <script src="~/lib/AdminLTE/bower_components/jquery-sparkline/dist/jquery.sparkline.js"></script>
163     <script src="~/lib/AdminLTE/bower_components/moment/moment.js"></script>
164     <script src="~/lib/AdminLTE/bower_components/moment/locale/zh-cn.js"></script>
165     <script src="~/lib/AdminLTE/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
166     <script src="~/lib/AdminLTE/plugins/iCheck/icheck.js"></script>
167     <script src="~/js/Tools/SiteAnalytics.js"></script>
168 }

SiteAnalytics.js中，定义jvectormap显示样式，动态获取区域分析数据后， 设置数据集mapObject.series.regions[0].setValues(visitorsData);

 1 var options = {
 2     map: 'cn_mill',
 3     backgroundColor: 'transparent',
 4     regionStyle: {
 5         initial      : {
 6         fill            : 'rgba(210, 214, 222, 1)',
 7         'fill-opacity'  : 1,
 8         stroke          : 'none',
 9         'stroke-width'  : 0,
10         'stroke-opacity': 1
11       },
12       hover        : {
13         'fill-opacity': 0.7,
14         cursor        : 'pointer'
15       },
16       selected     : {
17         fill: 'yellow'
18       },
19       selectedHover: {}
20     },
21     series: {
22         markers: [{
23             attribute: 'fill',
24             scale: ['#C8EEFF', '#0071A4'],
25             normalizeFunction: 'polynomial',
26             values: [408, 512, 550, 781],
27             legend: {
28                 vertical: true
29             }
30         }],
31         regions: [
32             {
33                 scale: ['#ebf4f9', '#92c1dc'],
34                 normalizeFunction: 'polynomial'
35             }
36         ]
37     },
38     onRegionLabelShow: function (e, el, code) {
39         var html = '';
40         html += '<div style="width:120px;">';
41         html += '<div style="border-bottom:1px solid;padding-bottom:5px;">' + el.html() + '</div>';
42         html += '<div style="margin-top:5px;"><i class="fa fa-circle text-success margin-r-5"></i>浏览量(PV)<span class="pull-right">';
43         if (typeof visitorsData[code] != 'undefined') {
44             html += visitorsData[code];
45         } else {
46             html += 0;
47         }
48         html += '</div>';
49         html += '<div style="margin-top:5px;"><i class="fa fa-circle text-primary margin-r-5"></i>占比<span class="pull-right">';
50         if (typeof pecentData[code] != 'undefined') {
51             html += pecentData[code];
52         } else {
53             html += 0;
54         }
55         html += ' %</div>';
56         el.html(html);
57     }
58 }
59 
60 $('#map-markers').vectorMap(options);

小结

用地图显示区域分析功能至此就已经大体完成，我们加上图表数据的显示，这样内容更丰富些，最后，我们看下效果：

本文链接：https://www.cnblogs.com/lizzie-xhu/p/8258904.html

ASP.NET Core 一步步搭建个人网站（5）_Api模拟和网站分析