一、简介
　　通过地图可以更直观地展示各个地区的统计数据，能够更清楚地进行数据分析。有些场景下，我们不仅仅需要对每个地市进行统计分析。更需要对地市一下的区县进行数据统计，并进行联动。此事我们可以通过Echart支持的 GeoJson 动态扩展地图类型,完成这一需求(GeoJson 相关规格书可访问：http://www.oschina.net/translate/geojson-spec?cmp )。需求如下：展示整改广东省的地图，并显示统计信息，当点击某一个地市的时候，就显示该地市的地图，并统计该地市区县的数据信息。

二、示例

　　1、下载echart
　　下载echart解压之后，将包中的，build\dist 目录下的内容拷贝到项目中的echart资源目录中。将doc\example 中的geoJson目录拷贝到echart资源目录中(geoJson 就是使用GeoJson的数据)。完成后，项目结构如下：

　　

　　2、引入jquery 与 echart

<script src="${ctx}/static/jquery/jquery-1.8.3.min.js"></script>

<script src="${ctx}/static/echart/echarts.js"></script>

　　${ctx} 为项目访问路径

　　3、配置echart路径（本示例使用模块的方式加载）　　

 // 路径配置

 require.config({

   paths: {

     echarts: '${ctxStatic}/echart'

   }

 });

         c、使用

 // 使用

 require(

   [

     'echarts',

     'echarts/chart/map' // 使用地图就加载map模块

   ],

   function(ec) {

     // 基于准备好的dom，初始化echarts图表

     var myChart = ec.init(document.getElementById('main'));

     //TODO 编写其他代码

     // 为echarts对象加载数据

     myChart.setOption(option);

   }

 );

　　4、代码

 <%@ page contentType="text/html;charset=UTF-8"%>

 <html>

 <head>

 <title>地市联动数据统计</title>

     <meta name="decorator" content="default" />

     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

     <title>ECharts地图联动</title>

      <c:set var="ctx" value="${pageContext.request.contextPath}"/>

     <script src="${ctx}/static/jquery/jquery-1.8.3.min.js"></script>

     <script src="${ctx}/static/echart/echarts.js"></script>

 </head>

 <body>

     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

     <div id="main" style="height:600px;width: 800px"></div>

 <script type="text/javascript">

 var cityMap = {

   "广州市": "440100",

   "韶关市": "440200",

   "深圳市": "440300",

   "珠海市": "440400",

   "汕头市": "440500",

   "佛山市": "440600",

   "江门市": "440700",

   "湛江市": "440800",

   "茂名市": "440900",

   "肇庆市": "441200",

   "惠州市": "441300",

   "梅州市": "441400",

   "汕尾市": "441500",

   "河源市": "441600",

   "阳江市": "441700",

   "清远市": "441800",

   "东莞市": "441900",

   "中山市": "442000",

   "潮州市": "445100",

   "揭阳市": "445200",

   "云浮市": "445300"

 };

 // 路径配置

 require.config({

   paths: {

     echarts: '${ctx}/static/echart'

   }

 });

 // 使用

 require(

   [

     'echarts',

     'echarts/chart/map' // 使用地图就加载map模块

   ],

   function(ec) {

     // 基于准备好的dom，初始化echarts图表

     var myChart = ec.init(document.getElementById('main'));

     var curIndx = 0;

     var mapType = [];

     var mapGeoData = require('echarts/util/mapData/params');

     console.log(mapGeoData)

     for (var city in cityMap) {

       mapType.push(city);

       // 自定义扩展图表类型

       mapGeoData.params[city] = {

         getGeoJson: (function(c) {

           var geoJsonName = cityMap[c];

           return function(callback) {

             $.getJSON('${ctx}/static/echart/geoJson/china-main-city/' + geoJsonName + '.json', callback);

           }

         })(city)

       }

     }

     var ecConfig = require('echarts/config');

     var zrEvent = require('zrender/tool/event');

     //绑定鼠标滚动事件

     document.getElementById('main').onmousewheel = function(e) {

       var event = e || window.event;

       curIndx += zrEvent.getDelta(event) > 0 ? (-1) : 1;

       if (curIndx < 0) {

         curIndx = mapType.length - 1;

       }

       var mt = mapType[curIndx % mapType.length];

       option.series[0].mapType = mt;

       option.title.subtext = mt + ' （点击地市查看详情）';

       myChart.setOption(option, true);

       zrEvent.stop(event);

     };

     //绑定鼠标选中事件

     var num = 0;

     myChart.on(ecConfig.EVENT.MAP_SELECTED, function(param) {

       console.log(param);

       var mt = param.target;

       var len = mapType.length;

       var flag = false;

       for (var i = 0; i < len; i++) {

         if (mt == mapType[i]) {

           flag = true;

           mt = mapType[i];

         }

       }

       //没有下级、做特殊处理

       if (mt == '东莞市') {

         num++;

         console.log("do");

       }

       //没有下级、做特殊处理

       if (mt == '中山市') {

         num++;

         console.log("do");

       }

       console.log(num);

       if (!flag || num == 2) {

         mt = '广东';

         num = 0;

       }

       option.series[0].mapType = mt;

       option.title.subtext = mt + ' （点击地市查看详情）';

       myChart.setOption(option, true);

     });

     option = {

       title: {

         text: '广东地市',

         link: 'http://www.pactera.com/',

         subtext: '点击查看详情'

       },

       tooltip: {

         trigger: 'item'

       },

       dataRange: {

         orient: 'horizontal',

         x: 'right',

         min: 0,

         max: 1000,

         color: ['orange', 'yellow'],

         text: ['高', '低'], // 文本，默认为数值文本

         calculable: true,

         splitNumber: 0

       },

       series: [{

         name: '广东省地市',

         type: 'map',

         mapType: '广东',

         selectedMode: 'single',

         itemStyle: {

           normal: { borderWidth : 1, borderColor : '#999999', label: { show: true } },

           emphasis: { label: { show: true } }

         },

         data: [

             {name: '清远市',value: Math.round(Math.random()*1000)},

             {name: '韶关市',value: Math.round(Math.random()*1000)},

             {name: '湛江市',value: Math.round(Math.random()*1000)},

             {name: '梅州市',value: Math.round(Math.random()*1000)},

             {name: '河源市',value: Math.round(Math.random()*1000)},

             {name: '肇庆市',value: Math.round(Math.random()*1000)},

             {name: '惠州市',value: Math.round(Math.random()*1000)},

             {name: '茂名市',value: Math.round(Math.random()*1000)},

             {name: '江门市',value: Math.round(Math.random()*1000)},

             {name: '阳江市',value: Math.round(Math.random()*1000)},

             {name: '云浮市',value: Math.round(Math.random()*1000)},

             {name: '广州市',value: Math.round(Math.random()*1000)},

             {name: '汕尾市',value: Math.round(Math.random()*1000)},

             {name: '揭阳市',value: Math.round(Math.random()*1000)},

             {name: '珠海市',value: Math.round(Math.random()*1000)},

             {name: '佛山市',value: Math.round(Math.random()*1000)},

             {name: '潮州市',value: Math.round(Math.random()*1000)},

             {name: '汕头市',value: Math.round(Math.random()*1000)},

             {name: '深圳市',value: Math.round(Math.random()*1000)},

             {name: '东莞市',value: Math.round(Math.random()*1000)},

             {name: '中山市',value: Math.round(Math.random()*1000)},

             //清远

             {name: "佛冈县",value: Math.round(Math.random()*1000)},

             {name: "连南瑶族自治县",value: Math.round(Math.random()*1000)},

             {name: "连山壮族瑶族自治县",value: Math.round(Math.random()*1000)},

             {name: "连州市",value: Math.round(Math.random()*1000)},

             {name: "清城区",value: Math.round(Math.random()*1000)},

             {name: "清新县",value: Math.round(Math.random()*1000)},

             {name: "阳山县",value: Math.round(Math.random()*1000)},

             {name: "英德市",value: Math.round(Math.random()*1000)},

             //韶关

             {name: "乐昌市",value: Math.round(Math.random()*1000)},

             {name: "南雄市",value: Math.round(Math.random()*1000)},

             {name: "曲江区",value: Math.round(Math.random()*1000)},

             {name: "仁化县",value: Math.round(Math.random()*1000)},

             {name: "乳源瑶族自治县",value: Math.round(Math.random()*1000)},

             {name: "始兴县",value: Math.round(Math.random()*1000)},

             {name: "翁源县",value: Math.round(Math.random()*1000)},

             {name: "武江区",value: Math.round(Math.random()*1000)},

             {name: "新丰县",value: Math.round(Math.random()*1000)},

             {name: "浈江区",value: Math.round(Math.random()*1000)},

             //湛江

             {name: "赤坎区",value: Math.round(Math.random()*1000)},

             {name: "雷州市",value: Math.round(Math.random()*1000)},

             {name: "廉江市",value: Math.round(Math.random()*1000)},

             {name: "麻章区",value: Math.round(Math.random()*1000)},

             {name: "坡头区",value: Math.round(Math.random()*1000)},

             {name: "遂溪县",value: Math.round(Math.random()*1000)},

             {name: "吴川市",value: Math.round(Math.random()*1000)},

             {name: "霞山区",value: Math.round(Math.random()*1000)},

             {name: "徐闻县",value: Math.round(Math.random()*1000)},

             //河源

             {name: "紫金县",value: Math.round(Math.random()*1000)},

             {name: "东源县",value: Math.round(Math.random()*1000)},

             {name: "和平县",value: Math.round(Math.random()*1000)},

             {name: "连平县",value: Math.round(Math.random()*1000)},

             {name: "龙川县",value: Math.round(Math.random()*1000)},

             {name: "源城区",value: Math.round(Math.random()*1000)},

             //肇庆

             {name: "德庆县",value: Math.round(Math.random()*1000)},

             {name: "鼎湖区",value: Math.round(Math.random()*1000)},

             {name: "端州区",value: Math.round(Math.random()*1000)},

             {name: "封开县",value: Math.round(Math.random()*1000)},

             {name: "高要市",value: Math.round(Math.random()*1000)},

             {name: "广宁县",value: Math.round(Math.random()*1000)},

             {name: "怀集县",value: Math.round(Math.random()*1000)},

             {name: "四会市",value: Math.round(Math.random()*1000)},

             //惠州

             {name: "博罗县",value: Math.round(Math.random()*1000)},

             {name: "博罗县",value: Math.round(Math.random()*1000)},

             {name: "惠城区",value: Math.round(Math.random()*1000)},

             {name: "惠东县",value: Math.round(Math.random()*1000)},

             {name: "惠阳区",value: Math.round(Math.random()*1000)},

             {name: "龙门县",value: Math.round(Math.random()*1000)},

             //茂名市

             {name: "电白县",value: Math.round(Math.random()*1000)},

               {name: "高州市",value: Math.round(Math.random()*1000)},

               {name: "化州市",value: Math.round(Math.random()*1000)},

               {name: "茂港区",value: Math.round(Math.random()*1000)},

              {name: "茂南区",value: Math.round(Math.random()*1000)},

               {name: "信宜市",value: Math.round(Math.random()*1000)},

               //江门

               {name: "江海区",value: Math.round(Math.random()*1000)},

             {name: "蓬江区",value: Math.round(Math.random()*1000)},

             {name: "台山市",value: Math.round(Math.random()*1000)},

             {name: "开平市",value: Math.round(Math.random()*1000)},

             {name: "恩平市",value: Math.round(Math.random()*1000)},

             {name: "鹤山市",value: Math.round(Math.random()*1000)},

             {name: "新会区",value: Math.round(Math.random()*1000)},

             //阳江市

             {name: "阳春市",value: Math.round(Math.random()*1000)},

             {name: "阳东县",value: Math.round(Math.random()*1000)},

             {name: "江城区",value: Math.round(Math.random()*1000)},

             {name: "阳西县",value: Math.round(Math.random()*1000)},

             //云浮市

             {name: "罗定市",value: Math.round(Math.random()*1000)},

             {name: "新兴县",value: Math.round(Math.random()*1000)},

             {name: "郁南县",value: Math.round(Math.random()*1000)},

             {name: "云安县",value: Math.round(Math.random()*1000)},

             {name: "云城区",value: Math.round(Math.random()*1000)},

             //广州

             {name: "海珠区",value: Math.round(Math.random()*1000)},

             {name: "番禺区",value: Math.round(Math.random()*1000)},

             {name: "白云区",value: Math.round(Math.random()*1000)},

             {name: "从化市",value: Math.round(Math.random()*1000)},

             {name: "花都区",value: Math.round(Math.random()*1000)},

             {name: "黄埔区",value: Math.round(Math.random()*1000)},

             {name: "荔湾区",value: Math.round(Math.random()*1000)},

             {name: "萝岗区",value: Math.round(Math.random()*1000)},

             {name: "南沙区",value: Math.round(Math.random()*1000)},

             {name: "天河区",value: Math.round(Math.random()*1000)},

             {name: "越秀区",value: Math.round(Math.random()*1000)},

             {name: "增城市",value: Math.round(Math.random()*1000)},

             //汕尾市

             {name: "海丰县",value: Math.round(Math.random()*1000)},

             {name: "陆丰市",value: Math.round(Math.random()*1000)},

             {name: "陆河县",value: Math.round(Math.random()*1000)},

             {name: "城区",value: Math.round(Math.random()*1000)},

             //揭阳市

             {name: "榕城区",value: Math.round(Math.random()*1000)},

             {name: "惠来县",value: Math.round(Math.random()*1000)},

             {name: "揭东县",value: Math.round(Math.random()*1000)},

             {name: "揭西县",value: Math.round(Math.random()*1000)},

             {name: "普宁市",value: Math.round(Math.random()*1000)},

             //珠海

             {name: "斗门区", value: Math.round(Math.random()*1000)},

             {name: "金湾区", value: Math.round(Math.random()*1000)},

             {name: "香洲区", value: Math.round(Math.random()*1000)},

             //佛山市

             {name: "高明区", value: Math.round(Math.random()*1000)},

             {name: "南海区", value: Math.round(Math.random()*1000)},

             {name: "三水区", value: Math.round(Math.random()*1000)},

             {name: "顺德区", value: Math.round(Math.random()*1000)},

             {name: "禅城区", value: Math.round(Math.random()*1000)},

             //潮州市

             {name: "潮安县",value: Math.round(Math.random()*1000)},

             {name: "饶平县",value: Math.round(Math.random()*1000)},

             {name: "湘桥区",value: Math.round(Math.random()*1000)},

             //汕头市

             {name: "南澳县",value: Math.round(Math.random()*1000)},

             {name: "濠江区",value: Math.round(Math.random()*1000)},

             {name: "金平区",value: Math.round(Math.random()*1000)},

             {name: "龙湖区",value: Math.round(Math.random()*1000)},

             {name: "澄海区",value: Math.round(Math.random()*1000)},

             {name: "潮阳区",value: Math.round(Math.random()*1000)},

             {name: "潮南区",value: Math.round(Math.random()*1000)},

             //深圳市

             {name: "南山区",value: Math.round(Math.random()*1000)},

             {name: "盐田区",value: Math.round(Math.random()*1000)},

             {name: "宝安区",value: Math.round(Math.random()*1000)},

             {name: "福田区",value: Math.round(Math.random()*1000)},

             {name: "龙岗区",value: Math.round(Math.random()*1000)},

             {name: "罗湖区",value: Math.round(Math.random()*1000)}

               //东莞市

              //中山市

         ]

       }]

     };

     // 为echarts对象加载数据

     myChart.setOption(option);

   }

 );

 </script>

 </body>

　　相关效果图如下：

　　广东地图：

　　

　　广州市地图

　　　　

最新文章

  1. 2016huasacm暑假集训训练五 J - Max Sum
  2. [CoreOS 转载] CoreOS实践指南（五）：分布式数据存储Etcd（上）
  3. Cas_Java客户端登录相关过滤器的处理流程
  4. JSTL Tag学习笔记(一)之&lt;c: /&gt;
  5. SICP的一些练习题
  6. POJ2976 Dropping tests(二分+精度问题）
  7. VS2008 环境中完美搭建 Qt 4.7.4 静态编译的调试与发布（好像很不错，有六张插图说明）good
  8. hdu 1849 （尼姆博弈）
  9. delegate vs event
  10. 前端备忘录--JQuery选择器
  11. http目录显示时间与服务器相差8小时
  12. asp.net mvc Areas 母版页动态获取数据进行渲染
  13. 使用telnet模拟http请求
  14. Linux 下建立 Git 与 GitHub 的连接
  15. Ubuntu 安装Sqldeveloper
  16. mysql小试题3
  17. jquery ajax 的 $.get（）用法详解
  18. hibernate从浅至深
  19. GO学习笔记 - 函数名前面是否有输入参数肯定是不一样的！！
  20. Mac OS Yosemite(10.10.3)系统下环境配置

热门文章

  1. 分享一下刚刚HP电话面试。。。。。。。。我估计我挂了，不过还是要来分享一下
  2. react初始（2）
  3. javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）
  4. 重温Bootstrap
  5. WCF入门教程（二）如何创建WCF服务
  6. Top 15 不起眼却有大作用的 .NET功能集
  7. 26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展
  8. Nginx配置文件详解
  9. C#中JSON序列化和反序列化
  10. 期待已久的2013年度最佳 jQuery 插件揭晓