最近的项目要用到一个能展现全国地图的功能，并且全国各个省份显示的颜色不同，点击省份后会返回省份名称。经过反复的查找最终确定了echart这个插件，最后的成果还不错，在这里写下来希望对大家有所帮助。话不多说先看最终的效果图。
最终的效果就是这个样子的啦，感觉还是很好看的，echart这个插件使用还是很简单的，按照官网步骤来就好了。官网地址：http://echarts.baidu.com/index.html
下面就是我实现这个效果的代码了：
1 <!DOCTYPE html> 2 <html style="height: 100%"> 3 4 <head> 5 <meta charset="utf-8"> 6 </head> 7 8 <body style="height: 100%; margin: 0"> 9 <div id="container" style="height: 100%"></div> 10 <script type="text/javascript" src="js/echarts.min.js"></script> 11 12 <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script> 13 14 <script type="text/javascript"> 15 var myChart = echarts.init(document.getElementById("container")); 16 17 option = { 18 19 tooltip: { 20 trigger: \'item\', 21 formatter: \'{b}\' 22 }, 23 24 series: [{ 25 name: \'中国\', 26 type: \'map\', 27 mapType: \'china\', 28 selectedMode: \'single\', 29 roam: false, 30 label: { 31 normal: { 32 show: true 33 }, 34 emphasis: { 35 show: true 36 } 37 }, 38 data: [{ 39 name: \'北京\', 40 itemStyle: { 41 normal: { 42 areaColor: \'#D9EDE1\' 43 } 44 } 45 }, 46 { 47 name: \'天津\', 48 itemStyle: { 49 normal: { 50 areaColor: \'#D9EDE1\' 51 } 52 } 53 }, 54 { 55 name: \'上海\', 56 itemStyle: { 57 normal: { 58 areaColor: \'#FCE1D8\' 59 } 60 } 61 }, 62 { 63 name: \'重庆\', 64 itemStyle: { 65 normal: { 66 areaColor: \'#FBE0EC\' 67 } 68 } 69 }, 70 { 71 name: \'河北\', 72 itemStyle: { 73 normal: { 74 areaColor: \'#FFFDE4\' 75 } 76 } 77 }, 78 { 79 name: \'河南\', 80 itemStyle: { 81 normal: { 82 areaColor: \'#FBE0EC\' 83 } 84 } 85 }, 86 { 87 88 name: \'云南\', 89 itemStyle: { 90 normal: { 91 areaColor: \'#FBE0EC\' 92 } 93 } 94 }, 95 { 96 name: \'辽宁\', 97 itemStyle: { 98 normal: { 99 areaColor: \'#FCE1D8\' 100 } 101 } 102 }, 103 { 104 name: \'黑龙江\', 105 itemStyle: { 106 normal: { 107 areaColor: \'#FCE1D8\' 108 } 109 } 110 }, 111 { 112 name: \'湖南\', 113 itemStyle: { 114 normal: { 115 areaColor: \'#D7EDFB\' 116 } 117 } 118 }, 119 { 120 name: \'安徽\', 121 itemStyle: { 122 normal: { 123 areaColor: \'#FCE1D8\' 124 } 125 } 126 }, 127 { 128 name: \'山东\', 129 itemStyle: { 130 normal: { 131 areaColor: \'#D9EDE1\' 132 } 133 } 134 }, 135 { 136 name: \'新疆\', 137 itemStyle: { 138 normal: { 139 areaColor: \'#D7EDFB\' 140 } 141 } 142 }, 143 { 144 name: \'江苏\', 145 itemStyle: { 146 normal: { 147 areaColor: \'#D7EDFB\' 148 } 149 } 150 }, 151 { 152 name: \'浙江\', 153 itemStyle: { 154 normal: { 155 areaColor: \'#D9EDE1\' 156 } 157 } 158 }, 159 { 160 name: \'江西\', 161 itemStyle: { 162 normal: { 163 areaColor: \'#FBE0EC\' 164 } 165 } 166 }, 167 { 168 name: \'湖北\', 169 itemStyle: { 170 normal: { 171 areaColor: \'#FFFDE4\' 172 } 173 }, 174 selected: true 175 }, 176 { 177 name: \'广西\', 178 itemStyle: { 179 normal: { 180 areaColor: \'#D9EDE1\' 181 } 182 } 183 }, 184 { 185 name: \'甘肃\', 186 itemStyle: { 187 normal: { 188 areaColor: \'#FFFDE4\' 189 } 190 } 191 }, 192 { 193 name: \'山西\', 194 itemStyle: { 195 normal: { 196 areaColor: \'#D9EDE1\' 197 } 198 } 199 }, 200 { 201 name: \'内蒙古\', 202 itemStyle: { 203 normal: { 204 areaColor: \'#D7EDFB\' 205 } 206 } 207 }, 208 { 209 name: \'陕西\', 210 itemStyle: { 211 normal: { 212 areaColor: \'#FCE1D8\' 213 } 214 } 215 }, 216 { 217 name: \'吉林\', 218 itemStyle: { 219 normal: { 220 areaColor: \'#FFFDE4\' 221 } 222 } 223 }, 224 { 225 name: \'福建\', 226 itemStyle: { 227 normal: { 228 areaColor: \'#D7EDFB\' 229 } 230 } 231 }, 232 { 233 name: \'贵州\', 234 itemStyle: { 235 normal: { 236 areaColor: \'#FFFDE4\' 237 } 238 } 239 }, 240 { 241 name: \'广东\', 242 itemStyle: { 243 normal: { 244 areaColor: \'#FCE1D8\' 245 } 246 } 247 }, 248 { 249 name: \'青海\', 250 itemStyle: { 251 normal: { 252 areaColor: \'#FBE0EC\' 253 } 254 } 255 }, 256 { 257 name: \'西藏\', 258 itemStyle: { 259 normal: { 260 areaColor: \'#FFFDE4\' 261 } 262 } 263 }, 264 { 265 name: \'四川\', 266 itemStyle: { 267 normal: { 268 areaColor: \'#D9EDE1\' 269 } 270 } 271 }, 272 { 273 name: \'宁夏\', 274 itemStyle: { 275 normal: { 276 areaColor: \'#FBE0EC\' 277 } 278 } 279 }, 280 { 281 name: \'海南\', 282 itemStyle: { 283 normal: { 284 areaColor: \'#FBE0EC\' 285 } 286 } 287 }, 288 { 289 name: \'台湾\', 290 itemStyle: { 291 normal: { 292 areaColor: \'#FBE0EC\' 293 } 294 } 295 }, 296 { 297 name: \'香港\', 298 itemStyle: { 299 normal: { 300 areaColor: \'#FCE1D8\' 301 } 302 } 303 }, 304 { 305 name: \'澳门\', 306 itemStyle: { 307 normal: { 308 areaColor: \'#FCE1D8\' 309 } 310 } 311 }, 312 { 313 name: \'南海诸岛\', 314 itemStyle: { 315 normal: { 316 areaColor: \'#FCE1D8\' 317 } 318 } 319 } 320 ] 321 }] 322 }; 323 324 myChart.setOption(option, true); 325 </script> 326 </body> 327 328 </html>
这部分代码只引用了一个js文件，这个官网就可以下载的到，最后还有两个细节的部分提醒大家：
1.点击省份返回省份信息
1 myChart.on(\'click\', function(params) { 2 console.log(params.name); 3 });
只要有这部分代码就可以实现点击省份返回省份名称的功能啦！
2.关于地图的大小问题
尽管地图的大小和echart的容器大小挂钩，但是地图在容器内并不是全部占满的，这样就会影响一部分的美观，解决这个问题。只要添加一个属性就可以 了。
1 series: [{ 2 name: \'中国\', 3 type: \'map\', 4 mapType: \'china\', 5 selectedMode: \'single\', 6 roam: false, 7 zoom: 1.2, 8 label: { 9 normal: { 10 show: true 11 }, 12 emphasis: { 13 show: true 14 } 15 }， 16 ...}]
注意 zoom: 1.2 这个属性是让地图放大的关键，看一下效果对比图
放大前：
放大地图后：
在容器大小一致的情况下，地图明显变大了。
好了，这就是我在项目中遇到的一个小小的问题，已经解决了，也希望对大家有所帮助，大家如果有更好的实现方式也欢迎在评论中提出。