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

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

附上源码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>ECharts</title>
  6. <style>
  7. .dn{
  8. display:none;
  9. }
  10. .divcss5-1 {
  11. 	z-index: 10;
  12. 	border: 1px solid rgb(204, 204, 204);
  13. 	left: 900px;
  14. 	top: 100px;
  15. 	width: 400px;
  16. 	height: 540px;
  17. 	position: absolute;
  18. 	padding: 0 10px;
  19. }
  20. </style>
  21. </head>
  22.  
  23. <body>
  24. <div id="board" class="divcss5-1"></div>
  25. 	<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
  26. 	<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
  27. 	<!--<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>-->
  28. 	<div id="mainMap" style="height: 700px; border: 0px solid #ccc; padding: 10px;margin:25px 0;"></div>
  29.  
  30. 	<!--Step:2 Import echarts.js-->
  31. 	<!--Step:2 引入echarts.js-->
  32. 	<script src="/js/echarts/dist/echarts-all.js"></script>
  33. 	<script src="/js/jquery-1.4.3.js"></script>
  34.  
  35. 	<script type="text/javascript">
  36. 		//var myChart = echarts.init(document.getElementById('mainMap'));
  37. 		// Step:4 require echarts and use it in the callback.
  38. 		// Step:4 动态载入echarts然后在回调函数中開始使用，注意保持按需载入结构定义图表路径
  39. 		var option = {
  40. 				backgroundColor: '#ffffff',
  41. 				title : {
  42. 					text : '***网报进度',
  43. 					subtext : '(当前总数)',
  44. 					x : 'center'
  45. 				},
  46. 				tooltip : {
  47. 					trigger : 'item',
  48. 					formatter : "{c}"
  49. 				},
  50. 				legend : {
  51. 					orient : 'vertical',
  52. 					x : 'left',
  53. 					data : [ '注冊情况统计' ]
  54. 				},
  55. 				dataRange : {
  56. 					x : 'left',
  57. 					y : 'bottom',
  58. 					//orient : 'horizontal',
  59. 					min : 0,
  60. 					max : 3000000,
  61. 					text : [ '300万', '0' ], // 文本，默觉得数值文本
  62. 					splitNumber : 0
  63. 				},
  64. 				toolbox : {
  65. 					show : false,
  66. 				},
  67. 				roamController : {
  68. 					show : false,
  69. 				},
  70. 				series : [{
  71. 					name : '注冊情况统计',
  72. 					type : 'map',
  73. 					mapType : 'china',
  74. 					mapLocation: {
  75. 	                    x: '100',
  76. 	                    y: 'center',
  77. 	                    height: '80%'
  78. 	                },
  79. 					roam : false,
  80. 					showLegendSymbol : false,
  81. 					itemStyle : {
  82. 						normal : {
  83. 							borderWidth : 1,
  84. 							borderColor : 'black',
  85. 							color : 'grey',
  86. 							label : {
  87. 								show : true,
  88. 								textStyle : {
  89. 									color : "black",
  90. 									fontWeight : "bold"
  91. 								}
  92. 							}
  93. 						},
  94. 						emphasis : {
  95. 							label : {
  96. 								show : true
  97. 							}
  98. 						}
  99. 					},
  100. 					data : [],
  101. 					geoCoord: {
  102. 		                "海门":[121.15,31.89],
  103. 		                "北京":[116.46,39.92]
  104. 					}
  105. 				}]
  106. 			};
  107. 		//myChart.setOption(option);
  108. 		var mapDiv = document.getElementById('mainMap');
  109. 		var myChart = echarts.init(mapDiv);
  110. 		myChart.showLoading({
  111. 		    text: '正在努力的读取数据中...',    //loading话术
  112. 		});
  113. 		function getTotal(){
  114. 			$.getJSON("/m/total.action",
  115. 				{xllb:'20'},
  116. 				function(json){
  117. 					var mapChart = echarts.init(mapDiv);
  118. 					var myOption = option;
  119. 					var cntAll = 0;
  120. 					for(var i=0;i<json.length;i++) {
  121. 						cntAll+=json[i].value;
  122. 					}
  123. 					myOption.title.subtext = "(当前总数"+cntAll+")";
  124. 					//var series = myChart.getSeries();
  125. 					myOption.series[0].data = json;
  126. 					//myChart.setSeries(series);
  127. 					mapChart.setOption(myOption, true);
  128. 					//console.log(json);
  129. 				}
  130. 			);
  131. 		}
  132. 		var index = 0;
  133. 		function addMsg(){
  134. 			$.getJSON("/m/msg.action",
  135. 				{xllb:'20',start:index},
  136. 				function(json){
  137. 					if(json.length>0) {
  138. 						var msg = json[0].msg;
  139. 						var $board = $("#board");
  140. 						var $ps = $board.find("p");
  141. 						if($ps.size()>13) {
  142. 							var $lastP = $ps.last()
  143. 							$lastP.hide("slow");
  144. 							$lastP.remove();
  145. 							//console.log("已满");
  146. 						}
  147. 						var p = $("<p class='dn'>"+msg+"</p>");
  148. 						$board.prepend(p);
  149. 						p.slideDown("slow");
  150. 						index++;
  151. 					}
  152. 				}
  153. 			);
  154. 		}
  155. 		setInterval("addMsg()",5000);
  156. 		setInterval("getTotal()",5000);
  157. 		//getTotal(myChart);
  158. 	</script>
  159. </body>
  160. </html>

