地圖統計_博客城市訪問量統計并且通過Echarts+百度地圖展示

本篇講解一下如何在Vue 中使用 Echarts + 百度地圖統計博客訪問量并且通過QQWry 解析 ip 地址利用Echarts 展示出來

效果圖如下：

1.純真Ip地址庫 QQWry

這是我在github上找的 java版本的解析 qqwry的

1.1 maven 引入 ?qqwry

 ? ? ? ? ? ? ? ?<dependency> ? ? ? ? ? ?<groupId>com.github.jarodgroupId> ? ? ? ? ? ?<artifactId>qqwry-javaartifactId> ? ? ? ? ? ?<version>0.7.0version> ? ? ? ?dependency>

引入后可以看到該jar 包其實內部已經引入了 qqwry.dat 庫了

使用教程：

QQWry qqwry = new QQWry(); // load qqwry.dat from classpathQQWry qqwry = new QQWry(Paths.get("path/to/qqwry.dat")); // load qqwry.dat from java.nio.file.Pathbyte[] data = Files.readAllBytes(Paths.get("path/to/qqwry.dat"));QQWry qqwry = new QQWry(data); // create QQWry with provided dataString myIP = "127.0.0.1";IPZone ipzone = qqwry.findIP(myIP);System.out.printf("%s, %s", ipzone.getMainInfo(), ipzone.getSubInfo()); // 江蘇省無錫市, 電信// IANA, 保留地址用于本地回送

1.2 QQWryUtils

用于提供一個靜態的 QQWry 加載 qqwry.dat ，并且提供根據ip 獲取 IpZone

public class QQWryUtils { ? ?private static QQWry qqWry; ? ?static { ? ? ? ?try { ? ? ? ? ? ?qqWry = new QQWry(); ? ? ?  } catch (IOException e) { ? ? ? ? ? ?e.printStackTrace(); ? ? ?  } ?  } ? ?public static IPZone getIpZoneByIp(String ip) { ? ? ? ?return qqWry.findIP(ip); ?  }}

2.提供攔截器解析Ip并放入隊列

給SpringMVC 提供一個攔截器，在攔截器中用于獲取當前的請求ip ?并且通過 QQWryUtils 解析該ip ，封裝成IpAccessInfo 對象存入 linkedBlockingQueue 隊列中去，這里只是簡單處理下

@Slf4jpublic class AccessRecordInterceptor extends HandlerInterceptorAdapter { ? ?/** ? ? * 目前是 解析 ip 并且生成 IpAccessInfo 放入 linkedBlockingQueue 隊列中去 ? ? * ? ? * @param request ? ? * @param response ? ? * @param handler ? ? * @return ? ? * @throws Exception ? ? */ ? ?@Override ? ?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); //這里使用 add方法 當添隊列滿的時候 直接捕獲異常 ? ? ?  } catch (IllegalStateException e) { ? ? ? ? ? ?log.warn("隊列已滿 "); ? ? ?  } ? ? ? ?return true; ?  }}

IpAccessInfo 我這里入庫ip 信息

@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;}

3.提供線程消費隊列，并且根據城市記錄訪問量

這里提供線程消費隊列并且使用redis的自增記錄每個城市的訪問量，并且使用SpringBoot的 ?CommandLineRunner ?接口，在項目啟動的時候加載初始數據

