echart 插件实现全国地图

　　最近的项目要用到一个能展现全国地图的功能，并且全国各个省份显示的颜色不同，点击省份后会返回省份名称。经过反复的查找最终确定了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  这个属性是让地图放大的关键，看一下效果对比图
放大前：

放大地图后：

在容器大小一致的情况下，地图明显变大了。

好了，这就是我在项目中遇到的一个小小的问题，已经解决了，也希望对大家有所帮助，大家如果有更好的实现方式也欢迎在评论中提出。

 

posted @ 2018-08-03 16:03  糖水煮饭  阅读(20120)  评论(4)  编辑  收藏  举报