关闭

分享几个用Echarts做的图表3

769人阅读 评论(0) 收藏 举报
分类:

3.类迁徙图

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>公民系统——公民大数据</title>
	<link type="text/css" rel="stylesheet" href="css/normalize.css"/>
	<link type="text/css" rel="stylesheet" href="css/cssgai.css"/>
	<link type="text/css"  rel="stylesheet" href="css/bar.css"/>
	<link type="text/css"  rel="stylesheet" href="css/liMarquee.css"/>
	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/bar.js"></script>
	<script src="js/easing.js"></script>
	<script src="js/jquery.liMarquee.js"></script>
	<script src="js/jiankong.js"></script>
	<script src="js/initechart.js"></script>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1, maximum-scale=1"/>
</head>
<body>
<div class="content">
	<div class="top">
		<div class="top-left">
			<div class="top-left-content">
				<div class="top-left-one2 setpp">
					<p><span>数据采集</span></p>
					<ul class="top-left-one2ul">
						<li class="first-li">
							<div class="list-one one-list">
								<div class="list-img"><img src="img/hose.png"  ></div>
								<div class="company">提供单位</div>
								<div class="nmber"><em id="dws1">17</em>家</div>
							</div>
						</li>
						<li class="second-li">
							<div class="list-one one-list">
								<div class="list-img"><img src="img/pie.png"></div>
								<div class="company">提供类别</div>
								<div class="nmber"><em id="sjls">79</em>类</div>
							</div>
						</li>
						<li class="three-li">
							<div class="list-one one-list">
								<div class="list-img"><img src="img/bar.png"></div>
								<div class="company">数据条款</div>
								<div class="nmber"><em id="sjts">2322</em>万条</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="top-list1 setpp">
					<p>数据归集类型排名</p>
					<div class="progeress2">
						<ul >
							<li><span><em class="set">1.</em></span>
								<div class="join2" id="sjl0">参保信息<span class="canbao2"><em>123</em>万条</span></div>
								<div class="bars"><span id="bar1">55</span></div>

							</li>
							<li><span class="card"><em class="set">2.</em></span>
								<div class="join2" id="sjl1">身份证信息<span class="canbao2"><em class="card">123</em>万条</span></div>
								<div class="bars"><span id="bar2">55</span></div>

							</li>
							<li><span class="hunyian"><em class="set">3.</em></span>
								<div class="join2" id="sjl2">婚姻信息<span class="canbao2"><em class="hunyian">123</em>万条</span></div>
								<div class="bars"><span id="bar3">55</span></div>
							</li>
						</ul>
						<ul  class="progressRight">
							<li><span class="four"><em class="set">4.</em></span>
								<div class="join2" id="sjl3">住房信息<span class="canbao2"><em >123</em>万条</span></div>
								<div class="bars"><span id="bar4">55</span></div>

							</li>
							<li><span class="four"><em class="set">5.</em></span>
								<div class="join2" id="sjl4">犯罪信息<span class="canbao2"><em>123</em>万条</span></div>
								<div class="bars"><span id="bar5">55</span></div>

							</li>
							<li><span class="four"><em class="set">6.</em></span>
								<div class="join2" id="sjl5">犯罪信息<span class="canbao2"><em>123</em>万条</span></div>
								<div class="bars"><span id="bar6">55</span></div>
							</li>
						</ul>
					</div>
				</div>
				<div class="top-list2 setpp">
					<p>数据归集历程</p>
					<div class="top-list2-content">
						<Ul class="firstul firbox">
							<li>归集条数</li>
							<li>归集条款</li>
							<li>归集条款</li>
						</Ul>
						<Ul class="firstul">
							<li><em id="gjts1">1090</em>万条</li>
							<li><em id="gjts2">1090</em>万条</li>
							<li><em id="gjts3">1090</em>万条</li>
						</Ul>
						<div class="img-bg"><img src="img/timg-bg.png"></div>
						<Ul class="timeul">
							<li>2014</li>
							<li>2015</li>
							<li>2016</li>
						</Ul>
					</div>
				</div>
			</div>
		</div>
		<div class="top-middle">
			<div class="top-middle-content">
				<div class="text">
					<button onclick="fnJump();">查看人口云图</button>
					<p>公民大数据</p>
				</div>
				<div class="main" id="main">

				</div>
				<div class="bot-text">
					<p>数据交互图</p>
				</div>
			</div>
		</div>
		<div class="top-right">
			<div class="top-right-content ">
				<div class="top-right-right setp">
					<span>实时协同数据</span>
					<span class="setp-right"><img src="img/ringht_top1.png"/><span id="jrgxcs">27854</span></span>
					<span class="setp-left"><img src="img/right_top.png"/><span id="jrfkts">27854</span></span>
					<ul class="table-title">
						<li>时间<span>|</span></li>
						<li>使用单位<span>|</span></li>
						<li>提供单位<span>|</span></li>
						<li>数据类<span>|</span></li>
					</ul>
				</div>
				<div class="dowebok">
					<ol  class="olscoll" id="breakNewsList">
						<!--<li>
							<a href="#">网易网易女网易女女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
						</li>
						<li>
							<a href="#">网易网易女网易女女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
						</li>
						<li>
							<a href="#">网易网易女网易女女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
						</li>
						<li>
							<a href="#">网易网易女网易女女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
						</li>
						<li>
							<a href="#">网易网易女网易女女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
						</li>
						<li>
							<a href="#">网易网易女网易女女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
						</li>
						<li>
							<a href="#">网易网易女网易女女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
						</li>
						<li>
							<a href="#">网易网易女网易女女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
						</li>
						<li>
							<a href="#">网易网易女网易女女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
						</li>
						<li>
							<a href="#">网易网易女网易女女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
						</li>
						<li>
							<a href="#">网易网易女网易女女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
						</li>
						<li>
							<a href="#">网易网易女网易女女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
						</li>
						<li>
							<a href="#">网易网易女网易女女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
						</li>
						<li>
							<a href="#">网易网易女网易女女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
						</li>
						<li>
							<a href="#">网易网易女网易女女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
						</li>
						<li>
							<a href="#">网易网易女网易女女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
						</li>
						<li>
							<a href="#">网易网易女网易女女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
						</li>
						<li>
							<a href="#">网易网易女网易女女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
							<a href="#">网易女</a>
						</li>-->
					</ol>
				</div>
			</div>
		</div>
	</div>
	<div class="bottom">
		<div class="bottom-content1">
			<div class="bottom-left">
				<div class="bottom-left-content">
					<div class="top-left-four setp">
						<p><span>养老待遇人员生存状态核查</span></p>
						<div class="bottom-content">
							<div class="olderone">
								<div class="inspect-left">
									核查期数:
									<span id="hcjs">5</span>
									期

								</div>
								<div class="inspect-right">
									涉及人数:
									<span id="sjrs">2222</span>
									人
								</div>
							</div>
							<ul class="death2-ul">
								<li >死亡、注销(公安)<span id="swga">3507<em>人</em></span></li>
								<li >死亡医学证明(卫计)<span id="swwjw">3507<em>人</em></span></li>
								<li class="firstli">殡葬火化(民政)<span id="swmz">3507<em>人</em></span></li>
								<li  class="countrest" >合计<span id="deathall">3507<em>人</em></span></li>
							</ul>

						</div>

					</div>
				</div>
			</div>
			<div class="bottom-right bottom-right-title">
				<p><span>业务协同</span></p>
				<div class="bottom-right-left-content">

					<ul>
						<li class="first-li">
							<div class="bottom-img"><img src="img/hose.png"> </div>
							<div class="bottom-company">涉及单位</div>
							<div class="bottom-number sheiji" id="dws"><span>17</span>家</div>
						</li>
						<li class="bottom-li">
							<div class="bottom-img"><img src="img/computer.png"> </div>
							<div class="bottom-company">对接系统</div>
							<div class="bottom-number system" id="xts"><span>17</span>个</div>
						</li>
						<li class="bottom-li2">
							<div class="bottom-img"><img src="img/share.png"> </div>
							<div class="bottom-company">数据共享</div>
							<div class="bottom-number bottom-share" id="sjgx"><span>17</span>万次</div>
						</li>
						<li class="bottom-li3">
							<div class="bottom-img"><img src="img/clause.png"> </div>
							<div class="bottom-company">反馈条款</div>
							<div class="bottom-number bottom-suggestion" id="fks"><span>17</span>万条</div>
						</li>
					</ul>
				</div>
				<div class="bottom-right-content">
					<div id="badiv"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--进度条-->
