一、简介

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

二、示例

　　1、下载echart

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

　　

　　2、引入jquery 与 echart

　　${ctx} 为项目访问路径

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

1 // 路径配置 2 require.config({ 3   paths: { 4     echarts: '${ctxStatic}/echart' 5   } 6 });         7         c、使用 8  9 // 使用10 require(11   [12     'echarts',13     'echarts/chart/map' // 使用地图就加载map模块14   ],15   function(ec) {16     // 基于准备好的dom，初始化echarts图表17     var myChart = ec.init(document.getElementById('main'));18     19     //TODO 编写其他代码20     21     // 为echarts对象加载数据 22     myChart.setOption(option);23   }24 );

　　4、代码

1 <%@ page contentType="text/html;charset=UTF-8"%>   2   3   4   5     
       6     
       7       8      
       9      10      11  12  13     
      14     
     
 15 320 

　　相关效果图如下：

　　广东地图：

　　

　　广州市地图