echarts之基于geojson的自定义地图

最新推荐文章于 2024-06-11 21:36:57 发布

嘿,木头

最新推荐文章于 2024-06-11 21:36:57 发布

阅读量6.9k

点赞数 1

分类专栏： Web 开发文章标签： echart echarts

本文链接：https://blog.csdn.net/BI_Worker/article/details/71511955

版权

Web 开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

应用场景：需要在平面图或者特殊地理区域上展示数据，比如

geojson作为echarts的地图数据源，能实现简单平面图（如果是立体图就需要研究svg）上的数据交互。优点：技术低，学习起来没难度；缺点：耗时耗力，复杂的平面图有难度。

实现步骤： 1、在 http://geojson.io/ 上画自己需要的平面图并导出为geojson

勾画区域时添加name属性

定义一个js文件，变量内容为上面制作的topojson文件

完整简单demo代码如下：

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>巡检异常读数地图</title> 
 </head> 
 <body> 
  <!--<div id="main" style="height: 714px;weight:662px"></div>--> 
  <div id="main" style="height:714px"></div> 
  <script type="text/JavaScript" src="echarts.min.js"></script> 
  <script type="text/javascript" src="test2map.js"></script> 
  <script type="text/javascript">
		var testData = [
		                  {
		                	name:'区域1',value:'480'
		                  },
		                  {
		                	name:'区域2',value:'900'
		                  },
		                  {
		                	  name:'区域3',value:'1939'
		                  }
		                  ];
		//获取最大最小值 以便做数据筛选器				
		var maxData = 0;
		var minData = 0;
		for(var i = 0;i<testData.length;i++){
			var value = parseInt(testData[i].value);
			if(value > maxData){
				maxData = value;
			}
			if(value<minData){
				minData = value;
			}
		}
		
		var option = {
			
			tooltip : {
				trigger : 'item',
				formatter : '{b}<br/>{c} (人次)'
			},
			toolbox : {
				show : true,
				orient : 'vertical',
				x : 'right',
				y : 'center',
				feature : {
					mark : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
			dataRange : {
				min : minData*0.8,
				max : maxData*1.2,
				text : [ '生意好', '生意不好' ],
				realtime : false,
				calculable : true,
				x: 'right',
				y: 'top',
				orient: 'horizontal'
			},
			series : [ {
				name : '日客户流量',
				type : 'map',
				mapType : 'mymap', // 自定义扩展图表类型
				itemStyle : {
					normal : {
						label : {
							show : true
						}
					},
					emphasis : {
						label : {
							show : true
						}
					}
				},
				data : testData,
				// 文本位置修正
				textFixed : {
					'Yau Tsim Mong' : [ -10, 0 ]
				},
				// 文本直接经纬度定位
				geoCoord : {
					'Islands' : [ 113.95, 22.26 ]
				}
			} ]
		};
		//series里定义的mymap,地图js文件里定义的testJson
		echarts.registerMap('mymap', testJson);

		var chart = echarts.init(document.getElementById('main'));

		chart.setOption(option);
	</script>  
 </body>
</html>

效果：

嘿,木头

关注

1
点赞
踩
18

收藏

觉得还不错? 一键收藏
2
评论
echarts之基于geojson的自定义地图

应用场景：需要在平面图或者特殊地理区域上展示数据，比如geojson作为echarts的地图数据源，能实现简单平面图（如果是立体图就需要研究svg）上的数据交互。优点：技术低，学习起来没难度；缺点：耗时耗力，复杂的平面图有难度。实现步骤： 1、在 http://geojson.io/ 上画自己需要的平面图并导出为geojson勾画区域时添加name属性
复制链接

扫一扫

专栏目录