版权声明：我写的你不能转载，但是你可以复制啊。复制记得加关注啊（迷之微笑）。 https://blog.csdn.net/quhongqiang/article/details/84644884
<!DOCTYPE html>
<html style="height: 100%";>
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%";>
<div id="container" style="height: 100%";></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
option = null;
var data = [
{name: '香港', value: '香港国际机场'},
{name: '澳门', value: '澳门国际机场'},
{name: '台湾', value: '台湾桃园国际机场'},
{name: '中国', value: '上海浦东国际机场'},
{name: '新加坡', value: '新加坡樟宜机场'},
{name: '马来西亚', value: '吉隆坡国际机场'},
{name: '马来西亚', value: '古晋国际机场'},
{name: '马来西亚', value: '亚庇国际机场'},
{name: '马来西亚', value: '槟城国际机场'},
{name: '柬埔寨', value: '金边国际机场'},
{name: '柬埔寨', value: '暹粒国际机场'},
{name: '印度尼西亚', value: '雅加达苏加诺哈达机场'},
{name: '菲律宾', value: '麦克坦-宿雾国际机场'},
{name: '印度', value: '新德里甘地国际机场'},
{name: '印度', value: '海德拉巴国际机场'},
{name: '印度', value: '班加罗尔国际机场'},
{name: '马尔代夫', value: 'Velana国际机场'},
{name: '阿曼', value: '塞拉莱国际机场'},
{name: '阿联酋', value: '阿布卡比国际机场'},
{name: '沙特阿拉伯·利雅得', value: '哈立德国王国际机场'},
{name: '沙特阿拉伯·达曼', value: '法赫德国王国际机场'},
{name: '加拿大', value: '多伦多皮尔逊国际机场'},
{name: '加拿大', value: '温哥华国际机场'},
{name: '加拿大', value: '埃德蒙顿国际机场'},
{name: '加拿大', value: '温尼伯国际机场'},
{name: '澳大利亚', value: '布里斯本机场'},
{name: '澳大利亚', value: '墨尔本机场'},
{name: '巴西', value: '里约热内卢/RIOgaleao-安东尼奥·卡洛斯·裘宾国际机场'},
{name: '意大利', value: '达芬奇菲乌米奇诺机场(罗马)'},
{name: '英国', value: '伦敦希思罗国际机场'},
];
var geoCoordMap = {
'香港国际机场':[113.922901,22.303733],
'澳门国际机场':[113.592,22.1494],
'台湾桃园国际机场':[121.234792,25.078754],
'上海浦东国际机场':[121.79928302764893,31.150458752704395],
'新加坡樟宜机场':[103.99139,1.36218],
'吉隆坡国际机场':[101.71958,2.74793],
'古晋国际机场':[110.344,1.48417],
'亚庇国际机场':[116.053,5.93722],
'槟城国际机场':[100.277,5.29722],
'金边国际机场':[104.844733,11.5502258],
'暹粒国际机场':[103.813903,13.4086400],
'雅加达苏加诺哈达机场':['-6.12556',106.656],
'麦克坦-宿雾国际机场':[123.97811119146607,10.31598186517425],
'新德里甘地国际机场':[77.09997,28.5587],
'海德拉巴国际机场':[78.42986,17.23673],
'班加罗尔国际机场':[77.70541472305666,13.204852282710783],
'Velana国际机场':[73.5281971883525,4.185657244347064],
'塞拉莱国际机场':[54.1000,17.0333],
'阿布卡比国际机场':[54.64908,24.4293],
'哈立德国王国际机场':[46.70079,24.95847],
'法赫德国王国际机场':[26.4711,49.7978],
'多伦多皮尔逊国际机场':['-79.62447',43.67759],
'温哥华国际机场':['-123.17758',49.19607],
'埃德蒙顿国际机场':['-113.5167',53.5667],
'温尼伯国际机场':['-97.21945',49.90395],
'布里斯本机场':[153.11869,'-27.3838'],
'墨尔本机场':[144.84849,'-37.66964'],
'里约热内卢/RIOgaleao-安东尼奥·卡洛斯·裘宾国际机场':['-43.25162','-22.81157'],
'达芬奇菲乌米奇诺机场（罗马）':[41.8003,12.2389],
'布里斯本机场':['-0.45143',51.47053],
};
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].value];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
option = {
title: {
},
tooltip : {
trigger: 'item',
formatter: function (obj) {
var value = obj.value;
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3)">'
+ obj.name
+ '</div>'
+ value[2]
}
},
bmap: {
zoom: 1,
roam: true,
mapStyle: {
styleJson: [
{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#044161"
}
},
{
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "boundary",
"elementType": "geometry",
"stylers": {
"color": "#064f85"
}
},
{
"featureType": "railway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#005b96",
"lightness": 1
}
},
{
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "geometry",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#00508b"
}
},
{
"featureType": "poi",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "green",
"elementType": "all",
"stylers": {
"color": "#056197",
"visibility": "off"
}
},
{
"featureType": "subway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "manmade",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "local",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "boundary",
"elementType": "geometry.fill",
"stylers": {
"color": "#029fd4"
}
},
{
"featureType": "building",
"elementType": "all",
"stylers": {
"color": "#1a5787"
}
},
{
"featureType": "label",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}
]
}
},
series : [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'bmap',
data: convertData(data),
symbolSize: 20,
symbol: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
symbolRotate: 35,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal:{color: 'rgb(254, 113, 12)',},
}
},
]
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>自行参考，如遇问题，评论区见。欢迎指出不足之地，共同学习。