echarts 地图 动态 展示 结合css+js的更多相关文章

  1. 文字添加响应事件，js动态加载CSS, js弹出DIV

    文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  2. 动态加载css,js

    function dynamicLoadCss(url) { var head = document.getElementsByTagName('head')[0]; var link = docum ...

  3. js实用方法记录-js动态加载css、js脚本文件

    js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调 方法调用:dynamicLoadJs('http://www.yi ...

  4. Echarts 地图上显示数值

    Echarts 地图上展示数值,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiangsu', ...

  5. echarts实现中国地图数据展示

    在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...

  6. 在echarts里在geojson绘制的地图上展示散点图（气泡）、线集。

    先来要实现的效果图: 下方图1是官网的案例:http://www.echartsjs.com/gallery/editor.html?c=scatter-map 下图2是展示气泡类型为pin的效果: ...

  7. Echarts地图展示及属性分析

    Echarts,一个效果非常棒的可视化库,可以生产各种图表,动态展示,附上官方网址:http://www.echartsjs.com/index.html 之前带本科实习时有同学用过,狗哥的博客也用这 ...

  8. react使用echarts地图实现中国地图大区展示

    日常项目中经常会用到百度地图或者echarts图标展示,今天给大家展示的是如何在react开发项目中使用百度echars的地图展示,把中国地图分为东北大区.华东大区.华南大区.华西大区.华中大区以及华 ...

  9. 用JavaScript动态加载CSS和JS文件

    本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...

随机推荐

  1. Vue父子组件之间的通讯（学习笔记）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Jquery学习总结（4）——高效Web开发的10个jQuery代码片段

    在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库.今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来. 1.检测Internet ...

  3. DCL授权命令

    create user 用户名//创建用户    grant DBA to 用户名//授权    revoke //撤销权限

  4. 分库代价高的情况下，如何优化ES解决亿级数据量检索

    数据平台已迭代三个版本,从一开始遇到很多常见的难题,到现在终于有片段时间整理一些已完善的文档,在此分享以供所需朋友的实现参考,但愿能帮助大家少走些弯路,在此篇幅中偏重于ElasticSearch的优化 ...

  5. ASP.NET-Session与复杂数据类型

    原文链接:http://www.cnblogs.com/fish-li/archive/2013/05/28/3104750.html Session与复杂数据类型 Session有三种工作模式,拿A ...

  6. 彻底理解tomcat是怎样多线程处理http请求并将代码执行到controller里的的

    彻底理解tomcat是怎样多线程处理http请求并将代码执行到controller里的的 1.线程池,thread = threadPool.getThread(),thread.executeHtt ...

  7. n个骰子，和为x的概率分别是多少

    开始我居然又没有想出来.. 还是看了解法.开始的时候,一直想的是用概率,百分比来求,后来才发现,用次数来求,最后除一下,更近清晰. 方法,可以是递归,每次多一个骰子的时候,次数分别加上个数以及上一次i ...

  8. POJ 3071

    求概率.其实跟枚举差不多,输入n即是要进行n轮比赛.对每一支球队,设求1的概率,首先1要与2比赛为p1,这是第一轮,第二轮时,1要与3(打败3为p2),4(打败4为p3)中胜者比赛,由于是概率,则两者 ...

  9. HDU 4308 Contest 1

    纯BFS+优先队列扩展. #include <iostream> #include <cstdio> #include <cstring> #include < ...

  10. Java採用JNI调用VC++生成的dll(Java与C++交互)

    应项目需求,须要android调用java,java再调用C++实现android一个图片匹配的功能,我们作为java组须要和C++和Android进行交互.以下是java和C++採用JNI的方式进行 ...