由于echarts3.0地图数据暂停服务了，今天临时要修改一个地区的地图，可把我给忙活了
echarts的例子上提供了引入js显示地图、引入json数据显示地图两种方式，下面简单介绍下这两种引入方式
添加一个div，设置宽度和高度用来显示地图
<body> ???<!-- 为ECharts准备一个具备大小（宽高）的Dom --> ???<div id="main" style="width: 500px;height:400px;"></div></body>
1.通过js方式，显示地图
引入hunan.js，mapType：湖南，这样就可以显示湖南省的地图了
1 <script src="../echarts/echarts.min.js"></script> 2 ????<script src="../echarts/jquery-1.10.2.min.js"></script> 3 ????<script src="../echarts/hunan.js"></script> 4 ????<script type="text/javascript"> 5 ?????6 ????var myChart = echarts.init(document.getElementById(‘main‘)); 7 ?????8 ????option = { 9 ????????????title : {10 ????????????????text: ‘iphone销量‘,11 ????????????????subtext: ‘纯属虚构‘,12 ????????????????x:‘center‘13 ????????????},14 ????????????tooltip : {15 ????????????????trigger: ‘item‘16 ????????????},17 ????????????legend: {18 ????????????????orient: ‘vertical‘,19 ????????????????x:‘left‘,20 ????????????????data:[‘iphone3‘,‘iphone4‘,‘iphone5‘]21 ????????????},22 ????????????dataRange: {23 ????????????????min: 0,24 ????????????????max: 2500,25 ????????????????x: ‘left‘,26 ????????????????y: ‘bottom‘,27 ????????????????text:[‘高‘,‘低‘], ??????????// 文本，默认为数值文本28 ????????????????calculable : true29 ????????????},30 ????????????toolbox: {31 ????????????????show: true,32 ????????????????orient : ‘vertical‘,33 ????????????????x: ‘right‘,34 ????????????????y: ‘center‘,35 ????????????????feature : {36 ????????????????????mark : {show: true},37 ????????????????????dataView : {show: true, readOnly: false},38 ????????????????????restore : {show: true},39 ????????????????????saveAsImage : {show: true}40 ????????????????}41 ????????????},42 ????????????roamController: {43 ????????????????show: true,44 ????????????????x: ‘right‘,45 ????????????????mapTypeControl: {46 ????????????????????‘yueyang‘: true47 ????????????????}48 ????????????},49 ????????????series: [50 ?????????????????????{51 ?????????????????????????name: ‘地市名称‘,52 ?????????????????????????type: ‘map‘,53 ?????????????????????????mapType: ‘湖南‘, /* // 自定义扩展图表类型 */54 ?????????????????????????roam: false,55 ?????????????????????????label:{56 ?????????????????????????????normal: {57 ??????????????????????????????show: true,58 ??????????????????????????},59 ?????????????????????????????emphasis: {60 ?????????????????????????????????show: true,61 ?????????????????????????????}62 ?????????????????????????},63 ?????????????????????????itemStyle: {64 ?????????????????????????????normal: {65 ?????????????????????????????????borderWidth: 0.2,/* //区域边框宽度 */66 ??????????????????????????????borderColor: ‘#009fe8‘,/* //区域边框颜色 */67 ??????????????????????????????areaColor:"#ffefd5"68 ?????????????????????????????},69 ?????????????????????????????emphasis: {70 ?????????????????????????????????areaColor: ‘#FFFFFF‘,71 ?????????????????????????????}72 ?????????????????????????},73 ?????????????????????????showLegendSymbol:true,74 ?????????????????????????data:[75 ??????????????????????????????{name: ‘岳阳市‘, value: 430600},76 ??????????????????????????????{name: ‘楼区‘, value: 430602},77 ??????????????????????????????{name: ‘云溪区‘, value: 430603},78 ??????????????????????????????{name: ‘开发区‘, value: 430604},79 ??????????????????????????????{name: ‘君山‘, value: 430611},80 ??????????????????????????????{name: ‘岳阳县‘, value: 430621},81 ??????????????????????????????{name: ‘华容县‘, value: 430623},82 ??????????????????????????????{name: ‘湘阴县‘, value: 430624},83 ??????????????????????????????{name: ‘平江县‘, value: 430626},84 ??????????????????????????????{name: ‘汨罗市‘, value: 430681},85 ??????????????????????????????{name: ‘临湘市‘, value: 430682},86 ??????????????????????????????{name: ‘屈原‘, value: 430683}87 ??????????????????????????],88 ?????????????????????} 89 ?????????????????]90 ????????};91 ????92 ????/* $.get(‘../echarts/yueyang.json‘, function (chinaJson) {93 ????????echarts.registerMap(‘岳阳‘, chinaJson);94 ????????myChart.setOption(95 ????????????option96 ????????);97 ????}); */98 ????myChart.setOption(option);99 ????</script>2.通过json方式，显示地图
这里以岳阳市为例，通过引入json数据，地图显示岳阳市地图
同样，这里mapType:岳阳，并且
echarts.registerMap(‘岳阳‘, chinaJson);
<script src="../echarts/echarts.min.js"></script> ???<script src="../echarts/jquery-1.10.2.min.js"></script> ???<!-- <script src="../echarts/hunan.js"></script> --> ???<script type="text/javascript"> ???????var myChart = echarts.init(document.getElementById(‘main‘)); ???????option = { ???????????title : { ???????????????text: ‘iphone销量‘, ???????????????subtext: ‘纯属虚构‘, ???????????????x:‘center‘ ???????????}, ???????????tooltip : { ???????????????trigger: ‘item‘ ???????????}, ???????????legend: { ???????????????orient: ‘vertical‘, ???????????????x:‘left‘, ???????????????data:[‘iphone3‘,‘iphone4‘,‘iphone5‘] ???????????}, ???????????dataRange: { ???????????????min: 0, ???????????????max: 2500, ???????????????x: ‘left‘, ???????????????y: ‘bottom‘, ???????????????text:[‘高‘,‘低‘], ??????????// 文本，默认为数值文本 ???????????????calculable : true ???????????}, ???????????toolbox: { ???????????????show: true, ???????????????orient : ‘vertical‘, ???????????????x: ‘right‘, ???????????????y: ‘center‘, ???????????????feature : { ???????????????????mark : {show: true}, ???????????????????dataView : {show: true, readOnly: false}, ???????????????????restore : {show: true}, ???????????????????saveAsImage : {show: true} ???????????????} ???????????}, ???????????roamController: { ???????????????show: true, ???????????????x: ‘right‘, ???????????????mapTypeControl: { ???????????????????‘yueyang‘: true ???????????????} ???????????}, ???????????series: [ ????????????????????{ ????????????????????????name: ‘地市名称‘, ????????????????????????type: ‘map‘, ????????????????????????mapType: ‘岳阳‘, /* // 自定义扩展图表类型 */ ????????????????????????roam: false, ????????????????????????label:{ ????????????????????????????normal: { ?????????????????????????????show: true, ?????????????????????????}, ????????????????????????????emphasis: { ????????????????????????????????show: true, ????????????????????????????} ????????????????????????}, ????????????????????????itemStyle: { ????????????????????????????normal: { ????????????????????????????????borderWidth: 0.2,/* //区域边框宽度 */ ?????????????????????????????borderColor: ‘#009fe8‘,/* //区域边框颜色 */ ?????????????????????????????areaColor:"#ffefd5" ????????????????????????????}, ????????????????????????????emphasis: { ????????????????????????????????areaColor: ‘#FFFFFF‘, ????????????????????????????} ????????????????????????}, ????????????????????????showLegendSymbol:true, ????????????????????????data:[ ?????????????????????????????{name: ‘岳阳市‘, value: 430600}, ?????????????????????????????{name: ‘楼区‘, value: 430602}, ?????????????????????????????{name: ‘云溪区‘, value: 430603}, ?????????????????????????????{name: ‘开发区‘, value: 430604}, ?????????????????????????????{name: ‘君山‘, value: 430611}, ?????????????????????????????{name: ‘岳阳县‘, value: 430621}, ?????????????????????????????{name: ‘华容县‘, value: 430623}, ?????????????????????????????{name: ‘湘阴县‘, value: 430624}, ?????????????????????????????{name: ‘平江县‘, value: 430626}, ?????????????????????????????{name: ‘汨罗市‘, value: 430681}, ?????????????????????????????{name: ‘临湘市‘, value: 430682}, ?????????????????????????????{name: ‘屈原‘, value: 430683} ?????????????????????????], ????????????????????} ?????????????????] ???????}; ???????$.get(‘../echarts/yueyang.json‘, function (chinaJson) { ???????echarts.registerMap(‘岳阳‘, chinaJson); ???????myChart.setOption( ???????????option ???????); ???}); ????//myChart.setOption(option); ???</script>以下是我国各市的json地图数据下载链接，以统筹区方式命名，可根据统筹区找到你要的地市
https://pan.baidu.com/s/1qYMAQXu 提取码：3rtd
echarts地图引入json或者js
原文地址：http://www.cnblogs.com/hnzyyTl/p/7565367.html