個人新部落格: https://cbbfcd.github.io/

阿新 • • 發佈：2019-01-21

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>

個人新部落格: https://cbbfcd.github.io/

3.類遷徙圖 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

在GitHub搭建個人博客地址: https://douzujun.github.io/

技術分享 tps 圖片 https -s image eight 個人 img 搭建博客地址： https://douzujun.github.io/ 博客模板：https://github.com/douzujun/douzujun.github.io 顯示效果:

【新部落格 =》https://chenguolin.github.io/】

一. 引言我們都知道，微信提供了多種登入的方式，包括手機端、電腦端以及web端。 web端的登入，我們用Python程式完全可以模擬出來~~（如果你不知道，那也沒關係，稍微瞭解下Python request session即可）而所謂的機器人

部落格轉至https://chengyanzhao.github.io，CSDN不再更新。

寫在前面 1表單型別模板驅動型表單：使用模板表單內建指令、內建校驗的方式來構建表單。也就是將程式碼、邏輯放在模版(HTML)裡。響應式表單：將功能性的內容移到程式碼裡。動態表單：用程式碼生成表單DOM。 2模板驅動表單 2.1表單指

使用Hugo將個人部落格搭建到Github上

剛開始搭建完大概長這樣話不多說，現在開始搭建安裝Hugo 在Hugo裡找到對應版本下載安裝，我的主機是deepin，選擇Linux64位的dep包檢視版本資訊，顯示以下即安裝成功： $ hugo version Hugo Static Site Generator

陽光島主（歡迎訪問我的新部落格： https://blog.mimvp.com）

中科院、百度、創新工場、小米、阿里巴巴、米撲科技期貨從業資格證（2017.03）基金從業資格證（2016.11）證券投資顧問證（2016.9）證券從業資格證（2016.6）系統架構設計師（2013）軟體設計師（2008） CSDN創業專訪

Github+Jekyll —— 建立個人免費部落格（四）jekyll第一個頁面

摘要：本文中我將介紹一下如何在github上搭建個人Blog（部落格），也順便讓我們掌握一下githubPages功能，另外還涉及到Jekyll技術。 ===========

使用jekyll+Github搭建個人獨立部落格

step 1.選擇GitHub作為部落格伺服器 Repository name(倉庫名)必須是 your_user_name.github.io 比如我的使用者名稱是admin，那麼倉庫的名稱就必須是admin.github.io ，這

新部落格地址：https://my.oschina.net/hebaodan/blog/

思路：按代價大小從高到低排序，代價一樣則最後期限早的在前，按排序順序遍歷，事件安排進終止日期那一天，如果該日期已被那排，就在往前推，如果最後安排不下，就扣分。 #include<iostream> #include<algorithm> us

Github+Jekyll —— 建立個人免費部落格（五）jekyll工程釋出到github上

摘要：本文中我將介紹一下如何在github上搭建個人Blog（部落格），也順便讓我們掌握一下githubPages功能，另外還涉及到Jekyll技術。 ===========

Jekyll + Github Pages構建個人技術部落格

寫技術部落格可以積累並且鞏固所學的知識，溫故知新，還能傳播知識，幫助他人解決問題。前言搭建專屬於自己的部落格，是每一個碼農都會想要去實現的，以前自己也曾想要搭建，但是總有無從下手的感覺，隨著知識閱歷的提升，知道了一些搭建的方式，時機成熟，

【iboxty的專欄】個人主頁: https://tyliupku.github.io/

北京大學電腦科學博士在讀，關注自然語言處理和深度學習個人主頁: https://tyliupku.github.io/ 2nd year CS Ph.D. student @ Peking University, focus on natural language process

一晚上搭建個人域名部落格Github+Hexo

搭建個人域名部落格其實沒有那麼難。下班到家後，九點開始，十二點半的時候就可以訪問了http://www.lvchongstudio.top。接下來就記錄一下整個搭建的過程，以及這其中的坑，重點是坑。首先要準備的環境 Node.js git 阿里雲購

Hexo個人免費部落格(一) 從零到釋出Github

之前使用過jekyll+github做過一版自己的部落格網站，有興趣的可以看一下我之前的文章：http://blog.csdn.net/linshuhe1/article/details/51143026，其實也很簡單，但是存在一些問題：目錄、Rss、si

使用GitHub+Hexo+hexo-theme-indigo(主題)搭建自己的個人技術部落格

本次搭建實在windows系統下完成：前提條件：已經下載git、Hexo、node.js等必要的工具環境第一步：初始化一個本地的Hexo專案再本地建立一個部落格系統目錄：我建立的是專案根目錄：OyjBlog 再OyjBlog目錄下右鍵開啟Git Bash終端

hexo+gitHub搭建個人獨立部落格(一)

最新資訊谷歌的一篇文章則著重說明了新成立的指導小組將如何“讓MDN成為最好的Web參考文件，幫助我們更好地進行Web開發”。指導小組目前的成員包括微軟、谷歌、Mozilla、三星和W3C。值得注意的是，蘋果公司並沒有參與這次釋出宣告。前言一直想要

停止更新blog，blog移至www.corasql.cn與https://corasql.github.io/

blog停止更新blog，blog移至www.corasql.cn與https://corasql.github.io/本文出自 “corasql” 博客，請務必保留此出處http://corasql.blog.51cto.com/5908329/1939699停止更新blog，blog移至www.coras

部落格園新增github角標的方法

作為程式設計師，總該有個 github 賬戶吧。可以使用 GitHub Corners 將部落格和 Github 賬戶關聯起來。效果圖:見左上角使用方式：進入 GitHub Corners ，選擇自己鐘意的 Github 角樣式，拷貝對應的程式碼。記得將超連結 a 的 href 屬性替換為你的 git

基於mkdocs-material搭建個人靜態部落格

基於mkdocs-material搭建個人純靜態部落格，沒有php，沒有mysql 如果你只是想安安靜靜的放一些技術文章，釋出到個人站點或github-pages，mkdocs-material很適合你小慢哥的原創文章，歡迎轉載本文僅是縮略，筆者已將詳細內容釋出到github上

新部落格開張，隨便說點

新部落格開張，隨便說點。今年已是36，大學畢業在軟體公司幹了8年，然後去了企業資訊中心做IT，簡單說，從乙方變成了甲方，精力在衰退，但依舊對技術充滿了熱情，喜歡，僅此而已。老部落格很久沒更新了，近期因為工作原因，從.NET轉java了（我只能這麼說，以前與.NET對等的是J2EE，但是現在，流行的sp

個人新部落格: https://cbbfcd.github.io/

相關推薦