综合了网上的大佬的概述,做了一下比较亲民的优化,json文件可以在下面的链接上定制,经纬度可以用百度地图的坐标拾取器和获取,图中以青岛为例,感谢大佬们的之前的贡献,可以让后来人用上现成的,话不多说,贴代码。Make A PieGallery - 分享你的可视化作品https://www.makeapie.com/editor.html?c=xmCAi_XNuJ
<!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>