中国地图点击下钻到省份（含html源码，可直接运行，令含各省份json,全国json）
Posted Smartisan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了中国地图点击下钻到省份（含html源码，可直接运行，令含各省份json,全国json）相关的知识，希望对你有一定的参考价值。
话不多说直接上源码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="ECharts"> <meta name="author" content="kener.linfeng@gmail.com"> <title>ECharts · Example</title> <script src="../js/echarts.js"></script> <script src="../js/jquery-3.1.1.min.js"></script> </head> <body> <div id="chart" class="chart" style="height: 530px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts图表 var myChart = echarts.init(document.getElementById(\'chart\')); //各省份的地图json文件 var provinces = { \'上海\': \'json/data-1482909900836-H1BC_1WHg.json\', \'河北\': \'json/data-1482909799572-Hkgu_yWSg.json\', \'山西\': \'json/data-1482909909703-SyCA_JbSg.json\', \'内蒙古\': \'json/data-1482909841923-rkqqdyZSe.json\', \'辽宁\': \'json/data-1482909836074-rJV9O1-Hg.json\', \'吉林\': \'json/data-1482909832739-rJ-cdy-Hx.json\', \'黑龙江\': \'json/data-1482909803892-Hy4__J-Sx.json\', \'江苏\': \'json/data-1482909823260-HkDtOJZBx.json\', \'浙江\': \'json/data-1482909960637-rkZMYkZBx.json\', \'安徽\': \'json/data-1482909768458-HJlU_yWBe.json\', \'福建\': \'json/data-1478782908884-B1H6yezWe.json\', \'江西\': \'json/data-1482909827542-r12YOJWHe.json\', \'山东\': \'json/data-1482909892121-BJ3auk-Se.json\', \'河南\': \'json/data-1482909807135-SJPudkWre.json\', \'湖北\': \'json/data-1482909813213-Hy6u_kbrl.json\', \'湖南\': \'json/data-1482909818685-H17FOkZSl.json\', \'广东\': \'json/data-1482909784051-BJgwuy-Sl.json\', \'广西\': \'json/data-1482909787648-SyEPuJbSg.json\', \'海南\': \'json/data-1482909796480-H12P_J-Bg.json\', \'四川\': \'json/data-1482909931094-H17eKk-rg.json\', \'贵州\': \'json/data-1482909791334-Bkwvd1bBe.json\', \'云南\': \'json/data-1482909957601-HkA-FyWSx.json\', \'西藏\': \'json/data-1482927407942-SkOV6Qbrl.json\', \'陕西\': \'json/data-1482909918961-BJw1FyZHg.json\', \'甘肃\': \'json/data-1482909780863-r1aIdyWHl.json\', \'青海\': \'json/data-1482909853618-B1IiOyZSl.json\', \'宁夏\': \'json/data-1482909848690-HJWiuy-Bg.json\', \'新疆\': \'json/data-1482909952731-B1YZKkbBx.json\', \'北京\': \'json/data-1482818963027-Hko9SKJrg.json\', \'天津\': \'json/data-1482909944620-r1-WKyWHg.json\', \'重庆\': \'json/data-1482909775470-HJDIdk-Se.json\', \'香港\': \'json/data-1461584707906-r1hSmtsx.json\', \'澳门\': \'json/data-1482909771696-ByVIdJWBx.json\' }; //各省份的数据 var allData = [{ name: \'北京\' }, { name: \'天津\' }, { name: \'上海\' }, { name: \'重庆\' }, { name: \'河北\' }, { name: \'河南\' }, { name: \'云南\' }, { name: \'辽宁\' }, { name: \'黑龙江\' }, { name: \'湖南\' }, { name: \'安徽\' }, { name: \'山东\' }, { name: \'新疆\' }, { name: \'江苏\' }, { name: \'浙江\' }, { name: \'江西\' }, { name: \'湖北\' }, { name: \'广西\' }, { name: \'甘肃\' }, { name: \'山西\' }, { name: \'内蒙古\' }, { name: \'陕西\' }, { name: \'吉林\' }, { name: \'福建\' }, { name: \'贵州\' }, { name: \'广东\' }, { name: \'青海\' }, { name: \'西藏\' }, { name: \'四川\' }, { name: \'宁夏\' }, { name: \'海南\' }, { name: \'台湾\' }, { name: \'香港\' }, { name: \'澳门\' }]; for (var i = 0; i < allData.length; i++) { allData[i].value = Math.round(Math.random() * 100); } loadMap(\'json/data-1527045631990-r1dZ0IM1X.json\', \'china\');//初始化全国地图 var timeFn = null; //单击切换到省级地图，当mapCode有值,说明可以切换到下级地图 myChart.on(\'click\', function(params) { clearTimeout(timeFn); //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行 timeFn = setTimeout(function() { var name = params.name; //地区name var mapCode = provinces[name]; //地区的json数据 if (!mapCode) { alert(\'无此区域地图显示\'); return; } loadMap(mapCode, name); }, 250); }); // 绑定双击事件，返回全国地图 myChart.on(\'dblclick\', function(params) { //当双击事件发生时，清除单击事件，仅响应双击事件 clearTimeout(timeFn); //返回全国地图 loadMap(\'json/data-1527045631990-r1dZ0IM1X.json\', \'china\'); }); /** 获取对应的json地图数据，然后向echarts注册该区域的地图，最后加载地图信息 @params {String} mapCode:json数据的地址 @params {String} name: 地图名称 */ function loadMap(mapCode, name) { $.get(mapCode, function(data) { if (data) { echarts.registerMap(name, data); var option = { title: { text: \'地图下钻\', subtext: \'双击返回中国地图\', left: \'center\' }, toolbox: { feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: [\'line\', \'map\']}, restore: {show: true}, saveAsImage: {show: true} } }, tooltip: { show: true, formatter: function(params) { if (params.data) return params.name + \'：\' + params.data[\'value\'] }, }, visualMap: { type: \'continuous\', text: [\'\', \'\'], showLabel: true, left: \'50\', min: 0, max: 100, inRange: { color: [\'#edfbfb\', \'#b7d6f3\', \'#40a9ed\', \'#3598c1\', \'#215096\', ] }, splitNumber: 0vue+ECharts4.x地图下钻/散点分布以及热力图Vue进阶（幺玖肆）：VantUI 实现 Dialog 弹框动态显示 message