/** * @author johnny * @create 2020-08-15 下午1:56 **/@Component@Order(value = 1)@Slf4jpublic class IpQueue implements CommandLineRunner { ? ?public static final LinkedBlockingQueue<IpAccessInfo> linkedBlockingQueue = new LinkedBlockingQueue(10000); ? ?@Autowired ? ?private ThreadPoolTaskExecutor threadPoolTaskExecutor; ? ?@Autowired ? ?private IpAccessInfoRepository ipAccessInfoRepository; ? ?@Autowired ? ?private IpAccessCountRepository ipAccessCountRepository; ? ?@Autowired ? ?private StringRedisTemplate redisTemplate; ? ?@Override ? ?public void run(String... args) throws Exception { ? ? ?//SpringBoot CommandLineRunner 接口啟動后 該方法會被調用， 進行初始化數據，并且啟動線程監聽隊列 ? ? ? ?ipAccessCountRepository.findAll().forEach(ipAccessCount -> { ? ? ? ? ? ?if (!redisTemplate.hasKey(ipAccessCount.getCity())) { ? ? ? ? ? ? ? ?redisTemplate.opsForValue().set(ipAccessCount.getCity(), String.valueOf(ipAccessCount.getCount())); ? ? ? ? ?  } else { ? ? ? ? ? ? ? ?log.info("【Redis 存在：{} 】", ipAccessCount.getCity()); ? ? ? ? ?  } ? ? ?  }); ? ? ? ?log.info("【服務啟動  --------------  監聽 隊列 IpQueue 】"); ? ? ? ?IpAccessThread ipAccessThread = new IpAccessThread(linkedBlockingQueue, ipAccessInfoRepository, redisTemplate); ? ? ? ?threadPoolTaskExecutor.submit(ipAccessThread); //使用線程池 提交任務 ?  } ? ?static class IpAccessThread implements Runnable { ? ? ? ?private LinkedBlockingQueue<IpAccessInfo> linkedBlockingQueue; ? ? ? ?private IpAccessInfoRepository ipAccessInfoRepository; ? ? ? ?private RedisTemplate redisTemplate; ? ? ? ?public IpAccessThread(LinkedBlockingQueue<IpAccessInfo> linkedBlockingQueue, IpAccessInfoRepository ipAccessInfoRepository, RedisTemplate redisTemplate) { ? ? ? ? ? ?this.linkedBlockingQueue = linkedBlockingQueue; ? ? ? ? ? ?this.ipAccessInfoRepository = ipAccessInfoRepository; ? ? ? ? ? ?this.redisTemplate = redisTemplate; ? ? ?  } ? ? ? ?@Override ? ? ? ?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); //根據城市 key 進行自增 ? ? ? ? ? ? ? ? ? ? ?  } ? ? ? ? ? ? ? ? ?  } else { ? ? ? ? ? ? ? ? ? ? ? ?log.error("【異常 地理位置 {} 】", accessInfo.getCity()); ? ? ? ? ? ? ? ? ?  } ? ? ? ? ? ? ? ? ? ?ipAccessInfoRepository.save(accessInfo); ? ? ? ? ? ? ?  } catch (InterruptedException e) { ? ? ? ? ? ? ? ? ? ?e.printStackTrace(); ? ? ? ? ? ? ?  } ? ? ? ? ?  } ? ? ?  } ?  }}

4. Echarts + 百度地圖

由于本博客前端是用Vue 編寫的，所以下面的引入就是在Vue下引入的方式

4.1 在public/index.html中添加以下代碼

ak密鑰：就是百度地圖AK密鑰，需要自己去百度地圖申請，或者網上找可用的ak

53oVIOgmSIejwV7EfphPgTynOZbIiVYu 網上找的可用的密鑰

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密鑰"></script>

4.2 在vue.config.js中添加配置

主要是 externals 部分

module.exports = {publicPath: './',outputDir: 'dist',assetsDir: 'static',indexPath: 'index.html',productionSourceMap: false, ?configureWebpack: { ? ?// provide the app's title in webpack's name field, so that ? ?// it can be accessed in index.html to inject the correct title. ? ?name: name, ? ?resolve: { ? ? ?alias: { ? ? ? ?'@': resolve('src') ? ?  } ?  }, ? ?externals: { ? ? ? ?'BMap': 'BMap', ? ? ? ?'BMap_Symbol_SHAPE_POINT':'BMap_Symbol_SHAPE_POINT' ?  }  },}

4.3 最后在vue main.js 文件中引入

import BMap from 'BMaprequire('echarts/extension/bmap/bmap')

4.4 編寫展示Echarts+百度地圖的組件

可以參考echarts 網站https://echarts.apache.org/zh/index.html

需要注意我這里是從后臺拿的數據，是通過上面攔截器解析ip 后記錄每個城市對應的訪問量存入 redis中的。
注意如果需要擴展其他城市，可以找到城市的經緯度，然后擴展 geoCoordMap 就行了。。

<template> ?<div> ? ?<div id="myChart" style="width:100%;height: 1050px">div> ?div>template><script>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, ? ? ? ?  }, ? ? ?  ], ? ?  }); ? ? ? ? ? ?//設置 echarts 縮放比例，讓其無法縮放 ? ? ?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()); ? ? ?  }); ? ?  }); ?  }, ? ?//初始化從后臺拿數據 數據的結構和 chartData 一致 ? ?init() { ? ? ?ipAccess().then((response) => { ? ? ? ?console.log(response); ? ? ? ?this.chartData = []; ? ? ? ?this.chartData = response.data; ? ? ? ?this.drawLine(); ? ?  }); ?  },  }, ?mounted() { ? ?//1.查詢后臺數據 ? ?this.init();  },};script><style scoped>style>