echarts地图引入json或者js

2022-05-31 23:19| 来源: 网络整理| 查看: 265

由于echarts3.0地图数据暂停服务了，今天临时要修改一个地区的地图，可把我给忙活了

echarts的例子上提供了引入js显示地图、引入json数据显示地图两种方式，下面简单介绍下这两种引入方式

添加一个div，设置宽度和高度用来显示地图

1.通过js方式，显示地图

引入hunan.js，mapType：湖南，这样就可以显示湖南省的地图了

1 2 3 4 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

技术分享

2.通过json方式，显示地图

这里以岳阳市为例，通过引入json数据，地图显示岳阳市地图

同样，这里mapType:岳阳，并且

echarts.registerMap(‘岳阳‘, chinaJson); 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);

技术分享

以下是我国各市的json地图数据下载链接，以统筹区方式命名，可根据统筹区找到你要的地市

https://pan.baidu.com/s/1qYMAQXu 提取码：3rtd

echarts地图引入json或者js

原文：http://www.cnblogs.com/hnzyyTl/p/7565367.html

【本文地址】

公司简介

联系我们