echarts地图引入json或者js
Posted 托马斯不拖马
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts地图引入json或者js相关的知识，希望对你有一定的参考价值。
由于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 : true 29 }, 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\': true 47 } 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 option 96 ); 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的主要内容，如果未能解决你的问题，请参考以下文章