暂时在没有下级地图的时候会直接返回到第一级**地图,后面可能改为:提示没有下级地图,然后增加一个回到一级地图的按钮
http://front-end.dongkelun.com/echarts-map
一张一张的截图,图片太多了,就先学了一下录制gif
其中地图的json数据是同事之前下载的(可能不全,几个没用的Json没有去掉),在别人的GitHub上也可以找到
代码已上传到GitHub:https://github.com/dongkelun/echarts-map
本项目为静态网页,但由于需要获取.json文件的数据,所以不能直接打开index.html(会报js的错误,可以自己试试)
将本项目复制到服务器下,如tomcat的webapps目录下,启动tomcat,然后在浏览器里输入http://localhost:8080/echarts-map即可
因为自己在学Vue,后面可能会用Vue重新实现一下,并添加一些相对复杂的功能,比如添加数据,使每个省的颜色不一样,更多样化一些。 之所以没有先用Vue实现,也没有实现比较复杂的效果,是因为考虑到不是每个人都会Vue,所以用最简单的静态html+css+js实现,这样能使每个人都能看懂,而且可以最基础的地图钻取的模版。后面如果用Vue实现的话,会新建一个项目并上传到GitHub。