1. var cityMap = {
  2. "长沙市": "430100",
  3. "株洲市": "430200",
  4. "湘潭市": "430300",
  5. "衡阳市": "430400",
  6. "邵阳市": "430500",
  7. "岳阳市": "430600",
  8. "常德市": "430700",
  9. "张家界市": "430800",
  10. "益阳市": "430900",
  11. "郴州市": "431000",
  12. "永州市": "431100",
  13. "怀化市": "431200",
  14. "娄底市": "431300",
  15. "湘西土家族苗族自治州": "433100"
  16.  
  17. };
  18. var curIndx = 0;
  19. var mapType = [];
  20. var mapGeoData = require('echarts/util/mapData/params');
  21. for (var city in cityMap) {
  22. mapType.push(city);
  23. // 自定义扩展图表类型
  24. mapGeoData.params[city] = {
  25. getGeoJson: (function (c) {
  26. var geoJsonName = cityMap[c];
  27. return function (callback) {
  28. $.getJSON('geoJson/china-main-city/' + geoJsonName + '.json', callback);
  29. }
  30. })(city)
  31. }
  32. }
  33.  
  34. var ecConfig = require('echarts/config');
  35. var zrEvent = require('zrender/tool/event');
  36. document.getElementById('main').onmousewheel = function (e){
  37. var event = e || window.event;
  38. curIndx += zrEvent.getDelta(event) > 0 ? (-1) : 1;
  39. if (curIndx < 0) {
  40. curIndx = mapType.length - 1;
  41. }
  42. var mt = mapType[curIndx % mapType.length];
  43. option.series[0].mapType = mt;
  44. option.title.subtext = mt + ' (滚轮或点击切换)';
  45. myChart.setOption(option, true);
  46. zrEvent.stop(event);
  47. };
  48. myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
  49. var mt = param.target;
  50. var len = mapType.length;
  51. var f= false;
  52. for(var i=0;i<len;i++){
  53. if(mt == mapType[i]){
  54. f =true;
  55. mt=mapType[i];
  56. }
  57. }
  58. if(!f){
  59. mt='湖南';
  60. }
  61. option.series[0].mapType = mt;
  62.  
  63. option.title.subtext = mt + ' (滚轮或点击切换)';
  64. myChart.setOption(option, true);
  65. });
  66. option = {
  67. title: {
  68. text : '全国344个主要城市(县)地图 by Pactera 陈然',
  69. link : 'http://www.pactera.com/',
  70. subtext : '长沙市 (滚轮或点击切换)'
  71. },
  72. tooltip : {
  73. trigger: 'item',
  74. formatter: '滚轮或点击切换<br/>{b}'
  75. },
  76. series : [
  77. {
  78. name: '全国344个主要城市(县)地图',
  79. type: 'map',
  80. mapType: '湖南',
  81. selectedMode : 'single',
  82. itemStyle:{
  83. normal:{label:{show:true}},
  84. emphasis:{label:{show:true}}
  85. },
  86. data:[]
  87. }
  88. ]
  89. };
  1. 将上面部分代码复制,然后粘贴覆盖到http://echarts.baidu.com/doc/example/mix5.html左侧的黑色区域中,然后点击刷新,即可看到效果。

2.其中var mapGeoData = require('echarts/util/mapData/params');我的理解是找到param.js这个文件,然后执行循环将city对应的县级数据加载到param.js文件中

每天学习一点点 编程PDF电子书、视频教程免费下载:
http://www.shitanlife.com/code