<script>
	/*$('#bar1').barIndicator({
	 milestones:false,
	 backColor:false,
	 horBarHeight:10,
	 foreColor:'#ff5555',
	 animTime:1000
	 });
	 $('#bar2').barIndicator({
	 milestones:false,
	 backColor:false,
	 horBarHeight:10,
	 foreColor:'#edca16',
	 animTime:1000
	 });
	 $('#bar3').barIndicator({
	 milestones:false,
	 backColor:false,
	 horBarHeight:10,
	 foreColor:'#02c9b6',
	 animTime:1000
	 });
	 $('#bar4').barIndicator({
	 milestones:false,
	 backColor:false,
	 horBarHeight:10,
	 foreColor:'#27bdf0',
	 animTime:1000
	 });
	 $('#bar5').barIndicator({
	 milestones:false,
	 backColor:false,
	 horBarHeight:10,
	 foreColor:'#27bdf0',
	 animTime:1000
	 });
	 $('#bar6').barIndicator({
	 milestones:false,
	 backColor:false,
	 horBarHeight:10,
	 foreColor:'#27bdf0',
	 animTime:1000
	 });*/
</script>
<script>
	$('.bi-label').remove()
</script>
</body>
<script>
	(function (doc, win) {
		// 分辨率Resolution适配
		var docEl = doc.documentElement,
				resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
				recalc = function () {
					var clientWidth = docEl.clientWidth;
					if (!clientWidth) return;
					docEl.style.fontSize = 100 * (clientWidth / 1349) + 'px';

				};

		// Abort if browser does not support addEventListener
		if (!doc.addEventListener) return;
		win.addEventListener(resizeEvt, recalc, false);
		doc.addEventListener('DOMContentLoaded', recalc, false);
	})(document, window);
