正文

echarts地图动态展示结合css+js

lytwajue  2022-02-11  609

关键词：

echarts地图展示功能非常强大，官网上静态展示的样例非常多了，动态的资料少。研究了下。我眼下实现的通过ajax从server获取数据动态展示地图。

另外，我们有时候希望在地图之上做些自己定义的东西，比方：通知框。或者其它的东西。我们能够通过css图层的方式在地图之上实现。我实现的效果例如以下：

技术分享

附上源码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<style>
.dn{
display:none;
}
.divcss5-1 {
	z-index: 10;
	border: 1px solid rgb(204, 204, 204);
	left: 900px;
	top: 100px;
	width: 400px;
	height: 540px;
	position: absolute;
	padding: 0 10px;
}
</style>
</head>

<body>
<div id="board" class="divcss5-1"></div>
	<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
	<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
	<!--<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>-->
	<div id="mainMap" style="height: 700px; border: 0px solid #ccc; padding: 10px;margin:25px 0;"></div>

	<!--Step:2 Import echarts.js-->
	<!--Step:2 引入echarts.js-->
	<script src="/js/echarts/dist/echarts-all.js"></script>
	<script src="/js/jquery-1.4.3.js"></script>

	<script type="text/javascript">
		//var myChart = echarts.init(document.getElementById(‘mainMap‘));
		// Step:4 require echarts and use it in the callback.
		// Step:4 动态载入echarts然后在回调函数中開始使用，注意保持按需载入结构定义图表路径
		var option = {
				backgroundColor: ‘#ffffff‘,
				title : {
					text : ‘***网报进度‘,
					subtext : ‘(当前总数)‘,
					x : ‘center‘
				},
				tooltip : {
					trigger : ‘item‘,
					formatter : "{c}"
				},
				legend : {
					orient : ‘vertical‘,
					x : ‘left‘,
					data : [ ‘注冊情况统计‘ ]
				},
				dataRange : {
					x : ‘left‘,
					y : ‘bottom‘,
					//orient : ‘horizontal‘,
					min : 0,
					max : 3000000,
					text : [ ‘300万‘, ‘0‘ ], // 文本，默觉得数值文本
					splitNumber : 0
				},
				toolbox : {
					show : false,
				},
				roamController : {
					show : false,
				},
				series : [{
					name : ‘注冊情况统计‘,
					type : ‘map‘,
					mapType : ‘china‘,
					mapLocation: {
	                    x: ‘100‘,
	                    y: ‘center‘,
	                    height: ‘80%‘
	                },
					roam : false,
					showLegendSymbol : false,
					itemStyle : {
						normal : {
							borderWidth : 1,
							borderColor : ‘black‘,
							color : ‘grey‘,
							label : {
								show : true,
								textStyle : {
									color : "black",
									fontWeight : "bold"
								}
							}
						},
						emphasis : {
							label : {
								show : true
							}
						}
					},
					data : [],
					geoCoord: {
		                "海门":[121.15,31.89],
		                "北京":[116.46,39.92]
					}
				}]
			};
		//myChart.setOption(option);
		var mapDiv = document.getElementById(‘mainMap‘);
		var myChart = echarts.init(mapDiv);
		myChart.showLoading({
		    text: ‘正在努力的读取数据中...‘,    //loading话术
		});
		function getTotal(){
			$.getJSON("/m/total.action", 
				{xllb:‘20‘},
				function(json){
					var mapChart = echarts.init(mapDiv);
					var myOption = option;
					var cntAll = 0;
					for(var i=0;i<json.length;i++) {
						cntAll+=json[i].value;
					}
					myOption.title.subtext = "(当前总数"+cntAll+")";
					//var series = myChart.getSeries();
					myOption.series[0].data = json;
					//myChart.setSeries(series);
					mapChart.setOption(myOption, true);
					//console.log(json);
				}
			);
		}
		var index = 0;
		function addMsg(){
			$.getJSON("/m/msg.action", 
				{xllb:‘20‘,start:index},
				function(json){
					if(json.length>0) {
						var msg = json[0].msg;
						var $board = $("#board");
						var $ps = $board.find("p");
						if($ps.size()>13) {
							var $lastP = $ps.last()
							$lastP.hide("slow");
							$lastP.remove();
							//console.log("已满");
						}
						var p = $("<p class=‘dn‘>"+msg+"</p>");
						$board.prepend(p);
						p.slideDown("slow");
						index++;
					}
				}
			);
		}
		setInterval("addMsg()",5000);
		setInterval("getTotal()",5000);
		//getTotal(myChart);
	</script>
</body>
</html>

百度地图标注及结合echarts图谱数据可视化(代码片段)

