Echarts中国地图三级钻取
我的原创地址:https://dongkelun.com/2018/11/27/echartsChinaMap/
前言
最近其实一直在用Echarts写前端,之前也想过总结一下Echarts的用法,但是官网的例子已经很全了。写这篇博客是因为Echarts官网把很多地图的例子都去掉了,且不能下载地图Json的数据,而相关的博客又很少,搜到两个,但是不很符合自己的想法,所以就想自己实现总结一下最基本的地图钻取,代码上传到GitHub,这样便于后面再有相关需求的时候,直接从GitHub上下载下来,在这个基础上修改添加功能就好了。
1、演示地址
暂时在没有下级地图的时候会直接返回到第一级中国地图,后面可能改为:提示没有下级地图,然后增加一个回到一级地图的按钮
http://front-end.dongkelun.com/echarts-map
2、动图演示
一张一张的截图,图片太多了,就先学了一下录制gif
3、代码
其中地图的json数据是同事之前下载的(可能不全,几个没用的Json没有去掉),在别人的GitHub上也可以找到
代码已上传到GitHub:https://github.com/dongkelun/echarts-map
4、部署
本项目为静态网页,但由于需要获取.json文件的数据,所以不能直接打开index.html(会报js的错误,可以自己试试)
将本项目复制到服务器下,如tomcat的webapps目录下,启动tomcat,然后在浏览器里输入http://localhost:8080/echarts-map即可
因为自己在学Vue,后面可能会用Vue重新实现一下,并添加一些相对复杂的功能,比如添加数据,使每个省的颜色不一样,更多样化一些。
之所以没有先用Vue实现,也没有实现比较复杂的效果,是因为考虑到不是每个人都会Vue,所以用最简单的静态html+css+js实现,这样能使每个人都能看懂,而且可以最基础的地图钻取的模版。后面如果用Vue实现的话,会新建一个项目并上传到GitHub,并及时更新本博客。
附录
附上核心代码:
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Echarts 地图钻取</title> <link rel="shortcut icon" href=./favicon.ico> <link rel="stylesheet" href="./css/index.css" type="text/css"> <script type="text/javascript" src="./js/echarts.min.js"></script> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script type="text/javascript" src="./js/index.js"></script> <script type="text/javascript" src="./js/china-main-city-map.js"></script> <script type="text/javascript" src="./js/rem.js"></script> </head> <body> <div class='title'>Echarts中国地图三级钻取</div> <div class="box"> <button class= "backBtn" onclick="back()">返回上级</button> <div id="mapChart" class="chart"></div> </div> </body> </html>
index.css
body{ background-image: url('../asset/images/beijingtupian.png'); } .title{ width: 100%; height: 10vh; text-align: center; color:#fff; font-size: 2em; line-height: 10vh; } .box { position: absolute; width: 90%; height: 80vh; left:5%; top:10%; background-color:rgba(24,27,52,0.62); } .chart{ position: relative; height: 90%; top:10%; } .backBtn{ position: absolute; top:0; background-color: #00C298; border: 0; color:#fff; height: 27px; font-family: Microsoft Yahei; font-size: 1em; cursor: pointer; }
index.js
$(function() {//dom加载后执行 mapChart('mapChart') }) /** * 根据Json里的数据构造Echarts地图所需要的数据 * @param {} mapJson */ function initMapData(mapJson){ var mapData = []; for( var i=0;i<mapJson.features.length;i++ ){ mapData.push({ name:mapJson.features[i].properties.name, //id:mapJson.features[i].id }) } return mapData; } /** * 返回上一级地图 */ function back(){ if(mapStack.length!=0){//如果有上级目录则执行 var map = mapStack.pop(); $.get('./asset/json/map/'+map.mapId+'.json', function (mapJson,status) { registerAndsetOption(myChart,map.mapId,map.mapName,mapJson,false) //返回上一级后,父级的ID、Name随之改变 parentId = map.mapId; parentName = map.mapName; }) } } /** * Echarts地图 */ //中国地图(第一级地图)的ID、Name、Json数据 var chinaId = 100000; var chinaName = 'china' var chinaJson = null; //记录父级ID、Name var mapStack = []; var parentId = null; var parentName = null; //Echarts地图全局变量,主要是在返回上级地图的方法中会用到 var myChart = null; function mapChart(divid){ $.get('./asset/json/map/'+chinaId+'.json', function (mapJson) { chinaJson = mapJson; myChart = echarts.init(document.getElementById(divid)); registerAndsetOption(myChart,chinaId,chinaName,mapJson,false) parentId = chinaId; parentName = 'china' myChart.on('click', function(param,t) { var cityId = cityMap[param.name] if(cityId){//代表有下级地图 $.get('./asset/json/map/'+cityId+'.json', function (mapJson,status) { registerAndsetOption(myChart,cityId,param.name,mapJson,true) }) }else{ //没有下级地图,回到一级中国地图,并将mapStack清空 registerAndsetOption(myChart,chinaId,chinaName,chinaJson,false) mapStack=[] parentId = chinaId; parentName = chinaName; } // $.get('./asset/json/map/'+param.data.id+'.json', function (mapJson,status) { // registerAndsetOption(myChart,param.data.id,param.name,mapJson,true) // }).fail(function () { // registerAndsetOption(myChart,chinaId,'china',chinaJson,false) // }); }); }) } /** * * @param {*} myChart * @param {*} id 省市县Id * @param {*} name 省市县名称 * @param {*} mapJson 地图Json数据 * @param {*} flag 是否往mapStack里添加parentId,parentName */ function registerAndsetOption(myChart,id,name,mapJson,flag) { echarts.registerMap(name, mapJson); myChart.setOption({ series: [{ type: 'map', map: name, itemStyle: { normal: { areaColor: 'rgba(23, 27, 57,0)', borderColor: '#1dc199', borderWidth: 1, }, }, data:initMapData(mapJson) }] }); if(flag){//往mapStack里添加parentId,parentName,返回上一级使用 mapStack.push({ mapId: parentId, mapName: parentName }); parentId = id; parentName = name; } }
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
JVM内存结构分析
对于Java程序员来说,内存是由JVM自动管理的,所以一旦出现内存泄漏或溢出的问题,不了解JVM的内存结构和各个内存区域的工作职责,将对解决问题带来很大的麻烦,本文参照周志明的《深入理解Java虚拟机》,介绍JVM内存结构,比较枯燥,但对知其然,不知所以然的编码人员来说还是有一定帮助的。 按照Java虚拟机规范的规定,JVM自动管理的内存将会包括以下几个运行时数据区域。 程序计数器 程序计数器(Program Counter Register)是JVM中一块较小的内存区域,保存着当前线程执行的虚拟机字节码指令的内存地址。Java多线程的实现,其实是通过线程间的轮流切换并分配处理器执行时间的方式来实现的,在任何时刻,处理器都只会执行一个线程中的指令。在多线程场景下,为了保证线程切换回来后,还能恢复到原先状态,找到原先执行的指令,所以每个线程都会设立一个程序计数器,并且各个线程之间不会互相影响,程序计数器为"线程私有"的内存区域。 如果当前线程正在执行Java方法,则程序计数器保存的是虚拟机字节码的内存地址,如果正在执行的是Native方法(非Java方法,JVM底层有许多非Java...
- 下一篇
linux 安装Apache, php并安装php扩展
linux 安装Apache, php并安装php扩展 首先安装Apache服务器 1. 下载源码包 http://httpd.apache.org/download.cgi#apache24 2. 上传到服务器, 解压 tar zvxf httpd-XX.tar.gz 3. 安装 apr和apr-util(如果已安装,可直接看4) 下载apr与apr-util , 地址 : http://apr.apache.org/ 解压 apr , 修改解压好的目录名, 不要带版本号(官网上说的), 进入解压目录,执行 ./configure (如果没有改解压目录名, 则需要指定安装路径 --prefix=/xxx/apr) make make install 解压apr-util,修改目录名(去掉版本号),进入解压目录, 执行 cd apr-util ls ./configure --with-apr=/web/servers/apr(为apr安装路径) 4. 进入到解压目录, 执行命令 ./configure --prefix=PREFIX (PREFIX为你要安装的路径) mak...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果