第一个是一个河北省  廊坊市  里面的地图。分别对应  云南省    昆明市     新平县   ,这个关键在在于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

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