echart 插件实现全国地图-程序员宅基地

技术标签： ViewUI  javascript  

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

放大地图后：

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

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

 

转载于:https://www.cnblogs.com/fanlijin/p/9414662.html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_30693683/article/details/98932112

智能推荐

Java语法进阶及常用技术（三）--Maven项目管理-程序员宅基地

文章浏览阅读559次。Maven介绍Maven是项目管理工具，对软件项目提供构建与依赖管理。Maven是Apache下的Java开源项目。Maven为Java项目提供了统一的管理方式，已成为业界标准。Maven核心特性项目设置遵循统一的规则，保证不同开发环境的兼容性。强大的依赖管理，项目依赖组件自动下载、自动更新。可扩展的插件机制，使用简单，功能丰富。Maven的安装与配置安装Maven之前需要安装jdk1.8。从官网下载MavenMaven官网：https://maven.apache.org/bin

C#排序 访问指定下标_c# 获取list 下表-程序员宅基地

文章浏览阅读1.9k次。一、C #中Sort()函数的使用与C++中类似，C#中也有自己的Sort()函数，其使用方式：（列表List的排序使用方式）第一步：声明一个myComparer类，它继承自IComparer：class myComparer : IComparer<MyPoint>/*实现 IComparer<T> 接口中的 Compare 方法， ..._c# 获取list 下表

Python不可变序列类型--字符串-程序员宅基地

文章浏览阅读1.7w次，点赞16次，收藏17次。Python从入门到精通零基础入门篇

java中预处理PrepareStatement起到防止SQL注入的作用_java sql prepare的作用-程序员宅基地

文章浏览阅读1.1k次。大家都知道，java中JDBC中，有个预处理功能，这个功能一大优势就是能提高执行速度尤其是多次操作数据库的情况，再一个优势就是预防SQL注入，严格的说，应该是预防绝大多数的SQL注入。 用法就是如下边所示：[java] view plain copyString sql="update cz_zj_directpayment dp_java sql prepare的作用

Android AppWidget（桌面小部件-音乐播放动画）_小部件 使用帧动画-程序员宅基地

文章浏览阅读4.3k次，点赞6次，收藏13次。桌面小部件基础篇：Android AppWidget (桌面小部件)音乐播放 （动画实现） 一个音乐播放的柱状图（不会上传动图，自行脑补）思路方案：1，自定义View，widget 仅支持部分控件，自定义没用，我把自定义弄完了，才想起来。所以这个方案pass2，帧动画，直接使用ImageView，也不行，无法获取子控件属性，帧动画运行不了3，LayoutAnimat..._小部件 使用帧动画

Ubuntu18.04扩展屏幕（副屏幕）不显示 登录时数字键不开问题_ubuntu18.04双屏扩展-程序员宅基地

文章浏览阅读323次。2.在附加驱动选项卡中选择独显显卡的驱动（不知道选哪个就直接选最新的就行），点击应用，重启即可。1.登录界面输入密码是NumLock不开，每次都要手动按一下才能输入密码。2.HDMI扩展屏幕不显示，信号灯亮，但是没有画面。3.查看一下独显驱动装上没（也可以不看）1.打开软件和更新功能，_ubuntu18.04双屏扩展

随便推点

无人直播系统源码开发：功能、优势与开发方法探析-程序员宅基地

文章浏览阅读617次，点赞8次，收藏8次。本文介绍了无人直播系统的功能和优势，以及如何进行开发。无人直播系统能够实时采集、编码和传输视频流，支持弹幕互动，并具备实时性、互动性、灵活性和可扩展性等优势。开发无人直播系统的方法包括确定需求、设计系统架构、实现功能、部署上线和维护优化。通过定制开发无人直播系统，可以满足不同业务场景下的实时视频传输和互动需求，提供高质量的直播体验。_无人直播系统源码

windows10环境VS2017 编译Opencv和TensorFlow程序（cmake）-程序员宅基地

文章浏览阅读539次。嘿嘿，我刚上研一，体育方面的研究生，想做计算机视觉方面的课题，这几天都在配置opencv和tensorflow的环境，走了不少歪路，总结了一下。一、关于opencv源码的查看和编译：http://blog.csdn.net/poem_qianmo/article/details/21974023 这个网址介绍的很全。其中要注意的是：如果安装的是vs2017，那么current generato...

Android 设��默认浏览器后安装另外浏览器后默认浏览器功能修复-程序员宅基地

文章浏览阅读84次。在“设置”应用中，找到“应用程序”或“应用管理器”选项，然后找到默认浏览器应用。点击该应用，然后找到“存储”或“存储空间”选项，点击进入。在存储页面中，找到“清除数据”或“清除缓存”选项，并点击确认。在Android设备上，打开“设置”应用，并找到“应用程序”或“应用管理器”选项。点击该应用，然后找到“清除默认值”或“清除默认设置”的选项，并点击确认。在“设置”应用中，找到“应用程序”或“应用管理器”选项，然后找到另外一个浏览器应用。点击该应用，然后找到“清除数据”或“清除缓存”选项，并点击确认。

Ant Design vue自定义文件上传_ant design vue 上传-程序员宅基地

文章浏览阅读4.4k次。实际项目中，上传文件时实际可能需要传输一个token。方法一：1、查看vue antdesign文档https://vue.ant.design/components/upload-cn/2、使用customRequestcustomRequest 通过覆盖默认的上传行为，可以自定义自己的上传实现 Function3、定义customRequest，之前定义action行为会被覆盖，可以注释掉4、customRequest代码如下customRequest ._ant design vue 上传

C++ 学习路线：快速入门到进阶_c++学习路线-程序员宅基地

文章浏览阅读4.9k次，点赞12次，收藏92次。C/C++ 是一门底层、细粒度、功能强大、学习曲线陡峭的语言，掌握这门语言的程序员通常有着更长的生命周期以及更深的护城河。但入门门槛高也是不争的事实，这篇文章把C++学习划分为入门、进阶、深入三个阶段，每步提供相应的学习方法和资源，帮助大家更好地掌握这门语言。_c++学习路线

解决javaweb项目使用Tomcat服务在网页中的某些页面中的图片无法显示问题。_为啥单独打开html显示图片，用tomcat打开图片不显示-程序员宅基地

文章浏览阅读7.1k次，点赞5次，收藏16次。最近写了一个web项目，但在浏览器中测试，发现某些页面中的图片无法显示。原因是在加载页面时一些img标签或者css中的background-image请求了一些含有中文的图片。于是这个页面会自动向服务端发送请求获取资源，但是这个过程不会体现到地址栏的，是在后台操作的。例如我请求了一个index.html页面但是页面中有一个<img src="img/测试图片.png">标签。通过f..._为啥单独打开html显示图片，用tomcat打开图片不显示

推荐文章

热门文章

相关标签