博客 城市訪問量統計並且通過Echarts+百度地圖展示
本篇講解一下 如何在Vue 中使用 Echarts + 百度地圖 統計 博客訪問量 並且通過QQWry 解析 ip 地址 利用Echarts 展示出來
效果圖如下：
1.純真Ip地址庫 QQWry
這是我在github上找的 java版本的 解析 qqwry的
1.1 maven 引入 qqwry
<code> <
dependency
><
groupId
>com.github.jarodgroupId
><
artifactId
>qqwry-javaartifactId
><
version
>0.7.0version
>dependency
>/<code>
引入後可以看到 該jar 包其實內部已經引入了 qqwry.dat 庫了
使用教程：
<code>QQWry qqwry = new QQWry(); //load
qqwry.datfrom
classpath QQWry qqwry =new
QQWry(Paths.get("path/to/qqwry.dat"
)); //load
qqwry.datfrom
java.nio.file.Pathbyte
[]data
= Files.readAllBytes(Paths.get("path/to/qqwry.dat"
)); QQWry qqwry = new QQWry(data); //create
QQWrywith
provideddata
String
myIP ="127.0.0.1"
;IPZone ipzone = qqwry.findIP(myIP); System.out.printf("%s, %s", ipzone.getMainInfo(), ipzone.getSubInfo()); // 江蘇省無錫市, 電信 /<code>
1.2 QQWryUtils
用於提供 一個靜態的 QQWry 加載 qqwry.dat ，並且提供根據ip 獲取 IpZone
<code>public
class
QQWryUtils
{private
static
QQWry qqWry;static
{try
{ qqWry =new
QQWry(); }catch
(IOException e) { e.printStackTrace(); } }public
static
void
main
(String[] args)
throws IOException { QQWry qqWry =new
QQWry(); IPZone ipZone = qqWry.findIP("58.214.17.66"
); System.out.printf
("%s, %s"
, ipZone.getMainInfo(), ipZone.getSubInfo()); }public
static
IPZonegetIpZoneByIp
(String ip)
{return
qqWry.findIP(ip); } }/<code>
2.提供攔截器解析Ip並放入隊列
給SpringMVC 提供一個攔截器，在攔截器中 用於獲取當前的請求ip 並且通過 QQWryUtils 解析該ip ，封裝成IpAccessInfo 對象 存入 linkedBlockingQueue 隊列中去，這裡只是簡單處理下
<code> 4jpublic
class
AccessRecordInterceptor
extends
HandlerInterceptorAdapter
{public
boolean
preHandle
(HttpServletRequest request, HttpServletResponse response, Object handler)
throws
Exception { String ip = IpUtil.getIpAddress(request); log.info("【請求者 ip : {} 】"
, ip); IPZone ipZone = QQWryUtils.getIpZoneByIp(ip); log.info("【解析到 城市: {}】"
, ipZone.getMainInfo()); IpAccessInfo ipAccessInfo =new
IpAccessInfo(); ipAccessInfo.setCity(ipZone.getMainInfo()); ipAccessInfo.setIp(ip); ipAccessInfo.setOperators(ipZone.getSubInfo());try
{ IpQueue.linkedBlockingQueue.add(ipAccessInfo); }catch
(IllegalStateException e) { log.warn("隊列已滿 "
); }return
true
; } }/<code>
IpAccessInfo 我這裡入庫ip 信息
<code>@Data
@Entity
@EntityListeners
(AuditingEntityListener.class) public class IpAccessInfo {@Id
@GeneratedValue
(strategy = GenerationType.IDENTITY) private Long id;private
String
ip
;private
String
city
;private
String
operators
; }/<code>
3.提供線程消費隊列，並且根據城市記錄訪問量
這裡提供 線程消費 隊列 並且使用redis的自增 記錄每個城市的訪問量，並且使用SpringBoot的 CommandLineRunner 接口，在項目啟動的時候 加載初始數據
<code> (value =1
) 4jpublic
class
IpQueue
implements
CommandLineRunner
{public
static
final
LinkedBlockingQueue linkedBlockingQueue =new
LinkedBlockingQueue(10000
);private
ThreadPoolTaskExecutor threadPoolTaskExecutor;private
IpAccessInfoRepository ipAccessInfoRepository;private
IpAccessCountRepository ipAccessCountRepository;private
StringRedisTemplate redisTemplate;public
void
run
(String... args)
throws
Exception { ipAccessCountRepository.findAll().forEach(ipAccessCount -> {if
(!redisTemplate.hasKey(ipAccessCount.getCity())) { redisTemplate.opsForValue().set(ipAccessCount.getCity(), String.valueOf(ipAccessCount.getCount())); }else
{ log.info("【存在： {} 】"
, ipAccessCount.getCity()); } }); log.info("【服務啟動 -------------- 監聽 隊列 IpQueue 】"
); IpAccessThread ipAccessThread =new
IpAccessThread(linkedBlockingQueue, ipAccessInfoRepository, redisTemplate); threadPoolTaskExecutor.submit(ipAccessThread); }static
class
IpAccessThread
implements
Runnable
{private
LinkedBlockingQueue linkedBlockingQueue;private
IpAccessInfoRepository ipAccessInfoRepository;private
RedisTemplate redisTemplate;public
IpAccessThread
(LinkedBlockingQueue linkedBlockingQueue, IpAccessInfoRepository ipAccessInfoRepository, RedisTemplate redisTemplate)
{this
.linkedBlockingQueue = linkedBlockingQueue;this
.ipAccessInfoRepository = ipAccessInfoRepository;this
.redisTemplate = redisTemplate; }public
void
run
()
{while
(true
) {try
{ System.out.println("開始獲取 : "
); IpAccessInfo accessInfo = linkedBlockingQueue.take(); System.out.println("監聽到 : "
+ accessInfo);if
(accessInfo.getCity().contains("省"
) && accessInfo.getCity().contains("市"
)) { String city = accessInfo.getCity(); city = city.substring(city.indexOf("省"
) +1
, city.indexOf("市"
));if
(redisTemplate.hasKey(city)) { redisTemplate.opsForValue().increment(city); } }else
{ log.error("【異常 地理位置 {} 】"
, accessInfo.getCity()); } ipAccessInfoRepository.save(accessInfo); }catch
(InterruptedException e) { e.printStackTrace(); } } } } }/<code>
4. Echarts + 百度地圖
由於本博客前端是用Vue 編寫的，所以下面的引入就是在Vue下引入的方式
4.1 在public/index.html中添加以下代碼
ak密鑰： 就是百度地圖AK密鑰，需要自己去百度地圖申請，或者網上找可用的ak
53oVIOgmSIejwV7EfphPgTynOZbIiVYu 網上找的可用的密鑰
<code><
script
type
="text/javascript"
src
="http://api.map.baidu.com/api?v=2.0&ak=你的密鑰"
>script
>/<code>
4.2 在vue.config.js中添加配置
主要是 externals 部分
<code>configureWebpack
: {name
: name,resolve
: {alias
: {'@'
: resolve('src'
) } },externals
: {'BMap'
:'BMap'
,'BMap_Symbol_SHAPE_POINT'
:'BMap_Symbol_SHAPE_POINT'
} },/<code>
4.3 最後在vue main.js 文件中引入
<code>import
BMapfrom
'BMap require('
echarts/extension/bmap/bmap')
/<code>
4.4 編寫展示Echarts+百度地圖的組件
可以參考echarts 網站https://echarts.apache.org/zh/index.html
需要注意 我這裡是從後臺拿的數據 ，是通過上面攔截器解析ip 後 記錄每個城市對應的訪問量存入 redis中的。
注意如果需要擴展其他城市，可以找到城市的經緯度，然後擴展 geoCoordMap 就行了。。
<code>
id="myChart"
style="width:100%;height:
1050px">
import
{
ipAccess
}
from
"@/api/charts/ip_access_api"
;
export
default
{
name:
"IpContent"
,
components:
{},
data()
{
return
{
chartData:
[
{
name:
"海門"
,
value:
9
},
{
name:
"鄂爾多斯"
,
value:
12
},
{
name:
"招遠"
,
value:
12
},
{
name:
"舟山"
,
value:
12
},
{
name:
"齊齊哈爾"
,
value:
14
},
{
name:
"鹽城"
,
value:
15
},
{
name:
"赤峰"
,
value:
16
},
{
name:
"青島"
,
value:
18
},
{
name:
"乳山"
,
value:
18
},
{
name:
"金昌"
,
value:
19
},
{
name:
"泉州"
,
value:
21
},
{
name:
"萊西"
,
value:
21
},
{
name:
"日照"
,
value:
21
},
{
name:
"膠南"
,
value:
22
},
{
name:
"南通"
,
value:
23
},
{
name:
"拉薩"
,
value:
24
},
{
name:
"雲浮"
,
value:
24
},
{
name:
"梅州"
,
value:
25
},
{
name:
"文登"
,
value:
25
},
{
name:
"上海"
,
value:
25
},
{
name:
"攀枝花"
,
value:
25
},
{
name:
"威海"
,
value:
25
},
{
name:
"承德"
,
value:
25
},
{
name:
"廈門"
,
value:
26
},
{
name:
"汕尾"
,
value:
26
},
{
name:
"潮州"
,
value:
26
},
{
name:
"丹東"
,
value:
27
},
{
name:
"太倉"
,
value:
27
},
{
name:
"曲靖"
,
value:
27
},
{
name:
"煙臺"
,
value:
28
},
{
name:
"福州"
,
value:
29
},
{
name:
"瓦房店"
,
value:
30
},
{
name:
"即墨"
,
value:
30
},
{
name:
"撫順"
,
value:
31
},
{
name:
"玉溪"
,
value:
31
},
{
name:
"張家口"
,
value:
31
},
{
name:
"陽泉"
,
value:
31
},
{
name:
"萊州"
,
value:
32
},
{
name:
"湖州"
,
value:
32
},
{
name:
"汕頭"
,
value:
32
},
{
name:
"崑山"
,
value:
33
},
{
name:
"寧波"
,
value:
33
},
{
name:
"湛江"
,
value:
33
},
{
name:
"揭陽"
,
value:
34
},
{
name:
"榮成"
,
value:
34
},
{
name:
"連雲港"
,
value:
35
},
{
name:
"葫蘆島"
,
value:
35
},
{
name:
"常熟"
,
value:
36
},
{
name:
"東莞"
,
value:
36
},
{
name:
"河源"
,
value:
36
},
{
name:
"淮安"
,
value:
36
},
{
name:
"泰州"
,
value:
36
},
{
name:
"南寧"
,
value:
37
},
{
name:
"營口"
,
value:
37
},
{
name:
"惠州"
,
value:
37
},
{
name:
"江陰"
,
value:
37
},
{
name:
"蓬萊"
,
value:
37
},
{
name:
"韶關"
,
value:
38
},
{
name:
"嘉峪關"
,
value:
38
},
{
name:
"廣州"
,
value:
38
},
{
name:
"延安"
,
value:
38
},
{
name:
"太原"
,
value:
39
},
{
name:
"清遠"
,
value:
39
},
{
name:
"中山"
,
value:
39
},
{
name:
"昆明"
,
value:
39
},
{
name:
"壽光"
,
value:
40
},
{
name:
"盤錦"
,
value:
40
},
{
name:
"長治"
,
value:
41
},
{
name:
"深圳"
,
value:
41
},
{
name:
"珠海"
,
value:
42
},
{
name:
"宿遷"
,
value:
43
},
{
name:
"咸陽"
,
value:
43
},
{
name:
"銅川"
,
value:
44
},
{
name:
"平度"
,
value:
44
},
{
name:
"佛山"
,
value:
44
},
{
name:
"海口"
,
value:
44
},
{
name:
"江門"
,
value:
45
},
{
name:
"章丘"
,
value:
45
},
{
name:
"肇慶"
,
value:
46
},
{
name:
"大連"
,
value:
47
},
{
name:
"臨汾"
,
value:
47
},
{
name:
"吳江"
,
value:
47
},
{
name:
"石嘴山"
,
value:
49
},
{
name:
"瀋陽"
,
value:
50
},
{
name:
"蘇州"
,
value:
50
},
{
name:
"茂名"
,
value:
50
},
{
name:
"嘉興"
,
value:
51
},
{
name:
"長春"
,
value:
51
},
{
name:
"膠州"
,
value:
52
},
{
name:
"銀川"
,
value:
52
},
{
name:
"張家港"
,
value:
52
},
{
name:
"三門峽"
,
value:
53
},
{
name:
"錦州"
,
value:
54
},
{
name:
"南昌"
,
value:
54
},
{
name:
"柳州"
,
value:
54
},
{
name:
"三亞"
,
value:
54
},
{
name:
"自貢"
,
value:
56
},
{
name:
"吉林"
,
value:
56
},
{
name:
"陽江"
,
value:
57
},
{
name:
"瀘州"
,
value:
57
},
{
name:
"西寧"
,
value:
57
},
{
name:
"宜賓"
,
value:
58
},
{
name:
"呼和浩特"
,
value:
58
},
{
name:
"成都"
,
value:
58
},
{
name:
"大同"
,
value:
58
},
{
name:
"鎮江"
,
value:
59
},
{
name:
"桂林"
,
value:
59
},
{
name:
"張家界"
,
value:
59
},
{
name:
"宜興"
,
value:
59
},
{
name:
"北海"
,
value:
60
},
{
name:
"西安"
,
value:
61
},
{
name:
"金壇"
,
value:
62
},
{
name:
"東營"
,
value:
62
},
{
name:
"牡丹江"
,
value:
63
},
{
name:
"遵義"
,
value:
63
},
{
name:
"紹興"
,
value:
63
},
{
name:
"揚州"
,
value:
64
},
{
name:
"常州"
,
value:
64
},
{
name:
"濰坊"
,
value:
65
},
{
name:
"重慶"
,
value:
66
},
{
name:
"台州"
,
value:
67
},
{
name:
"南京"
,
value:
67
},
{
name:
"濱州"
,
value:
70
},
{
name:
"貴陽"
,
value:
71
},
{
name:
"無錫"
,
value:
71
},
{
name:
"本溪"
,
value:
71
},
{
name:
"克拉瑪依"
,
value:
72
},
{
name:
"渭南"
,
value:
72
},
{
name:
"馬鞍山"
,
value:
72
},
{
name:
"寶雞"
,
value:
72
},
{
name:
"焦作"
,
value:
75
},
{
name:
"句容"
,
value:
75
},
{
name:
"北京"
,
value:
79
},
{
name:
"徐州"
,
value:
79
},
{
name:
"衡水"
,
value:
80
},
{
name:
"包頭"
,
value:
80
},
{
name:
"綿陽"
,
value:
80
},
{
name:
"烏魯木齊"
,
value:
84
},
{
name:
"棗莊"
,
value:
84
},
{
name:
"杭州"
,
value:
84
},
{
name:
"淄博"
,
value:
85
},
{
name:
"鞍山"
,
value:
86
},
{
name:
"溧陽"
,
value:
86
},
{
name:
"庫爾勒"
,
value:
86
},
{
name:
"安陽"
,
value:
90
},
{
name:
"開封"
,
value:
90
},
{
name:
"濟南"
,
value:
92
},
{
name:
"德陽"
,
value:
93
},
{
name:
"溫州"
,
value:
95
},
{
name:
"九江"
,
value:
96
},
{
name:
"邯鄲"
,
value:
98
},
{
name:
"臨安"
,
value:
99
},
{
name:
"蘭州"
,
value:
99
},
{
name:
"滄州"
,
value:
100
},
{
name:
"臨沂"
,
value:
103
},
{
name:
"南充"
,
value:
104
},
{
name:
"天津"
,
value:
105
},
{
name:
"富陽"
,
value:
106
},
{
name:
"泰安"
,
value:
112
},
{
name:
"諸暨"
,
value:
112
},
{
name:
"鄭州"
,
value:
113
},
{
name:
"哈爾濱"
,
value:
114
},
{
name:
"聊城"
,
value:
116
},
{
name:
"蕪湖"
,
value:
117
},
{
name:
"唐山"
,
value:
119
},
{
name:
"平頂山"
,
value:
119
},
{
name:
"邢臺"
,
value:
119
},
{
name:
"德州"
,
value:
120
},
{
name:
"濟寧"
,
value:
120
},
{
name:
"荊州"
,
value:
127
},
{
name:
"宜昌"
,
value:
130
},
{
name:
"義烏"
,
value:
132
},
{
name:
"麗水"
,
value:
133
},
{
name:
"洛陽"
,
value:
134
},
{
name:
"秦皇島"
,
value:
136
},
{
name:
"株洲"
,
value:
143
},
{
name:
"石家莊"
,
value:
147
},
{
name:
"萊蕪"
,
value:
148
},
{
name:
"常德"
,
value:
152
},
{
name:
"保定"
,
value:
153
},
{
name:
"湘潭"
,
value:
154
},
{
name:
"金華"
,
value:
157
},
{
name:
"岳陽"
,
value:
169
},
{
name:
"長沙"
,
value:
175
},
{
name:
"衢州"
,
value:
177
},
{
name:
"廊坊"
,
value:
193
},
{
name:
"菏澤"
,
value:
1941
},
{
name:
"合肥"
,
value:
2291
},
{
name:
"武漢"
,
value:
2731
},
{
name:
"大慶"
,
value:
2791
},
],
geoCoordMap:
{
海門:
[121.15,
31.89
],
鄂爾多斯:
[109.781327,
39.608266
],
招遠:
[120.38,
37.35
],
舟山:
[122.207216,
29.985295
],
齊齊哈爾:
[123.97,
47.33
],
鹽城:
[120.13,
33.38
],
赤峰:
[118.87,
42.28
],
青島:
[120.33,
36.07
],
乳山:
[121.52,
36.89
],
金昌:
[102.188043,
38.520089
],
泉州:
[118.58,
24.93
],
萊西:
[120.53,
36.86
],
日照:
[119.46,
35.42
],
膠南:
[119.97,
35.88
],
南通:
[121.05,
32.08
],
拉薩:
[91.11,
29.97
],
雲浮:
[112.02,
22.93
],
梅州:
[116.1,
24.55
],
文登:
[122.05,
37.2
],
上海:
[121.48,
31.22
],
攀枝花:
[101.718637,
26.582347
],
威海:
[122.1,
37.5
],
承德:
[117.93,
40.97
],
廈門:
[118.1,
24.46
],
汕尾:
[115.375279,
22.786211
],
潮州:
[116.63,
23.68
],
丹東:
[124.37,
40.13
],
太倉:
[121.1,
31.45
],
曲靖:
[103.79,
25.51
],
煙臺:
[121.39,
37.52
],
福州:
[119.3,
26.08
],
瓦房店:
[121.979603,
39.627114
],
即墨:
[120.45,
36.38
],
撫順:
[123.97,
41.97
],
玉溪:
[102.52,
24.35
],
張家口:
[114.87,
40.82
],
陽泉:
[113.57,
37.85
],
萊州:
[119.942327,
37.177017
],
湖州:
[120.1,
30.86
],
汕頭:
[116.69,
23.39
],
崑山:
[120.95,
31.39
],
寧波:
[121.56,
29.86
],
湛江:
[110.359377,
21.270708
],
揭陽:
[116.35,
23.55
],
榮成:
[122.41,
37.16
],
連雲港:
[119.16,
34.59
],
葫蘆島:
[120.836932,
40.711052
],
常熟:
[120.74,
31.64
],
東莞:
[113.75,
23.04
],
河源:
[114.68,
23.73
],
淮安:
[119.15,
33.5
],
泰州:
[119.9,
32.49
],
南寧:
[108.33,
22.84
],
營口:
[122.18,
40.65
],
惠州:
[114.4,
23.09
],
江陰:
[120.26,
31.91
],
蓬萊:
[120.75,
37.8
],
韶關:
[113.62,
24.84
],
嘉峪關:
[98.289152,
39.77313
],
廣州:
[113.23,
23.16
],
延安:
[109.47,
36.6
],
太原:
[112.53,
37.87
],
清遠:
[113.01,
23.7
],
中山:
[113.38,
22.52
],
昆明:
[102.73,
25.04
],
壽光:
[118.73,
36.86
],
盤錦:
[122.070714,
41.119997
],
長治:
[113.08,
36.18
],
深圳:
[114.07,
22.62
],
珠海:
[113.52,
22.3
],
宿遷:
[118.3,
33.96
],
咸陽:
[108.72,
34.36
],
銅川:
[109.11,
35.09
],
平度:
[119.97,
36.77
],
佛山:
[113.11,
23.05
],
海口:
[110.35,
20.02
],
江門:
[113.06,
22.61
],
章丘:
[117.53,
36.72
],
肇慶:
[112.44,
23.05
],
大連:
[121.62,
38.92
],
臨汾:
[111.5,
36.08
],
吳江:
[120.63,
31.16
],
石嘴山:
[106.39,
39.04
],
瀋陽:
[123.38,
41.8
],
蘇州:
[120.62,
31.32
],
茂名:
[110.88,
21.68
],
嘉興:
[120.76,
30.77
],
長春:
[125.35,
43.88
],
膠州:
[120.03336,
36.264622
],
銀川:
[106.27,
38.47
],
張家港:
[120.555821,
31.875428
],
三門峽:
[111.19,
34.76
],
錦州:
[121.15,
41.13
],
南昌:
[115.89,
28.68
],
柳州:
[109.4,
24.33
],
三亞:
[109.511909,
18.252847
],
自貢:
[104.778442,
29.33903
],
吉林:
[126.57,
43.87
],
陽江:
[111.95,
21.85
],
瀘州:
[105.39,
28.91
],
西寧:
[101.74,
36.56
],
宜賓:
[104.56,
29.77
],
呼和浩特:
[111.65,
40.82
],
成都:
[104.06,
30.67
],
大同:
[113.3,
40.12
],
鎮江:
[119.44,
32.2
],
桂林:
[110.28,
25.29
],
張家界:
[110.479191,
29.117096
],
宜興:
[119.82,
31.36
],
北海:
[109.12,
21.49
],
西安:
[108.95,
34.27
],
金壇:
[119.56,
31.74
],
東營:
[118.49,
37.46
],
牡丹江:
[129.58,
44.6
],
遵義:
[106.9,
27.7
],
紹興:
[120.58,
30.01
],
揚州:
[119.42,
32.39
],
常州:
[119.95,
31.79
],
濰坊:
[119.1,
36.62
],
重慶:
[106.54,
29.59
],
台州:
[121.420757,
28.656386
],
南京:
[118.78,
32.04
],
濱州:
[118.03,
37.36
],
貴陽:
[106.71,
26.57
],
無錫:
[120.29,
31.59
],
本溪:
[123.73,
41.3
],
克拉瑪依:
[84.77,
45.59
],
渭南:
[109.5,
34.52
],
馬鞍山:
[118.48,
31.56
],
寶雞:
[107.15,
34.38
],
焦作:
[113.21,
35.24
],
句容:
[119.16,
31.95
],
北京:
[116.46,
39.92
],
徐州:
[117.2,
34.26
],
衡水:
[115.72,
37.72
],
包頭:
[110,
40.58
],
綿陽:
[104.73,
31.48
],
烏魯木齊:
[87.68,
43.77
],
棗莊:
[117.57,
34.86
],
杭州:
[120.19,
30.26
],
淄博:
[118.05,
36.78
],
鞍山:
[122.85,
41.12
],
溧陽:
[119.48,
31.43
],
庫爾勒:
[86.06,
41.68
],
安陽:
[114.35,
36.1
],
開封:
[114.35,
34.79
],
濟南:
[117,
36.65
],
德陽:
[104.37,
31.13
],
溫州:
[120.65,
28.01
],
九江:
[115.97,
29.71
],
邯鄲:
[114.47,
36.6
],
臨安:
[119.72,
30.23
],
蘭州:
[103.73,
36.03
],
滄州:
[116.83,
38.33
],
臨沂:
[118.35,
35.05
],
南充:
[106.110698,
30.837793
],
天津:
[117.2,
39.13
],
富陽:
[119.95,
30.07
],
泰安:
[117.13,
36.18
],
諸暨:
[120.23,
29.71
],
鄭州:
[113.65,
34.76
],
哈爾濱:
[126.63,
45.75
],
聊城:
[115.97,
36.45
],
蕪湖:
[118.38,
31.33
],
唐山:
[118.02,
39.63
],
平頂山:
[113.29,
33.75
],
邢臺:
[114.48,
37.05
],
德州:
[116.29,
37.45
],
濟寧:
[116.59,
35.38
],
荊州:
[112.239741,
30.335165
],
宜昌:
[111.3,
30.7
],
義烏:
[120.06,
29.32
],
麗水:
[119.92,
28.45
],
洛陽:
[112.44,
34.7
],
秦皇島:
[119.57,
39.95
],
株洲:
[113.16,
27.83
],
石家莊:
[114.48,
38.03
],
萊蕪:
[117.67,
36.19
],
常德:
[111.69,
29.05
],
保定:
[115.48,
38.85
],
湘潭:
[112.91,
27.87
],
金華:
[119.64,
29.12
],
岳陽:
[113.09,
29.37
],
長沙:
[113,
28.21
],
衢州:
[118.88,
28.97
],
廊坊:
[116.7,
39.53
],
菏澤:
[115.480656,
35.23375
],
合肥:
[117.27,
31.86
],
武漢:
[114.31,
30.52
],
大慶:
[125.03,
46.58
],
},
};
},
methods:
{
drawLine()
{
var
data
=
this.chartData;
var
geoCoordMap
=
this.geoCoordMap;
//
基於準備好的dom，初始化echarts實例
let
myChart
=
this.$echarts.init(document.getElementById("myChart"));
var
convertData
=
function
(data)
{
var
res
=
[];
for
(var
i
=
0
;
i
<
data.length;
i++)
{
var
geoCoord
=
geoCoordMap[data[i].name];
if
(geoCoord)
{
res.push({
name:
data[i].name,
value:
geoCoord.concat(data[i].value),
});
}
}
return
res;
};
function
renderItem(params,
api)
{
var
coords
=
[
//
[116.7,39.53],
//
[103.73,36.03],
//
[112.91,27.87],
//
[120.65,28.01],
//
[119.57,39.95]
];
var
points
=
[];
for
(var
i
=
0
;
i
<
coords.length;
i++)
{
points.push(api.coord(coords[i]));
}
var
color
=
api.visual("color");
return
{
//
type:
"polygon"
,
//
shape:
{
//
points:
myChart.graphic.clipPointsByRect(points,
{
//
x:
params.coordSys.x,
//
y:
params.coordSys.y,
//
width:
params.coordSys.width,
//
height:
params.coordSys.height,
//
}),
//
},
//
style:
api.style({
//
fill:
color,
//
stroke:
myChart.color.lift(color),
//
}),
};
}
//
繪製圖表
myChart.setOption({
backgroundColor:
"transparent"
,
title:
{
text:
"全國主要城市訪問量"
,
subtext:
"訪問統計"
,
sublink:
"http://www.pm25.in"
,
left:
"center"
,
textStyle:
{
color:
"#fff"
,
},
},
tooltip:
{
trigger:
"item"
,
},
bmap:
{
center:
[107.114129,
37.550339
],
zoom:
5
,
roam:
true
,
mapStyle:
{
styleJson:
[
{
featureType:
"water"
,
elementType:
"all"
,
stylers:
{
color:
"#044161"
,
},
},
{
featureType:
"land"
,
elementType:
"all"
,
stylers:
{
color:
"#004981"
,
},
},
{
featureType:
"boundary"
,
elementType:
"geometry"
,
stylers:
{
color:
"#064f85"
,
},
},
{
featureType:
"railway"
,
elementType:
"all"
,
stylers:
{
visibility:
"off"
,
},
},
{
featureType:
"highway"
,
elementType:
"geometry"
,
stylers:
{
color:
"#004981"
,
},
},
{
featureType:
"highway"
,
elementType:
"geometry.fill"
,
stylers:
{
color:
"#005b96"
,
lightness:
1
,
},
},
{
featureType:
"highway"
,
elementType:
"labels"
,
stylers:
{
visibility:
"off"
,
},
},
{
featureType:
"arterial"
,
elementType:
"geometry"
,
stylers:
{
color:
"#004981"
,
},
},
{
featureType:
"arterial"
,
elementType:
"geometry.fill"
,
stylers:
{
color:
"#00508b"
,
},
},
{
featureType:
"poi"
,
elementType:
"all"
,
stylers:
{
visibility:
"off"
,
},
},
{
featureType:
"green"
,
elementType:
"all"
,
stylers:
{
color:
"#056197"
,
visibility:
"off"
,
},
},
{
featureType:
"subway"
,
elementType:
"all"
,
stylers:
{
visibility:
"off"
,
},
},
{
featureType:
"manmade"
,
elementType:
"all"
,
stylers:
{
visibility:
"off"
,
},
},
{
featureType:
"local"
,
elementType:
"all"
,
stylers:
{
visibility:
"off"
,
},
},
{
featureType:
"arterial"
,
elementType:
"labels"
,
stylers:
{
visibility:
"off"
,
},
},
{
featureType:
"boundary"
,
elementType:
"geometry.fill"
,
stylers:
{
color:
"#029fd4"
,
},
},
{
featureType:
"building"
,
elementType:
"all"
,
stylers:
{
color:
"#1a5787"
,
},
},
{
featureType:
"label"
,
elementType:
"all"
,
stylers:
{
visibility:
"off"
,
},
},
],
},
},
series:
[
{
name:
"訪問統計"
,
type:
"scatter"
,
coordinateSystem:
"bmap"
,
data:
convertData(data),
encode:
{
value:
2
,
},
symbolSize:
function
(val)
{
//
var
value
=
val[2];
//
var
l
=
0
;
//
while
(value
>=
1
)
{
//
value
=
value
/
10
;
//
l++;
//
}
//
var
j
=
Math.pow(10,
l
-
2
);
//
console.log(l);
//
console.log(j);
return
val[2]
/
100
;
//
return
val[2];
},
label:
{
formatter:
"{b}"
,
position:
"right"
,
},
itemStyle:
{
color:
"#ddb926"
,
},
emphasis:
{
label:
{
show:
true
,
},
},
},
{
name:
"Top 5"
,
type:
"effectScatter"
,
coordinateSystem:
"bmap"
,
data:
convertData(
data
.sort(function
(a,
b)
{
return
b.value
-
a.value;
})
.slice(0,
6
)
),
encode:
{
value:
2
,
},
symbolSize:
function
(val)
{
return
val[2]
/
100
;
},
showEffectOn:
"emphasis"
,
rippleEffect:
{
brushType:
"stroke"
,
},
hoverAnimation:
true
,
label:
{
formatter:
"{b}"
,
position:
"right"
,
show:
true
,
},
itemStyle:
{
color:
"#f4e925"
,
shadowBlur:
10
,
shadowColor:
"#333"
,
},
zlevel:
1
,
},
{
type:
"custom"
,
coordinateSystem:
"bmap"
,
//
renderItem:
renderItem,
itemStyle:
{
opacity:
0.5
,
},
animation:
false
,
silent:
true
,
data:
[0],
z:
-10
,
},
],
});
myChart.on("finished",
()
=>
{
//
從echarts對象中獲取bmap對象
var
bmap
=
myChart.getModel().getComponent("bmap").getBMap();
console.log(20180925104046,
bmap.getZoom());
//
設置最小縮放值
bmap.setMinZoom(5);
//
//
設置最大縮放值
bmap.setMaxZoom(5);
//
縮放結束後的事件
bmap.addEventListener("zoomend",
function
()
{
//
打印出當前縮放值
console.log(20180925104046,
bmap.getZoom());
});
});
},
init()
{
ipAccess().then((response)
=>
{
console.log(response);
this.chartData
=
[];
this.chartData
=
response.data;
this.drawLine();
});
},
},
mounted()
{
//1.查詢後臺數據
this.init();
},
};
/<code>
總結
本篇主要記錄一下 關於如何統計網站訪問量，並且利用Echarts + 百度地圖 友好的展示出來
1.提供攔截器 攔截Ip 請求，獲取到 對應的 城市 我這裡使用 純真qqwry，網上也有其他方法。。
2.解析後 可以根據 key = 城市 存入redis中，利用redis 的 自增操作來 統計城市的 訪問量，或者也可以通過Map 等去統計，然後刷入到存儲中 。。 方式很多
3.利用echarts+百度地圖案例，暫時統計的數據，可以參考echarts官網
歡迎訪問 我的博客網站 https://www.askajohnny.com
