Created
April 29, 2019 15:29
-
-
Save syrxw/7c656afad82e9895355998b93d490307 to your computer and use it in GitHub Desktop.
百度地图省份点展示
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var mapName = 'china' | |
var data = [ | |
{name: '北京',value: Math.round(Math.random()*1000)}, | |
{name: '天津',value: Math.round(Math.random()*1000)}, | |
{name: '上海',value: Math.round(Math.random()*1000)}, | |
{name: '重庆',value: Math.round(Math.random()*1000)}, | |
{name: '河北',value: Math.round(Math.random()*1000)}, | |
{name: '河南',value: Math.round(Math.random()*1000)}, | |
{name: '云南',value: Math.round(Math.random()*1000)}, | |
{name: '辽宁',value: Math.round(Math.random()*1000)}, | |
{name: '黑龙江',value: Math.round(Math.random()*1000)}, | |
{name: '湖南',value: Math.round(Math.random()*1000)}, | |
{name: '安徽',value: Math.round(Math.random()*1000)}, | |
{name: '山东',value: Math.round(Math.random()*1000)}, | |
{name: '新疆',value: Math.round(Math.random()*1000)}, | |
{name: '江苏',value: Math.round(Math.random()*1000)}, | |
{name: '浙江',value: Math.round(Math.random()*1000)}, | |
{name: '江西',value: Math.round(Math.random()*1000)}, | |
{name: '湖北',value: Math.round(Math.random()*1000)}, | |
{name: '广西',value: Math.round(Math.random()*1000)}, | |
{name: '甘肃',value: Math.round(Math.random()*1000)}, | |
{name: '山西',value: Math.round(Math.random()*1000)}, | |
{name: '内蒙古',value: Math.round(Math.random()*1000)}, | |
{name: '陕西',value: Math.round(Math.random()*1000)}, | |
{name: '吉林',value: Math.round(Math.random()*1000)}, | |
{name: '福建',value: Math.round(Math.random()*1000)}, | |
{name: '贵州',value: Math.round(Math.random()*1000)}, | |
{name: '广东',value: Math.round(Math.random()*1000)}, | |
{name: '青海',value: Math.round(Math.random()*1000)}, | |
{name: '西藏',value: Math.round(Math.random()*1000)}, | |
{name: '四川',value: Math.round(Math.random()*1000)}, | |
{name: '宁夏',value: Math.round(Math.random()*1000)}, | |
{name: '海南',value: Math.round(Math.random()*1000)}, | |
{name: '台湾',value: Math.round(Math.random()*1000)}, | |
{name: '香港',value: Math.round(Math.random()*1000)}, | |
{name: '澳门',value: Math.round(Math.random()*1000)} | |
] | |
var geoCoordMap = {}; | |
myChart.showLoading(); | |
var mapFeatures = echarts.getMap(mapName).geoJson.features; | |
myChart.hideLoading(); | |
mapFeatures.forEach(function(v) { | |
// 地区名称 | |
var name = v.properties.name; | |
// 地区经纬度 | |
geoCoordMap[name] = v.properties.cp; | |
}); | |
function convertData(data) { | |
var res = []; | |
for (var i = 0; i < data.length; i++) { | |
var geoCoord = geoCoordMap[data[i].name]; | |
if (geoCoord) { | |
res.push({ | |
name: data[i].name, | |
value: geoCoord.concat(data[i].value) | |
}); | |
} | |
} | |
return res; | |
} | |
option = { | |
color:['#4472C5'], | |
tooltip : { | |
trigger: 'item' | |
}, | |
visualMap: { | |
min: 0, | |
max: 2500, | |
left: 'left', | |
top: 'bottom', | |
text:['高','低'], // 文本,默认为数值文本 | |
calculable : false, | |
show:false, | |
inRange:{ | |
color:['#074b7f','#12557f','#236280'] | |
}, | |
seriesIndex: [1], | |
}, | |
geo: { | |
map: 'china', | |
roam: true, | |
label: { | |
normal: { | |
show: false, | |
textStyle: { | |
color: 'rgba(0,0,0,0.4)' | |
} | |
}, | |
emphasis:{ | |
show: false, | |
} | |
}, | |
itemStyle: { | |
normal:{ | |
borderColor: '#5487c8' | |
}, | |
emphasis:{ | |
areaColor: null, | |
shadowOffsetX: 0, | |
shadowOffsetY: 0, | |
shadowBlur: 20, | |
borderWidth: 0, | |
shadowColor: 'rgba(0, 0, 0, 0.5)' | |
} | |
} | |
}, | |
series : [ | |
{ | |
type: 'scatter', | |
coordinateSystem: 'geo', | |
data: convertData(data), | |
symbolSize: 16, | |
label: { | |
normal: { | |
formatter: '{b}', | |
position: 'right', | |
show: false | |
}, | |
emphasis: { | |
show: false | |
} | |
}, | |
itemStyle: { | |
normal: { | |
color: '#fbd436' | |
} | |
} | |
}, | |
{ | |
name: '基站数量', | |
type: 'map', | |
mapType: 'china', | |
geoIndex: 0, | |
roam: false, | |
label: { | |
normal: { | |
show: false | |
}, | |
emphasis: { | |
show: false | |
} | |
}, | |
data:data | |
}, | |
] | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment