echarts结合geo绘制地图热点图

最新推荐文章于 2024-08-05 05:00:00 发布

码哥儿

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量2.3k

点赞数 1

文章标签： javascript js jquery 数据可视化 css

本文链接：https://blog.csdn.net/weixin_41607376/article/details/114610241

版权

先看效果图
echarts热点效果图
直接复制就可以看结果
获取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>