Echarts绘制各省地图

最新推荐文章于 2024-03-11 13:15:00 发布
最新推荐文章于 2024-03-11 13:15:00 发布
阅读量1w 收藏 8
点赞数 2
文章标签： Echarts
Echarts 绘制全国地图

近期工作需要用到echarts制作省内地图，研究了一番，好多人写的很模糊不好理解，我这里写个菜鸟教程记录一下。

在页面引入 jquery.js h和echarts.js  关键是需要 地图的json数据，有js的更好。这里提供china.json下载 ：

链接：https://pan.baidu.com/s/1LawcD8JQkHkd0OjpFG0jKQ 密码：phrt

全国以及各地市的数据这里下载  https://download.csdn.net/download/cc_wake/10569191


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <%@ page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %>
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <html>
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    	
     
     <head>
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    		
     
     <title>地图
     
     </title>
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    		
     
     <script src="js/jquery-3.3.1.min.js">
     
     
     
     </script>
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    		
     
     <script src="js/echarts.js">
     
     
     
     </script>
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    	
     
     </head>
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    	
     
     <body>
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    		
     
     <div id="china_map" style="width:800px;height:800px;">hello
     
     </div>
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    		
     
     <script type="text/javascript">
     
     
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     			$.get(
     
     'js/henan.json',
     
     function(data){
     
     //这里是json转js，如果是js文件就不需要这一步
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     				echarts.registerMap(
     
     'henan',data);
     
     //设置地图
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    				
     
     var myChart = echarts.init(
     
     document.getElementById(
     
     'china_map'));
     
     //初始化
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     				myChart.setOption({
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    		        	 
     
     title: {
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    		                 
     
     text: 
     
     '河南地图'
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     		             },
    
    
    
   
   
  19. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    		             
     
     series: [{
    
    
    
   
   
  20. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    		                
     
     type: 
     
     'map',
     
     //类型必须是map
    
    
    
   
   
  21. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     		                map: 
     
     'henan'
     
     //注意这里的值需要和echarts.registerMap('henan',data);一致
    
    
    
   
   
  22. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     		             }]
    
    
    
   
   
  23. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     		        });
    
    
    
   
   
  24. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  25. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     				myChart.on(
     
     'click', 
     
     function(params){
    
    
    
   
   
  26. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     		            alert(
     
     1);
    
    
    
   
   
  27. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    		            
     
     console.log(params);
     
     //此处写点击事件内容
    
    
    
   
   
  28. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     		        });
     
     //点击事件，此事件还可以用到柱状图等其他地图
    
    
    
   
   
  29. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     			});
    
    
    
   
   
  30. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    			
    
    
    
   
   
  31. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    		
    
    
    
   
   
  32. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    		
     
     </script>
    
    
    
   
   
  33. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    	
     
     </body>
    
    
    
   
   
  34. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </html>

刚开始一脸蒙蔽， 弄了好久才明白，你要是理解不了也没关系，把我的代码直接拷走就行。改一下js引入地址。

 

该文章系转载，出自: https://blog.csdn.net/cc_wake/article/details/81257826

