效果图
一,引入插件
<script crossorigin="anonymous" integrity="sha512-UN8wX5Zf4Af6/2UJOYTYyWLHdua4SWMd1pnIxNoDCtqdaAMk1TQdvwwgoG7ShvuOS1d9jCerLNzwfvRmL7N4iA==" src="https://lib.baomitu.com/echarts/5.2.0/echarts.min.js"></script>
<script crossorigin="anonymous" integrity="sha512-hEU+WXzocJv+jXFWnuGS64U6IxdA13PpoxCSi9CDYWQQoc3bV22AigWDoBdfvEyRotB0wMA1TY10uQxSofhTRw==" src="https://lib.baomitu.com/echarts/5.2.0/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=xxxxxxxx"></script>
bmap为echarts中集成地图
二,准备地图容器,设置大小
<style>
html, body, #container {
height: 100%
}
</style>
<div id="container"></div>
三,js部分,具体见注释(数据是写死的,最好让后台传)
<script>
var myChart = echarts.init(document.getElementById('container'));
var data = [
{name: '南通', value: 9},
{name: '昆山', value: 19},
{name: '连云港', value: 29},
{name: '淮安', value: 39},
{name: '泰州', value: 6},
{name: '宿迁', value: 16},
{name: '苏州', value: 26},
{name: '镇江', value: 20},
{name: '扬州', value: 30},
{name: '常州', value: 15},
{name: '南京', value: 3},
{name: '徐州', value: 9},
];
var geoCoordMap = {
'南通': [121.05, 32.08],
'昆山': [120.95, 31.39],
'连云港': [119.16, 34.59],
'常熟': [120.74, 31.64],
'淮安': [119.15, 33.5],
'泰州': [119.9, 32.49],
'宿迁': [118.3, 33.96],
'苏州': [120.62, 31.32],
'镇江': [119.44, 32.2],
'扬州': [119.42, 32.39],
'常州': [119.95, 31.79],
'南京': [118.78, 32.04],
'徐州': [117.2, 34.26],
};
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
console.log(geoCoord);
if (geoCoord) {
res.push({name: data[i].name, value: geoCoord.concat(data[i].value)});
}
}
return res;
};
var option = {
title: { //标题
text: '',
subtext: '', //副标题
sublink: '', //副标题链接
left: 'center' //标题位置,居中
},
tooltip: {
formatter: function (params) {
return (
"城市: " + params.name + "<br>空气质量: " + params.value[2]
);
}
},
bmap: { //百度地图的设置
center: [118.78, 32.07], //中心点
zoom: 8, //缩放
roam: true, //漫游
mapStyle: {
styleJson: [
{
'featureType': 'land', //调整土地颜色
'elementType': 'geometry',
'stylers': {
'color': '#081734'
}
},
{
'featureType': 'building', //调整建筑物颜色
'elementType': 'geometry',
'stylers': {
'color': '#04406F'
}
},
{
'featureType': 'building', //调整建筑物标签是否可视
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'highway', //调整高速道路颜色
'elementType': 'geometry',
'stylers': {
'color': '#015B99'
}
},
{
'featureType': 'highway', //调整高速名字是否可视
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'arterial', //调整一些干道颜色
'elementType': 'geometry',
'stylers': {
'color': '#003051'
}
},
{
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'green',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'water',
'elementType': 'geometry',
'stylers': {
'color': '#044161'
}
},
{
'featureType': 'subway', //调整地铁颜色
'elementType': 'geometry.stroke',
'stylers': {
'color': '#003051'
}
},
{
'featureType': 'subway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'railway',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'railway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'all', //调整所有的标签的边缘颜色
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#313131'
}
},
{
'featureType': 'all', //调整所有标签的填充颜色
'elementType': 'labels.text.fill',
'stylers': {
'color': '#FFFFFF'
}
},
{
'featureType': 'manmade',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'manmade',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'local',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'local',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'subway',
'elementType': 'geometry',
'stylers': {
'lightness': -65
}
},
{
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'lightness': -40
}
},
{
'featureType': 'boundary',
'elementType': 'geometry',
'stylers': {
'color': '#8b8787',
'weight': '1',
'lightness': -29
}
}
]
}
},
series: [
{
name: '空气质量',
type: 'effectScatter',
coordinateSystem: 'bmap',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
})),
symbolSize: function (val) {
return val[2] / 2;
},
rippleEffect: {brushType: 'stroke'},
hoverAnimation: true,
label: {normal: {formatter: '{b}', position: 'right', show: true}},
itemStyle: {normal: {color: '#780385', shadowBlur: 10, shadowColor: '#333'}},
zlevel: 1
},
]
};
myChart.setOption(option);
</script>
获取map实例,调用事件
var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.addEventListener("click", function(){
alert("您点击了地图。");
})
在此处获取了echarts中的bmap,即可完成对百度地图的一系列自定义操作。