echarts r 地图_使用echarts实现省市区地图

20200629175631429.png

1、首先先引入echarts.min.js文件，然后改造下beijing.json文件，改造后把json改成js文件。各省的json文件大家可以在网上搜下，如果要先成的文件可以给我留下邮箱，我发给大家。

2、相关的文件都引入后，就可以构建地图了。 下面是简单的demo代码，

echarts.registerMap('beijing', beijingJson);//这里用的那个省市的就写那个省市的名字

var chart = echarts.init(document.getElementById('main'));

chart.setOption({

title:{ //这里是标题

text: '北京市轮廓地图',

top: '3%',

left: 'center',//标题居中显示

textStyle: {//标题的样式

fontSize: 20,

fontWeight: 600,

color: '#222'

}

},

tooltip: {

// 触发类型, 数据项图形触发

trigger: 'item',

formatter: function (val) {//这里是鼠标滑过显示的弹框，弹框可以根据自己的需求去写

return val.data.name + '

'

+ '

'

+ '

' + val.data.value + '

'

+ '

'

}

},

series: [{

type: 'map',

map: 'beijing',

roam: true,//是否开启鼠标缩放和平移漫游

geoIndex: 0,// 不可缺少，否则无tooltip 指示效果

label: {

normal: {

show: true,//显示省份标签

textStyle:{color:"#fff"}//省份标签字体颜色

},

emphasis: {//对应的鼠标悬浮效果

show: true,

textStyle:{color:"#323232"}

}

},

itemStyle: {

normal: {

borderWidth: .5,//区域边框宽度

borderColor: '#0550c3',//区域边框颜色

areaColor:"#17a34f",//区域颜色

},

emphasis: {

borderWidth: .95,//鼠标滑过区域，区域边框宽度

borderColor: '#fff',//鼠标滑过区域，区域边框颜色

areaColor:"#ff6511",//鼠标滑过区域背景色

}

},

data: [//这里是数据

{

name: '延庆区',

url:'https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg',

value: '好邻居！可玩的地儿多的数不过来！',

lng: 115.981186,

lat: 40.462706

},

{

name: '怀柔区',

url:'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',

value: '好邻居！可玩的地儿多的数不过来！',

lng: 116.63853,

lat: 40.322563

},

{

name: '密云区',

url:'https://pic4.zhimg.com/50/v2-270ccddee1da949f5a951da1220b373a_hd.jpg',

value: '好邻居！可玩的地儿多的数不过来！',

lng: 116.849551,

lat: 40.382999

},

{

name: '昌平区',

url:'https://pic2.zhimg.com/50/v2-ec095df48d0362d3eb4d0525d4394e16_hd.jpg',

value: '立水桥、回龙观、西三旗、明朝十三陵',

lng: 116.237832,

lat: 40.226854

},

{

name: '顺义区',

url:'https://pic4.zhimg.com/50/v2-4eab4a0caf6b0382c115005992bd6de0_hd.jpg',

value: '顺义城关、天竺、南法信、高丽营',

lng: 116.663242,

lat: 40.1362

},

{

name: '平谷区',

url:'https://pic3.zhimg.com/50/v2-273aed32f94cceb43f03fa389265d8d7_hd.jpg',

value: '平谷镇，金海湖镇，京东大溶洞',

lng: 117.128025,

lat: 40.147115

},

{

name: '门头沟区',

url:'https://pic2.zhimg.com/50/v2-8492e1436403ff4b1305ee031b2b7e94_hd.jpg',

value: '百花山、妙峰山、潭柘寺、戒台寺、永定河',

lng: 116.108179,

lat: 39.94648

},

{

name: '海淀区',

url:'https://pic2.zhimg.com/50/v2-0a43a0d541eb2ff159c69122f2c1f154_hd.jpg',

value: '中关村、五道口、公主坟、颐和园',

lng: 116.304872,

lat: 39.96553

},

{

name: '石景山区',

url:'https://pic3.zhimg.com/80/v2-48a9b57c60e2f15c818c02b879420b73_720w.jpg',

value: '苹果园、老古城、衙门口、玉泉路',

lng: 116.229612,

lat: 39.912017

},

{

name: '西城区',

url:'https://pic3.zhimg.com/v2-00aac6ebd1fe7abb4f2dbc287152bbb5_r.jpg',

value: '西单、什刹海、西直门、动物园',

lng: 116.372397,

lat: 39.918561

},

{

name: '东城区',

url:'https://pic2.zhimg.com/50/v2-f3ba9dcfdbf8ee9a16827be4ee63d62c_hd.jpg',

value: '天安门、王府井、钟鼓楼、东内大街',

lng: 116.42272,

lat: 39.934579

},

{

name: '朝阳区',

url:'https://pic2.zhimg.com/50/v2-d8f9da83aa06b7f6982918272befe909_hd.jpg',

value: '朝外大街、大北窑、亚运村、三里屯',

lng: 116.449767,

lat: 39.927254

},

{

name: '通州区',

url:'https://pic3.zhimg.com/50/v2-6234a8e355289891af36a7bc15186976_hd.jpg',

value: '新华大街、北苑、管庄、八里桥',

lng: 116.662928,

lat: 39.917001

},

{

name: '大兴区',

url:'https://pic2.zhimg.com/50/v2-05ae0a59a3ab00eb5debdf5cece23cd3_hd.jpg',

value: '黄村镇、西红门、亦庄、庞各庄',

lng: 116.348053,

lat: 39.732833

},

{

name: '房山区',

url:'https://pic2.zhimg.com/50/v2-4aa9534e0a120c7e4778e75ab07f2644_hd.jpg',

value: '良乡、燕山、十渡、周口店',

lng: 116.149892,

lat: 39.755039

},

{

name: '丰台区',

url:'https://pic4.zhimg.com/50/v2-425af7e363e02c9a16b9b49fa2f9d395_hd.jpg',

value: '丰台镇、方庄、大红门、卢沟桥',

lng: 116.293105,

lat: 39.865042

}

]

}],

});

如果大家有需要要源码的话可以在git上下载：(第一次写的地图，不喜勿喷)，喜欢的话给个赞哈