...度，在页面右侧百度地图中标注企业名称。同时页面左侧ECharts图谱饼状图用于统计企业行业与注册资本。当右侧百度地图缩放拖拽，左侧ECharts图谱根据右侧地图上出现的企业动态变化。详细过程如下两图所示： &nbs... 查看详情

使用springboot+mybatisplus+echarts+mysql从0-1完成中国疫情地图可视化动态展示(代码片段)

最近北京疫情也严重了起来,突然想到了这个动态的echarts全国疫情数据动态展示,做的不好仅供参考前言:用到的技术栈:Springboot+MybatisPlus+Echarts+Mysql1创建数据库表和新增基本的数据方便大家使用我直接导出了.直接运行即... 查看详情

请问怎么用echarts在市级地图里展示小地区热力图

参考技术Arequire.config(paths:echarts:'./js/echarts','echarts/chart/bar':'./js/echarts-map','echarts/chart/line':'./js/echarts-map','echarts/chart/map':'./js/echarts-map');varoption=title:text:'某地区蒸发量和...追问你好，这... 查看详情

echarts结合百度地图怎么能实现动态刷新，而不需要刷新整个页面

参考技术AECharts开源来自百度商业前端数据可视化团队，基于html5Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验... 查看详情

vue使用echarts展示地图(代码片段)

Vue使用Echarts展示地图一，获取地图json二，Vue实现展示2.1Vue环境2.2main.js引入Echarts2.3展示一，获取地图json阿里云数据可视化平台获取阿里云DataV地图选择器二，Vue实现展示2.1Vue环境ES6、vue、vuex、vue-router、vue-cli、axi... 查看详情

vue使用echarts展示地图(代码片段)

vue中，基于echarts地图实现一个人才回流的大数据展示效果

0.引入echarts组件，和中国地图jsimporteChartsfrom‘echarts‘import‘echarts/map/js/china.js‘//引入中国地图1.　设置地图容器<divid="ID_L2H1Map"style="width:600px;height:400px;"></div>　2.调用echarts绘制地图createEchart_2L1H1 查看详情

echarts实现中国地图数据展示(代码片段)

在项目中运用到图形展示数据太常见了，echarts是一款使用率非常高的插件工具，很多大平台都是使用echarts；一般运用到条形、折线、扇形图，今天说一说在中国地图上展示各地数据；首先要准备中国地图的JS文件，可以在网盘... 查看详情

echart地图城市用json返回格式

　　用Echarts中,使用地图的series部分中展示城市如果用json返回数据的话,js不能直接用字符串使用.需要处理一下.　　php中的部分 json返回的数据　　 js中获取json信息用ajax实现调用因为Echarts图表map中的展示城市需要的格式... 查看详情

如何用echarts动态在地图上标识点

参考技术A你好，ECharts可以很方便的在网页上绘制地图，图表，并且可以提供下载图像，放大，缩小，拖动等功能，今天主要说一下它的地图类型（type:＇map＇)是如何实现的．首先在ECharts地图的坐标需要我们存储在一个geoCoord属... 查看详情

vue与animate.css结合使用在可视区域内动态展示的自定义指令

1、vue自定义指令Vue.directive(‘class‘,{inserted:function(el,binding){//聚焦元素binding.addClass=()=>{const{top}=el.getBoundingClientRect()consth=document.documentElement.clientHeight||document.body.clientHei 查看详情

地图叠加图表展示(代码片段)

...到的折线图、柱状图、散点图以及饼图而对于图表更对用Echarts，结合Echarts图表有几种展示方式：下面来看下这三种的查看详情

echarts地图详解(代码片段)

1.引入echarts库文件<scriptcharset="utf-8"type="text/javascript"language="javascript"src="echarts-2.2.7/doc/example/www/js/echarts.js"></script>2.在页面中新建div用于地图展示<divid="main"style="height:450 查看详情

arcgisapiforjs之echarts开源js库实现地图统计图分析

...的，实现的效果一般般；所以，本篇利用arcgisapiforjs结合echarts实现统计图效果，效果比之前好看，效果图如下：实现的思路如下：1.自定义气泡窗口ChartInfoWindow，继承Inf 查看详情

echarts地图详解(代码片段)

echarts.js学习动态数据绑定

Echarts 数据绑定简单的统计表已经可以生成，不过之前图标数据都是直接写在参数里面的，而实际使用中，我们的数据一般都是异步读取的。EChart.js对于数据异步读取这块提供了异步加载的方法。绑定多组数据很多时候需要... 查看详情

echarts添加自定义geojson数据实现地图展示(代码片段)

概述：当初看到echarts的地图的时候感觉可以做点什么，但是一直米有实施，最近刚好用到了，就研究了研究，在echarts中添加了自定义的geojson数据，实现数据的地图展示。geojson数据生成：geojson数据的... 查看详情