sevenempire
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
echarts广东省市县地图json数据
06-21
广东省市县三级echarts绘制地图所需的json数据，内含东莞市和中山市详细区县数据,有需要的用户请自行下载
2022年echarts河北省最新11市json地图
03-26
2022年自己调整过使用过的echarts河北省最新11市json地图，包括石家庄市、唐山市、秦皇岛市、邯郸市、邢台市、保定市、张家口市、承德市、沧州市、廊坊市、衡水市。echarts直接调用json文件。
地理数据可视化：使用echarts实现地图可视化功能
最新发布
Shids_的博客
03-11 2469
地理数据可视化：使用echarts实现地图可视化功能
2022年echarts安徽省最新16市json地图
04-30
2022年自己调整过使用过的echarts安徽省最新16市json地图，包括合肥市 、黄山市 、芜湖市、马鞍山、安庆市、淮南市、阜阳市、淮北市、铜陵市、亳州市、宣城市、蚌埠市、六安市 、滁州市 、池州市、宿州市。echarts直接调用json文件。
echarts 绘制的全国地图三级联动 点击放大效果 省县乡更新过后的最新地名
07-03
echarts 绘制的全国地图三级联动 点击放大效果 省县乡更新过后的最新地名 ，运行请不要直接打开index.html文件 请用本地服务器启动
Echarts实现——中国地图
qqjuanqq的博客
11-01 1万+
Echarts实现——中国地图
echarts区县地图数据兰州市七里河
02-01
620103 兰州市七里河地图数据，包含adcode和name
教你从零开始画echarts地图
m0_67401660的博客
07-31 5604
离线地图下载地址echarts文档地址。
ECharts--中国地图（无敌详细）
qq_45066453的博客
03-12 5万+
使用Echarts绘制中国地图，其中地图点信息由JSON文件编写，前端html直接从JSON文件中读取地区数据，渲染到前端即可。详细介绍用到的各个功能！代码直接复制运行即可！
ECharts地图，echarts自定义map地图，echarts添加标注，自定义坐标、图标、icon
热门推荐
沐枫
10-18 5万+
ECharts如何自定义省、市、县区地图(各省市直辖区的map地图)，ECharts如何在地图上自定义图片、图标，根据经纬度显示自定义建筑图片、添加自定义覆盖物 前言 最近在做一个项目中，需求是：要显示中国某个省份下，某个市的地图，而地图还要有块级效果，自定义地图颜色，还要在地图上显示不同的建筑物图片，还要每隔几秒后（数据是从后端用ws实时推送过来的，要根据推送过来的数据，动态切换显示对......
echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图
weixin_41897680的博客
06-01 1万+
echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图
利用echarts绘制地图的geojson（包含国家，省，市），有实现实例
05-30
1.ECharts的geojson地图数据下载(全国地图json、各省、市)有demo 2.包含一个cityName.js城市对照表 3.index.js是鲫鱼react的开发的模块，可以直接使用
ECharts实现中国地图数据可视化
情非得已小猿猿
01-15 4万+
项目中数据可视化已经太常见了，echarts是一款使用率非常高的插件工具，很多大平台都是使用echarts；一般都有折线图、柱形图、饼形图，还有常见的地图，今天就地图来说一下——中国地图。 1、首先官网上下载一个echart.js或echart.min.js，如下根据自己的需要下载对应的文件。网址：https://echarts.baidu.com/ 2、下载中国地图插件china....
echarts map （echarts地图）使用总结
HurryUpp的博客
12-11 1万+
echarts 地图的各种使用场景
echarts社区地图、echart地图
m0_67402026的博客
03-03 1422
文章目录 地图时间轴多样 3D地图+拖拽+扫描特效+自转+4.9.0及以下版本才能用 气泡地图+圆点会动 地图上+柱图 地图上+气泡 地图+图例 地图时间轴多样 var uploadedDataURL = "/asset/get/s/data-1528971808162-BkOXf61WX.json"; var geoGpsMap = { '1': [127.9688, 45.368], '2': [116.4551, 40.2539], '3': [
echarts地图示例
m0_51431448的博客
04-04 5523
地图比普通的echarts多了一步 需要注册，就是要引入某个地区的json文件 各个地区的json文件链接数据可视化平台(各个地区的json文件) 示例1 <template> <div :id="id" style="width: 100%;height: 100%;">111</div> </template> <script setup> import * as echarts from "echarts"; impor....
echarts绘制地图
hjh15827475896的博客
08-22 1万+
第二种方法绘制地图是使用 json 数据， 这种方法更灵活一些， 可以绘制不同省份，市区，等的地图，上面的是 国家的地图， 那么这里的 使用json数据的方法可以绘制更小的地方的地图。从echart 的文档上来看， 我们在echart中使用 geo 和 使用 series 来绘制地图，它们之间有一点细微的差别，可以忽略不计。从站点上可以看到， 我们可以选择 是下载全国的数据， 还是下载某一个省的json数据， 我们这里只使用湖北省襄阳市的试试。两中方法都是可以了， 随便选择就可以了。
echarts地图绘制
O_nini_O的博客
06-29 4932
echarts画地图&热力图
ECharts 实现地图功能
weixin_48163734的博客
12-15 8892
Vue进阶（幺玖幺）：ECharts 实现地图功能 No Silver Bullet 2021-06-22 16:17:28 ...
echarts绘制广东省地图
09-09
要使用Echarts绘制广东省地图，你需要准备以下几个文件和数据。 首先，你需要下载包含广东省市县三级详细区县数据的JSON文件。这个JSON文件可以在网上找到并下载。 其次，你需要引入Echarts相关的JavaScript文件，包括echarts.min.js和echarts-gl.min.js。你可以在JSP页面中使用script标签引入这些文件，并确保文件路径正确。 然后，你需要创建一个div元素，用于容纳地图的显示。你可以在JSP页面中添加一个div元素，设置id为mapdiv。 接下来，你需要编写业务代码来使用Echarts绘制地图。你可以在mainoption.js文件中编写相关的业务代码[2]。在该文件中，你可以定义一个图表实例myChart1，并在页面加载完成后调用getMapDatas()函数获取地图数据。 最后，在后端数据中，你需要以JSON格式传递给前端的数据中，包括广东省的地理信息和其他相关数据。你可以创建一个JSONObject对象，并在其中存储相应的数据。 综上所述，如果你按照上述步骤准备好了相关的文件和数据，你就可以使用Echarts绘制广东省地图了。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值