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

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

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

附上源码：

<!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 地图 动态 展示 结合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. JS侧边栏实现

    <!DOCTYPE html> <html lang="en"> <style> </style> <head> < ...

  2. [terry笔记]Oracle SQL 优化之sql tuning advisor (STA)

    前言:经常可以碰到优化sql的需求,开发人员直接扔过来一个SQL让DBA优化,然后怎么办? 当然,经验丰富的DBA可以从各种方向下手,有时通过建立正确索引即可获得很好的优化效果,但是那些复杂SQL错综 ...

  3. Tarjan强联通分量【模板】

    #include <algorithm> #include <cstdio> using namespace std; ); int n,m,v,u; int edgesum, ...

  4. Hadoop 2.2.0和HBase-0.98 安装snappy

    1.安装须要的依赖包及软件 须要安装的依赖包有: gcc.c++. autoconf.automake.libtool 须要安装的配套软件有: Java6.Maven 关于上面的依赖包,假设在ubun ...

  5. linux高级技巧：heartbeat+lvs（三）

    之前我们把LVS和heartbeat都单独进行了測试,是时候进行合并了 1.LVS+heartbeat:         首先显示我们的控制台:                        让这两个 ...

  6. 汇编 -- Hook API （MessageBoxW）

    说到HOOK.我看了非常多的资料和教程.无奈就是学不会HOOK.不懂是我的理解能力差.还是你们说的 不够明确,直到我看了下面这篇文章,最终学会了HOOK: http://blog.sina.com.c ...

  7. [JZOJ 5905] [NOIP2018模拟10.15] 黑暗之魂(darksoul) 解题报告 （拓扑排序+单调队列+无向图基环树）

    题目链接: http://172.16.0.132/senior/#main/show/5905 题目: oi_juruo热爱一款名叫黑暗之魂的游戏.在这个游戏中玩家要操纵一名有 点生命值的无火的余灰 ...

  8. 整数转罗马数字 C++实现 java实现 leetcode系列（十二）

    罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即为两个并 ...

  9. SQLServer 错误: 15404,维护计划无法执行

    错误症状: D:\Program Files\Microsoft SQL Server\MSSQL.1\MSSQL\LOG下面的ERROELOG,用文本打,查看运行维维计划不成功是生成的错误日志详细信 ...

  10. 内部div自动扩张剩余宽度

    <div id="container"> <div id="left">左边</div> <div id=" ...