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. 8张图让你一步步看清 async/await 和 promise 的执行顺序

    摘要: 面试必问 原文:8张图帮你一步步看清 async/await 和 promise 的执行顺序 作者:ziwei3749 Fundebug经授权转载,版权归原作者所有. 为什么写这篇文章? 说实 ...

  2. 事件处理程序(HTML)

    HTML事件处理程序 通过设置HTML标签特性来绑定事件处理程序. 处理方式(如图): 1:会创建一个封装元素属性值的函数 2:会在这个函数中创建一个event事件对象 <form> &l ...

  3. Laravel条件查询数据单条数据first,多条数据get

    使用DB查询,必须use Illuminate\Support\Facades\DB; 多数组条件查询单条数据 first() //提交加入我们数据 public function ajax_join ...

  4. react-conponent-secondesElapsed

    <!DOCTYPE html> <html> <head> <script src="../../build/react.js">& ...

  5. Oracle11g: simple sql script examples

    ---https://docs.oracle.com/cd/B19306_01/server.102/b14200/statements_8003.htm drop user geovin; drop ...

  6. Linux配置防火墙端口 8080端口

    1.查看防火墙状态,哪些端口开放了 /etc/init.d/iptables status 2.配置防火墙 vi /etc/sysconfig/iptables   ################# ...

  7. Human Motion Analysis with Wearable Inertial Sensors——阅读1

    Human Motion Analysis with Wearable Inertial Sensors——阅读 博主认为对于做室内定位和导航的人这是一篇很很棒的文章,不是他的技术很牛,而是这是一篇医 ...

  8. Mysql 常用数据类型

    double:浮点型,double(5,2) 表示最多5位,必须包含两位小数,最大值是 999.99 char:定长字符串类型,char(10) 表示必须放 10 的字节,没有就用空格补充 varch ...

  9. GDPR 和个人信息保护的小知识

    从2018年5月25日起,欧盟的<通用数据保护条例>(简称 GDPR,General Data Protection Regulation)开始强制施行.这个规范加强了对个人信息的保护,并 ...

  10. 章节五、2-Package包和权限修饰符

    一.Package包 为了更好的组织类,java提供了包机制,用于区别类名的命名空间. 包的作用: 1.把功能相似或相关的类或接口组织在同一个包中,方便类的查找和使用. 2.如同文件夹一样,包也采用了 ...