先看效果图
直接复制就可以看结果
获取geo数据后,给已知经纬度的位置添加数字,数字越大,热力图就越大。
<!DOCTYPE html>
<html>
<head>
<title>热力图</title>
</head>
<body>
<div id="map-wrap" style="height: 750px;width: 1200px"></div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
<script type="text/javascript">
$.get('https://geo.datav.aliyun.com/areas/bound/geojson?code=100000_full', function (chinaJson) {
chinaJson.features[8].properties["cp"] = [106.59487, 26.90783]
echarts.registerMap('china', chinaJson); // 注册地图
var mapChart = echarts.init(document.getElementById('map-wrap'));
var myData = [
{name: '贵州', value: [106.625442,26.618209, 18]},
{name: '广东', value: [113.280637,23.125178, 20]},
{name: '北京', value: [116.405285,39.904989, 30]}
]
var option = {
geo: {
map: 'china',
itemStyle: { // 定义样式
normal: { // 普通状态下的样式
areaColor: '#8ac0a9',
borderColor: '#111'
},
emphasis: { // 高亮状态下的样式
areaColor: '#57bde7'
}
},
label: {
normal: {
show: true
},
emphasis: {
show: false
}
},
},
backgroundColor: '#fff', // 图表背景色
series: [
{
type: 'effectScatter', // series图表类型
coordinateSystem: 'geo', // series坐标系类型
symbolSize: function (val) {
return val[2];
},
itemStyle:{
color: '#c34e52'
},
data: myData
}
]
}
mapChart.setOption(option);
});
</script>
</html>