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上下載：(第一次寫的地圖，不喜勿噴)，喜歡的話給個贊哈
總結
以上是生活随笔為你收集整理的echarts r 地图_使用echarts实现省市区地图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 阻止html页面加载,如何防止页面加载重
- 下一篇： android开发用什么字体,移动端we