echarts学习（4）——地图实现

　　本文记录两点：1.地图实现；2.各省份地图数据。

地图实现

　　都开始做地图了，echarts怎么也有点了解了吧，所以前两句初始化就不多说了，不清楚的可以翻翻我以前的随笔。代码：

var china = document.getElementById("china");
　　var chinaEchart = echarts.init(china);

　　然后是一句增强用户体验的代码，功能是当数据量大，不能一下子刷出来的时候，先显示一个刷新的图标，可有可无：

chinaEchart.showLoading();

然后是获取地图的json数据，这是一种geoJson数据格式，自己去写json数据还是不要想了，可以说里面都是有一个个数据组成的点线面，随笔一个小图形都上千行数据，自己做图的话都是用工具画出来的，文末会说。

 1 $.get(mapUrl+\'china.json\',function (geoJson) {
 2     chinaEchart.hideLoading();
 3     echarts.registerMap(\'china\', geoJson);
 4     var chinaOption = {
 5         visualMap: {
 6             min: 0,
 7             max: 150,
 8             text: [\'High\', \'Low\'],
 9             realtime: false,
10             calculable: true,
11             inRange: {
12                 color: [\'lightskyblue\', \'yellow\', \'orangered\']
13             },
14             textStyle:{
15                 color:\'lightskyblue\'
16             }
17         },
18         series: [{
19             type: \'map\',
20             mapType: \'china\',
21             data: [
22                 //value2代表唯一标识
23                 {name: \'河北\', value: 50, value2: 1},
24                 {name: \'北京\', value: 100, value2: 2},
25                 {name: \'天津\', value: 80, value2: 3},
26                 {name: \'山西\', value: 20, value2: 4},
27                 {name: \'内蒙古\', value: 40, value2: 5},
28                 {name: \'辽宁\', value: 10, value2: 6},
29                 {name: \'吉林\', value: 50, value2: 7},
30                 {name: \'黑龙江\', value: 100, value2: 8},
31                 {name: \'上海\', value: 80, value2: 9},
32                 {name: \'江苏\', value: 20, value2: 10},
33                 {name: \'浙江\', value: 40, value2: 11},
34                 {name: \'安徽\', value: 10, value2: 12},
35                 {name: \'福建\', value: 50, value2: 13},
36                 {name: \'江西\', value: 100, value2: 14},
37                 {name: \'山东\', value: 80, value2: 15},
38                 {name: \'河南\', value: 20, value2: 16},
39                 {name: \'湖北\', value: 40, value2: 17},
40                 {name: \'湖南\', value: 10, value2: 18},
41                 {name: \'广东\', value: 50, value2: 19},
42                 {name: \'广西\', value: 100, value2: 20},
43                 {name: \'海南\', value: 80, value2: 21},
44                 {name: \'四川\', value: 20, value2: 22},
45                 {name: \'贵州\', value: 40, value2: 23},
46                 {name: \'云南\', value: 0, value2: 24},
47                 {name: \'重庆\', value: 0, value2: 25},
48                 {name: \'西藏\', value: 0, value2: 26},
49                 {name: \'陕西\', value: 0, value2: 27},
50                 {name: \'甘肃\', value: 0, value2: 28},
51                 {name: \'青海\', value: 0, value2: 29},
52                 {name: \'宁夏\', value: 0, value2: 30},
53                 {name: \'新疆\', value: 0, value2: 31},
54                 {name: \'香港\', value: 0, value2: 32},
55                 {name: \'澳门\', value: 0, value2: 33},
56                 {name: \'台湾\', value: 0, value2: 34}
57             ],
58             label: {
59                 normal: {
60                     show: true, //显示省份标签
61                     textStyle: {
62                         color: "#eee"
63                     } //省份标签字体颜色
64                 },
65                 emphasis: { //对应的鼠标悬浮效果
66                     show: true,
67                     textStyle: {
68                         color: "#515"
69                     }
70                 }
71             },
72             aspectScale: 0.75,//这个参数用于 scale 地图的长宽比。最终的 aspect 的计算方式是：geoBoundingRect.width / geoBoundingRect.height * aspectScale
73             zoom: 1,//当前视角的缩放比例。
74 itemStyle: {                
75 normal: {                    
76 borderWidth: .5, //区域边框宽度
77 borderColor: \'#009fe8\', //区域边框颜色
78 areaColor: "#18d5d1", //区域颜色
79                 },
80 emphasis: {//鼠标滑过地图高亮的相关设置
81 borderWidth: .5,
82 borderColor: \'#4b0082\',
83 areaColor: "#CDB30A",
84                 }            }
85 ,
86 top:0,
87 left:\'center\',
88 bottom:0
89         }]    }
90 ;
91 chinaEchart.setOption(chinaOption);})

　　本来不想贴这么多代码的，看着心烦，不过很多人第一次做地图，估计也不一定有个跑的通的demo，就把自己做的一个地图放上吧，最起码写的注释多一些。

　　需要注意的是里面第三行代码，巨坑：

echarts.registerMap(\'china\', geoJson);

　　看清楚是registerMap，我也忘了是ide提示的还是看的别人的demo，不是这个方法，而是一个长得很像很像的另一个api，好像是版本问题？

　　稍微解释一下上面的代码：

　　第一行：通过ajax获取服务器端geojson数据，当然我这个是放前端模拟的一个json文件。

　　第二行：数据都获取成功了，关闭以前那个刷新动画。

　　第三行：把这个数据告诉是谁要用，这里的china要和后面series里mapType的值对应？有段时间了，忘了。

　　后面的代码就是常规配置，最后联系echarts对象和参数了，和普通图表一样。

各省份地图数据：

　　网上各种找各省份的地图数据，看的揪心。给大家一个找到各省份json数据的方式吧。

　　用git下载echarts在github上的demo，方法：

　　1.打开github地址：https://github.com/apache/incubator-echarts/tree/4.8.0

　　2.点击红框1，弹出下载的地址，然后点击红框2，复制地址。

3.下载demo，如果没有git要先下载git，git到处都有，甚至360软件管家都有。下载后在要放echarts的demo的文件夹空白处右键，选择Git Bash Here，打开命令行界面后等待出现如图所示：

Administrator@Lize-PC MINGW64 /d/mango/testgit/incubator-echarts (master) $

 　　然后敲命令：git clone https://github.com/apache/incubator-echarts.git

　　注意复制黏贴地址只能用鼠标右键操作，快捷键在命令行有其他作用。

4.下载完毕后，在下载的文件中按照路径incubator-echarts\map\json\province找到各省份json数据，替换上面的china.json就能直接使用。好像还有js调用api的方式实现各省份的地图，js文件也在同目录下，这个不太清楚，因为项目还需要自己画地图，所以这种方式没尝试。

附：

1.可以根据一个图片里某个城镇或者物体的形状自己画地图：

http://geojson.io

这是个神奇的网站，可以自己画地图，右侧得到的就是直接能被echarts使用的json数据。

2.城镇地图获取：

http://datav.aliyun.com/tools/atlas/#&lat=31.769817845138945&lng=104.29901249999999&zoom=4

这个好像只能获取到县级，至于更小的级别，用上面io网站比着地图自己画吧。