</script>
<script>
	$(function(){
//		$('.dowebok').liMarquee({
//			direction: 'down',
//			loop:1,
//			runshort:true
//
//		});
	});
</script>
<script src="js/echarts.js"></script>
<script>
	var myChart= echarts.init(document.getElementById('badiv'));
	option = {
		title : {
			text: '单位(万条)',
			textStyle: {
				color: '#fff',
				fontSize:10,
			}
		},
		tooltip : {
			trigger: 'axis'
		},
		grid:{
			borderWidth:0,
			x:50,
			y:40,
			x2:20,
			y2:40
		},


		calculable : true,
		xAxis : [
			{
				type : 'category',
				axisTick:false,
				splitArea:false,
				axisLabel:{
					textStyle: {
						color: '#4e758d',
					}
				},
				splitLine:false,
				data : ['身份证信息','社保信息','婚姻状况',
					{
						value:'医疗信息',
						textStyle: {
							color: '#abc0ce',
						}
					}
					,'住房信息','犯罪信息',
					'年龄信息','死亡信息']
			}
		],
		yAxis : [
			{
				type : 'value',
				axisLine:false,
				splitArea:false,
				splitLine:false,
				axisLabel:{
					textStyle: {
						color: '#4e758d',
					}
				},
				splitLine:{
					lineStyle:{
						color: '#1f5575',
						width: 4,
						type: 'solid'
					},
				},
			}
		],
		series : [
			{

				itemStyle: {
					normal: {
						color:'#27bdf0',
					},

				},
				type:'bar',
				data:[2.0, 4.9, 7.0,
					{
						value:9,
						itemStyle: {
							normal: {
								color:'#ccec5a',
							},

						},
					}
					,

					25.6, 76.7, 135.6,2.6],

			}
		]
	};
	myChart.setOption(option)
	window.onresize = myChart.resize

	//中间的公民系统echarts数据

	/*	<!-- JavaScript 生成的标签 让内容变得不易查找、编辑,并且降低性能,尽量避免 --!>*/
	// center:104.12556,30.763712
	// 102.848672,29.968017
	//上排单位距离中心的距离参数
	var a = 1;
	//下排单位距离中心的距离参数
	var b =-1;
	var screenwidth = window.screen.width;

	if(screenwidth==1366){
		var points = {"公民系统":[103.12556,30.363712,33],
			"市人民政府应急办":[92.62556,32.763712+a,33],
			"市委组织部":[95.62556,32.763712+a,33],
			"市法院":[98.62556,32.763712+a,33],
			"市检察院":[101.62556,32.763712+a,33],
			"市公安局":[104.62556,32.763712+a,33],
			"市民政局":[107.62556,32.763712+a,33],
			"市司法局":[110.62556,32.763712+a,33],
			"市人社局":[113.62556,32.763712+a,33],

			"市房管局":[92.62556,27.563712+b,33],
			"市农委":[95.62556,27.563712+b,33],
			"市卫计委":[98.62556,27.563712+b,33],
			"成都公积金中心":[101.62556,27.563712+b,33],
			"市政府政务中心":[104.62556,27.563712+b,33],
			"市国安局":[107.62556,27.563712+b,33],
			"成都12345APP":[110.62556,27.563712+b,33],
			"市民融合平台":[113.62556,27.563712+b,33]};
	}else{
		var points = {"公民系统":[103.12556,30.363712,33],
			"市人民政府应急办":[95.12556,32.763712+a,33],
			"市委组织部":[98.12556,32.763712+a,33],
			"市法院":[100.12556,32.763712+a,33],
			"市检察院":[102.12556,32.763712+a,33],
			"市公安局":[104.12556,32.763712+a,33],
			"市民政局":[106.12556,32.763712+a,33],
			"市司法局":[108.12556,32.763712+a,33],
			"市人社局":[110.12556,32.763712+a,33],

			"市房管局":[94.62556,27.563712+b,33],
			"市农委":[96.62556,27.563712+b,33],
			"市卫计委":[98.62556,27.563712+b,33],
			"成都公积金中心":[100.62556,27.563712+b,33],
			"市政府政务中心":[103.32556,27.563712+b,33],
			"市国安局":[105.62556,27.563712+b,33],
			"成都12345APP":[107.75056,27.563712+b,33],
			"市民融合平台":[110.52556,27.563712+b,33]};
	}
	// label为top
	var label_top = ["市人民政府应急办","市委组织部","市法院","市检察院","市公安局","市民政局","市司法局","市人社局"];
	//label 为 bottom
	var label_bottom =["市房管局","市农委","市卫计委","成都公积金中心","市政府政务中心","市国安局","成都12345APP","市民融合平台"];
	// 线条弯强度系数
	var n=0.6;
	// 流入数据流
	//	var lines0 = [
	//				[{name:'市人民政府应急办'},{name:'公民系统',value:22,curveness:-0.3*n}],
	//				[{name:'市委组织部'},{name:'公民系统',value:22,curveness:0.1*n}],
	//				[{name:'市法院'},{name:'公民系统',value:22,curveness:-0.2*n}],
	//				[{name:'市检察院'},{name:'公民系统',value:22,curveness:0.2*n}],
	//				[{name:'市公安局'},{name:'公民系统',value:22,curveness:-0.2*n}],
	//				[{name:'市民政局'},{name:'公民系统',value:22,curveness:0.2*n}],
	//				[{name:'市司法局'},{name:'公民系统',value:22,curveness:-0.1*n}],
	//				[{name:'市人社局'},{name:'公民系统',value:22,curveness:0.3*n}],
	//
	//				[{name:'市房管局'},{name:'公民系统',value:22,curveness:0.4*n}],
	//				[{name:'市农委'},{name:'公民系统',value:22,curveness:0.3*n}],
	//				[{name:'市卫计委'},{name:'公民系统',value:22,curveness:0.2*n}],
	//				[{name:'成都公积金中心'},{name:'公民系统',value:22,curveness:0.1*n}],
	//				[{name:'市政府政务中心'},{name:'公民系统',value:22,curveness:0*n}],
	//				[{name:'市国安局'},{name:'公民系统',value:22,curveness:-0.2*n}],
	//				[{name:'成都12345APP'},{name:'公民系统',value:22,curveness:-0.1*n}],
	//				[{name:'市民融合平台'},{name:'公民系统',value:22,curveness:-0.3*n}]
	//
	//	];
	// 流出数据流
	var linesdata=[];
	var xietongdata=[];
	var lindesobj={
		'市人民政府应急办':[{name:'公民系统'},{name:'市人民政府应急办',value:0,curveness:0.3*n}],
		'市委组织部':[{name:'公民系统'},{name:'市委组织部',value:0,curveness:-0.1*n}],
		'市法院':[{name:'公民系统'},{name:'市法院',value:2,curveness:0.2*n}],
		'市检察院':[{name:'公民系统'},{name:'市检察院',value:2,curveness:-0.2*n}],
		'市公安局':[{name:'公民系统'},{name:'市公安局',value:2,curveness:0.2*n}],
		'市民政局':[{name:'公民系统'},{name:'市民政局',value:2,curveness:-0.2*n}],
		'市司法局':[{name:'公民系统'},{name:'市司法局',value:2,curveness:0.1*n}],
		'市人社局':[{name:'公民系统'},{name:'市人社局',value:2,curveness:-0.3*n}],
		'市房管局':[{name:'公民系统'},{name:'市房管局',value:2,curveness:-0.4*n}],
		'市农委':[{name:'公民系统'},{name:'市农委',value:2,curveness:-0.3*n}],
		'市卫计委':[{name:'公民系统'},{name:'市卫计委',value:2,curveness:-0.2*n}],
		'成都公积金中心':[{name:'公民系统'},{name:'成都公积金中心',value:2,curveness:-0.1*n}],
		'市政府政务中心':[{name:'公民系统'},{name:'市政府政务中心',value:2,curveness:0*n}],
		'市国安局':[{name:'公民系统'},{name:'市国安局',value:2,curveness:0.2*n}],
		'成都12345APP':[{name:'公民系统'},{name:'成都12345APP',value:2,curveness:0.1*n}],
		'市民融合平台':[{name:'公民系统'},{name:'市民融合平台',value:2,curveness:0.4*n}]
	};


	var lines1 = [
		[{name:'公民系统'},{name:'市人民政府应急办',value:0,curveness:0.3*n}],
		[{name:'公民系统'},{name:'市委组织部',value:0,curveness:0.2*n}],
		[{name:'公民系统'},{name:'市法院',value:2,curveness:0.2*n}],
		[{name:'公民系统'},{name:'市检察院',value:2,curveness:0.2*n}],
		[{name:'公民系统'},{name:'市公安局',value:2,curveness:-0.2*n}],
		[{name:'公民系统'},{name:'市民政局',value:2,curveness:-0.2*n}],
		[{name:'公民系统'},{name:'市司法局',value:2,curveness:-0.2*n}],
		[{name:'公民系统'},{name:'市人社局',value:2,curveness:-0.3*n}],

		[{name:'公民系统'},{name:'市房管局',value:2,curveness:-0.4*n}],
		[{name:'公民系统'},{name:'市农委',value:2,curveness:-0.3*n}],
		[{name:'公民系统'},{name:'市卫计委',value:2,curveness:-0.2*n}],
		[{name:'公民系统'},{name:'成都公积金中心',value:2,curveness:-0.2*n}],
		[{name:'公民系统'},{name:'市政府政务中心',value:2,curveness:0*n}],
		[{name:'公民系统'},{name:'市国安局',value:2,curveness:0.2*n}],
		[{name:'公民系统'},{name:'成都12345APP',value:2,curveness:0.3*n}],
		[{name:'公民系统'},{name:'市民融合平台',value:2,curveness:0.4*n}]

	];

	var lines2 = [
		[{name:'公民系统'},{name:'市人民政府应急办',value:0,curveness:0.3*n}],
		[{name:'公民系统'},{name:'市委组织部',value:0,curveness:-0.1*n}],
		[{name:'公民系统'},{name:'市法院',value:2,curveness:0.2*n}],
		[{name:'公民系统'},{name:'市检察院',value:2,curveness:-0.2*n}],
		[{name:'公民系统'},{name:'市公安局',value:2,curveness:0.2*n}],
		[{name:'公民系统'},{name:'市民政局',value:2,curveness:-0.2*n}],
		[{name:'公民系统'},{name:'市司法局',value:2,curveness:0.1*n}],
		[{name:'公民系统'},{name:'市人社局',value:2,curveness:-0.3*n}]



	];
	// 生成lines的data数据
	var convertData = function(data){
		var res = [];
		for (var i=0; i<data.length; i++){
			var dataItem = data[i];
			var fromPoint = points[dataItem[0].name];
			var toPoint = points[dataItem[1].name];
			var curveness = dataItem[1].curveness;
			if(fromPoint && toPoint){
				res.push({
					fromName: dataItem[0].name,
					toName: dataItem[1].name,
					coords: [fromPoint,toPoint],
					lineStyle: {
						normal: {
							curveness: curveness
						},
						emphasis: {
							curveness: curveness
						}
					}
				});
			}
		}
		//console.log(res);
		return res;

	};
	// 判断数据中是否包含某函数
	function hasElement(arr,ele){
		if(arr){
			for(var i=0;i<arr.length; i++){
				if(arr[i]===ele){
					return true;
				}
			}
		}
		return false;
	}
	// svg可以自定义生成
	var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

	//	// 流入
	//	var lines_in = {
	//		name:'流入',
	//		type: 'lines',
	//		zlevel:2,
	//		lineStyle: {
	//			normal: {
	//				color: '#edca16',
	//				width: 1,
	//				opacity: 0.4,
	//				curveness: -0.2,
	//				shadowColor: 'rgba(225, 201, 60, 0.4)',
	//				shadowBlur: 5
	//			}
	//		},
	//		data:convertData(lines0)
	//	};

	// 流出
	var lines_out = {
		name:'流出',
		type: 'lines',
		zlevel:2,
		effect:{
			show:false,
			period:6,
			trailLength:0.1,
			color:'#edca16',
			// symbol: 'roundReact',
			// symbol: planePath,
			symbolSize: 8
		},
		lineStyle: {
			normal: {
				color: '#edca16',
				width: 1,
				opacity: 0.4,
				curveness: -0.2,
				shadowColor: 'rgba(225, 201, 60, 0.4)',
				shadowBlur: 5
			}
		},
		data:convertData(lines1)
	};

	// 散列点
	var effectScatter ={
		name: '公民系统',
		type: 'effectScatter',
		coordinateSystem: 'geo',
		zlevel: 2,
		rippleEffect: {
			brushType: 'fill',
			period:0
		},
		label: {
			normal: {
				show: true,
				position: 'right',
				formatter: '{b}'
			}
		},
		symbolSize: 10,
		itemStyle: {
			normal: {
				color: '#a6c84c'
			}
		},
		data: (function(){
			var datas =[];
			for(var name in points){
				var val = points[name],option;
				val.push(20);
				if(name==='公民系统'){
					option = {
						name:name,
						value: val,
						symbolSize: 80,
						label:{
							normal: {
								show:true,
								position: 'inside',
								formatter:  function(s){
									var name = s.data.name;
									if(!name){
										return "";
									}else{
										return name.replace(/公民/,'公民\n');
									}
								},
								textStyle: {
									color: '#6e361a',
									fontStyle: 'normal',//TODO字体没确定
									fontWeight: '700',
									fontSize: 20
								}
							}
						},
						itemStyle: {
							normal: {
								color: '#edca16',
								borderColor: '#faf9f6',
								borderWidth: 1,
								borderType: 'solid',
								shadowColor: 'rgba(237,202,22,0.2)',
								shadowBlur: 40
							},
							emphasis: {
								color: '#edca16',
								borderColor: '#faf9f6',
								borderWidth: 1,
								borderType: 'solid',
								shadowColor: 'rgba(237,202,22,0.2)',
								shadowBlur: 40
							}
						}
					};
				}else{
					option = {
						name:name,
						value: val,
						symbolSize: 20,
						itemStyle: {
							normal: {
								color: '#27bdf0',
								borderColor: '#faf9f6',
								borderWidth: 1,
								borderType: 'solid',
								shadowColor: 'rgba(39,189,240,0.2)',
								shadowBlur: 20
							},
							emphasis: {
								color: '#27bdf0',
								borderColor: '#faf9f6',
								borderWidth: 1,
								borderType: 'solid',
								shadowColor: 'rgba(39,189,240,0.2)',
								shadowBlur: 20,
							}
						},
						label: {
							normal: {
								show: true,
								position: (function(){
									if(hasElement(label_top,name)){
										// return 'top';
										// return ['0%',-30];
										if(name.length>4){
											return [-30,-30];
										}else if(name.length>3){
											return [-15,-30];
										}else{
											return [-10,-30];
										}
									}else{
										// return 'bottom';
										// return ['center','150%'];
										if(name.length>4){
											return [-30,30]
										}else if(name.length>3){
											return [-15,30];
										}else{
											return [-10,30]
										}
									}
								})(),
								textStyle: {
									color: '#27bdf0',
									fontSize:18,
									fontStyle:'宋体'
								}
							}
						}
					};
				}
				datas.push(option);
			}
			return datas;
		})()
	};
	refreshMap();
	var  chart = echarts.init(document.getElementById("main"));
	function refreshMap(){
		var series = [lines_out,effectScatter];
		//console.log(series);
		$.get('data/sichuan.json',function(geo){
			echarts.registerMap('sichuan',geo);
			chart.setOption({
				geo: {
					map: 'sichuan',
					scaleLimit:{
						min:1,
						max:1
					},
					label: {
						emphasis: {
							show: false
						}
					},
					// roam: true,
					itemStyle: {
						normal: {
							areaColor: '#323c48',
							borderColor: '#404a59',
							opacity: 0

						},
						emphasis: {
							areaColor: '#2a333d',
							opacity: 0
						}
					}
				},
				series: series
			});
		});
	}


	setInterval("showtimer()",7000);
	function showtimer(){
		if(linesdata.length>0){
			lines1=linesdata;
			console.info(lines1);
			lines_out.effect.show=true;
			lines_out.data=convertData(lines1);
			//chart.resize();
			refreshMap();
			linesdata=[];
			refreshtbData(xietongdata);
			console.info(xietongdata);
			xietongdata=[];
		}else{
			lines_out.effect.show=false;
			refreshMap();
		}
	}

	function refreshtbData(datas) {
		var fkts=1;
		for(i=0;i<datas.length;i++){
			var eventdata=datas[i];
			fkts=fkts+parseInt(eventdata.abg022);
			var str = "";
			 str += "<li>"
			 str += "<a href='#'>" + eventdata.sj.substring(0,10) + "</a>";
			 var sjdw = eventdata.abg026_cn;
			 if (sjdw.length <= 4) {
			 str += "<a href='#'>" + sjdw + "</a>";
			 } else {
			 sjdw2 = sjdw.substr(0, 4) + "...";
			 str += "<a href='#' title=" + sjdw + ">" + sjdw2 + "</a>";
			 }
			 var tgdw = eventdata.bgm012_cn;
			 if (tgdw.length <= 4) {
			 str += "<a href='#'>" + tgdw + "</a>";
			 } else {
			 tgdw2 = tgdw.substr(0, 4) + "...";
			 str += "<a href='#' title=" + tgdw + ">" + tgdw2 + "</a>";
			 }
			 var sjl = eventdata.bgm009;
			 if (sjl.length <= 4) {
			 str += "<a href='#'>" + sjl + "</a>";
			 } else {
			 sjl2 = sjl.substr(0, 4) + "...";
			 str += "<a href='#' title=" + sjl + ">" + sjl2 + "</a>";
			 }
			 $("#breakNewsList").append(str);
		}
		$("#jrgxcs").html(parseInt($("#jrgxcs").html())+1);
		$("#jrfkts").html(parseInt($("#jrfkts").html())+fkts)

	}
function fnJump(){
	var url="http://"+window.location.host+"/xz/xz/perdata/yuntu.html";
	window.open(url);
}
</script>
</html>

2
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:31805次
    • 积分:908
    • 等级:
    • 排名:千里之外
    • 原创:60篇
    • 转载:2篇
    • 译文:0篇
    • 评论:16条
    文章分类
    最新评论