本文记录两点：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，方法：

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.可以根据一个图片里某个城镇或者物体的形状自己画地图：

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

2.城镇地图获取：

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