使用ECharts来实现地图下钻功能(某省的市级下钻到县级)的更多相关文章

  1. 第三方工具 - 关于echarts下钻功能的一些总结.js

    废话:好久没有写博客了,每每看着自己的'战绩'都有点愧疚,但是这段时间确实学习了不少东西,待我慢慢地一 一梳理,将之消化并分享. ---------------------------$O_O$--- ...

  2. (十八)WebGIS中清空功能和地图定位功能的设计以及实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 当地图中增加了很多元素后,对不同的元素需要进行一定的控制,最 ...

  3. 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]

    相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...

  4. 百度地图整合功能分享修正版[ZMap.js] 实例源码!

    ZMap 功能说明 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是 ...

  5. ArcGIS API for Silverlight实现地图测距功能

    原文:ArcGIS API for Silverlight实现地图测距功能 问题:如何实现地图测距功能? 地图工具栏 <Grid x:Name="gToolMenu" Hei ...

  6. 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例

    百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修 ...

  7. js实现地图打印功能

    注意:js对地图的打印功能在arcgis10.1中才有提供,所以如果要使用esri自带的地图打印功能,必须使用arcgis 10.1或更高版本的地图打印模板.(由于官网和arcgis desktop提 ...

  8. vue-cli +echarts-amap集成echarts和高德地图TypeError: Cannot read property 'dataToPoint' of null解决方案

    由于项目的需求,需要做一种迁徙效果, 最后我们采用了组件化开发,可以说这个坑自己一个人踩,有点累,但也收获不少. vue-cli +echarts-amap集成echarts和高德地图,出现报错,错误 ...

  9. 百度地图API功能

    984aca5bc78b070e59f34e230f11cf6d http://api.map.baidu.com/api?v=2.0&ak=您的密钥" <html> & ...

随机推荐

  1. eclipse提交到git

    前言 今天是我正式加入GitHub的第一天,作为世界上最大的同性交友社区,以push和pull出名的它,让我坠入其中并无法自拔,废话不多说,上教程: 步骤一 首先,你需要注册一个github账号,相信 ...

  2. maven将依赖依赖打包到jar中

    通过maven-assembly-plugin插件可以实现将依赖jar包打包到自己的jar包中的需求,只需要在pom.xml中配置该插件即可,配置如下: <build> <plugi ...

  3. clipboard.js -- js实现将文本复制到剪贴板的方法

    资源 推荐使用:clipboard.js 官方教程地址:https://clipboardjs.com/#example-text 官方github地址:https://github.com/zeno ...

  4. VR技术了解(作业)

    增强现实技术 概念:将现实世界和虚拟世界无缝集成的新技术. 突出特点: 真实世界与虚拟的信息集成 实时交互 三维空间中增添定位虚拟物 应用 医疗领域:医生可以利用增强现实技术,轻易地进行手术部位的精确 ...

  5. Django+MongoDB批量插入数据

    在百万级和千万级数据级别进行插入,pymongo的insert_many()方法有着很强的优势.原因是每次使用insert_one()方法进行插入数据,都是要对数据库服务器进行一次访问,而这样的访问是 ...

  6. git 入门教程之里程碑式标签

    "春风得意马蹄疾,一日看尽长安花",对于项目也是如此,最值得期待的恐怕就要数新版本发布的时刻了吧?每当发布新版本时要么是版本号命名(比如v0.0.1)或者代号命名(比如Chelse ...

  7. git 入门教程之实战 git

    实战 git git 是一款分布式版本控制系统,可以简单概括: 不要把鸡蛋放在一个篮子里,你的一举一动都在监视中. 实战场景 你作为某项目的其中一员或者负责人,和小伙伴们一起开发,大家既有着各自分工互 ...

  8. springboot 学习之路 2(注解介绍)

    目录:[持续更新.....] spring 部分常用注解 spring boot 学习之路1(简单入门) spring boot 学习之路2(注解介绍) spring boot 学习之路3( 集成my ...

  9. java后台打开浏览器代码

    import java.awt.Desktop; import java.io.IOException; import java.net.URI; import java.net.URISyntaxE ...

  10. [转] Scala Try 与错误处理

    一.概述 当你在尝试一门新的语言时,可能不会过于关注程序出错的问题, 但当真的去创造可用的代码时,就不能再忽视代码中的可能产生的错误和异常了. 鉴于各种各样的原因,人们往往低估了语言对错误处理支持程度 ...