基于echarts显示具体个某个省，某个市，或者某个县的方法

最新推荐文章于 2025-05-29 09:32:15 发布

滚动小人人

最新推荐文章于 2025-05-29 09:32:15 发布

阅读量1.2w

点赞数 11

CC 4.0 BY-SA版权

分类专栏： echart学习文章标签： echarts生成地图生成某个市只生成某个省市县

本文链接：https://blog.youkuaiyun.com/WWW_share8/article/details/90348799

echart学习专栏收录该内容

2 篇文章

订阅专栏

博客介绍了使用ECharts生成地图，可生成河北省廊坊市、云南省昆明市新平县等特定省市县的地图。关键在于使用对应的JSON数据，作者已准备好相关数据，可从https://github.com/wenccro/chinaMapJsonData下载，还给出了河北省廊坊市的案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一个是一个河北省廊坊市里面的地图。分别对应云南省昆明市新平县，这个关键在在于json数据。我已经给大家都弄好了，只需要去下载你需要的json数据就可以了。地址是https://github.com/wenccro/chinaMapJsonData。

那是压缩的那个省份的所有数据，包括时和县都在里面了。可以看我的 demo来做

下面是一个河北省廊坊市案例大家一看就知道了

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>ECharts</title>
	<script src="js/jquery-1.11.3.js"></script>
	<script src="echarts.min.js"></script>
</head>

<body>
	 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
	<script>
		var markdata=[];//这是为了给地图上添加气泡图标,拿取备用数据
		//取得json的样式，读取json文件
		$.getJSON("langfeng.json", "", function(data) {
			markdata=convertData(data.features)
			//生成地图
			createMap(data);
		})
		//生成地图
		function createMap(data){
			echarts.registerMap('demo',data);
			var chart = echarts.init(document.getElementById('main'));
			chart.setOption({
				dataRange: {
					min: 0,//颜色区间的最小值
					max: 50,//颜色区间的最大值，和data中的最大值一致
					x: 'left',
					y: 'bottom',
					text:['高','低'], // 文本，默认为数值文本
					calculable : true,
					inRange: {
						//颜色区间
						color: ['lightskyblue','yellow', 'orangered','red']
					}
				 },
				 tooltip : {
					show:true,
					formatter: '在建工程<br /> {b}: {c0}'
				 },
				series: [{
					type: 'map',
					map: 'demo',
					itemStyle:{
						normal:{label:{show:true}},
						emphasis:{label:{show:true}}
					},
					data:markdata,
					markPoint:{
						symbolSize: 45,
						 itemStyle: {
							normal: {
								borderColor: '#33CBFF',
								color:'#33CBFF',
								borderWidth: 1,            // 标注边线线宽，单位px，默认为1
								label: {
									show: true
								}
							}
						},
						
						data:markdata
					   
					}
				}]
			});
		}
		//处理整合   气泡图标数据
		function convertData(arrs){
			var markdata=[];
			var valuess=[50,20,0,30,15,25,48,10,5,38];
			for(var i=0; i<arrs.length; i++){
				markdata.push({})
				if(arrs[i].properties.name=='安次区'){
					markdata[i].coord=new Array(parseFloat(arrs[i].properties.center[0])+0.1,parseFloat(arrs[i].properties.center[1])-0.18);
					console.log(markdata[i])
				}else{
					markdata[i].coord=arrs[i].properties.center;
				}
				markdata[i].name=arrs[i].properties.name;
				
				markdata[i].value=valuess[i]
			}
			return markdata
		}
	</script>
</body>

json数据包可以去我的githup上下载，地址是https://github.com/wenccro/chinaMapJsonData