本文已参与「新人创作礼」活动，一起开启掘金创作之路。
综合了网上的大佬的概述，做了一下比较亲民的优化，经纬度可以用百度地图的坐标拾取器和获取，图中以青岛为例，感谢大佬们的之前的贡献，可以让后来人用上现成的，话不多说，贴代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="qingdao.json"></script>
<div id="graphic">
<div id="main" style="width: 100%;height:1000px;"></div>
</div>
<script src="引入jquery"></script>
<script type="text/javascript" src="引入echarts"></script><script>
window.onload = function(){
//这里需要下载官网的全国地图，记得要放在服务器环境下
$.get('qingdao.json', function (bdjson) {
echarts.registerMap('qingdao', bdjson);
var myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: '自定义热力图',
subtext: 'data from PM25.in',
//sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff'
}
},
backgroundColor: '#404a59',
visualMap: {
min: 0,
max: 500,
splitNumber: 5,
inRange: {
color: ['#d94e5d','#eac736','#50a3ba'].reverse()
},
textStyle: {
color: '#fff'
}
},
geo: {
map: 'qingdao',
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [{
name: 'AQI',
type: 'heatmap',
coordinateSystem: 'geo',
data: [
[120.373486, 36.095612 , 100], // 经纬度 + 数量
[120.424509, 36.06936, 12],
[120.401513,36.14261, 102],
[120.449518,36.122555, 4561],
[120.02753,36.790191, 122],
[120.110318,36.042983, 200],
[120.464466,36.393326, 102],
[120.02753,36.10646, 1200],
[120.374779,36.149371, 3121],
[120.342584,36.06726, 1112],
[120.601296,36.135847, 1842],
]
}]
};
window.onresize = myChart.resize;
myChart.setOption(option,true);
})
}
</script>
</body>
</html>
