前言
上一篇文章简单介绍了一下百度公司前端部门写的一个js插件echarts，这是一款很强大的图表插件，里面的地图控件也是很强大的，支持离线的使用，并且数据也是离线的，使用很方便。下面我就简单介绍一下echarts中的地图控件
一、插件下载
echarts3是一个集成的插件，把很多东西都集成到一起了，使用很方便，从官网上下载一下，和普通js文件一样，直接添加到项目中，在HTML头部引用一下即可。
地图的插件也是一个js文件，数据是一个json文件，从官网下载下来，添加引用，但是一定注意引用的先后顺序。
1、echarts下载地址
http://echarts.baidu.com/download.html
2、地图下载
http://echarts.baidu.com/download-map.html （js文件和json文件）包括中国地图和世界地图，还有各个省份的地图数据。
二、插件引用
1、js的引用
1 <script src="echarts.js"></script> 2 <script src="map/js/china.js"></script> 3 <script> 4 var chart = echarts.init(document.getElementById('main')); 5 chart.setOption({ 6 series: [{ 7 type: 'map', 8 map: 'china' 9 }] 10 }); 11 </script>
2、json的引用
1 $.get('map/json/china.json', function (chinaJson) { 2 echarts.registerMap('china', chinaJson); 3 var chart = echarts.init(document.getElementById('main')); 4 chart.setOption({ 5 series: [{ 6 type: 'map', 7 map: 'china' 8 }] 9 }); 10 });
三、完整的demo
HTML代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <script type="text/javascript" src="js/jquery.min.js"></script> 6 <title>河南省地图</title> 7 </head> 8 <body> 9 <div id="main" style="100%;height:800px;"></div> 10 <script type="text/javascript" src="js/echarts.js"></script> 11 <script type="text/javascript" src="js/henan.js"></script> 12 <script type="text/javascript"> 13 $(function () { 14 //获取地区的json数据 15 var henanJson = $.get('json/henan.json'); 16 //加载省份的地图 17 echarts.registerMap('henan', henanJson); 18 var myChart = echarts.init(document.getElementById('main')); 19 myChart.setOption({ 20 series: [{ 21 type: 'map', 22 mapType: '河南' 23 }] 24 }); 25 26 myChart.on('click', function (param) { 27 var selectedCity = param.name; 28 alert(selectedCity); 29 //点击获取对应的市的名称 30 var flag = false; 31 var selected = param.selected; 32 for (var p in selected) { 33 getVodList(mapUtil.findFbdm(selectedCity), selectedCity); 34 //加载右侧的列表 35 if (p == selectedCity) { 36 flag = true; 37 selectedCity = p; 38 } 39 } 40 if (flag) { 41 //重新画地图进入到该市的县级地图 (下钻到县级 ) 42 var map = new Map(); 43 map = getMap(selectedCity, 3); 44 initMap(map, selectedCity, 'xj'); 45 $('#Header').css('display', ''); 46 47 //显示隐藏的返回按钮 48 myChart.on('click', function (param) { 49 var selectedTown = param.target; 50 //点击获取对应的县的名称 51 getVodList(mapUtil.findFbdm(selectedTown), selectedTown); 52 //加载右侧的列表 53 }); 54 } 55 }); 56 }); 57 </script> 58 </body> 59 </html>
四、显示结果
