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

博客介绍了使用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

ECharts中,基于数据比例来设置`symbolSize`大小是一种常见的做法,这有助于保持视觉的均衡和信息的清晰。具体逻辑可以按照以下步骤进行: 1. **确定基准值**:首先,你需要定义一个基准点,这个基准点可能是数据集的最大值或最小值,也可以是一个经验值。 2. **计算比例**:对于每个数据点,将其与基准值做比较,计算出一个比例因子。这个比例因子通常是数据点除以基准值的结果,或者采用对数转换来减小极端值的影响,例如: ```javascript const baseValue = ...; // 基准值 const ratio = Math.min(Math.log(dataValue / baseValue) + 1, 10); // 使用对数防止过大差距 ``` 这里我们使用了对数函数(logarithmic scale)来平滑数据分布。 3. **应用比例**:将比例因子作为`symbolSize`的倍数,加上一个最小值,以防止过小以至于看不见: ```javascript const minSize = 5; // 最小符号尺寸 const actualSize = ratio * minSize; ``` 4. **可视化的调整**:如果需要,你还可以对最终的`symbolSize`做一些调整,例如在某些特定场景下增大大的数据点,缩小小的数据点。 ```javascript if (actualSize > 20) { // 如果超过某个阈值 actualSize = 20; // 设置上限 } ``` 5. **设置symbolSize**: ```javascript series.data[i].symbolSize = actualSize; ``` 这样,`symbolSize`会根据数据的实际大小进行动态缩放,同时保持一定的清晰度。请注意,上述逻辑仅作示例,实际应用时需根据数据特性和可视化需求进行优化。
评论 36
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值