Skip to content

Commit 0b4b2ad

Browse files
iGaoWeiiGaoWei
committed
update
1 parent 94fa349 commit 0b4b2ad

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+11933
-0
lines changed

‎web/102 人口增长对经济影响可视化分析/102.png

2.16 MB
Loading

‎web/102 人口增长对经济影响可视化分析/css/comon0.css

+200
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
@charset "utf-8";
2+
/* CSS Document */
3+
*{
4+
-webkit-box-sizing: border-box;
5+
-moz-box-sizing: border-box;
6+
box-sizing: border-box}
7+
*,body{padding:0px; margin:0px;color: #222;font-family: "微软雅黑";}
8+
@font-face{font-family:electronicFont;src:url(../font/DS-DIGIT.TTF)}
9+
body{ background:#000d4a url(../images/bg.jpg) center top; background-size:cover;color:#666;font-size: .1rem;}
10+
li{ list-style-type:none;}
11+
table{}
12+
i{ margin:0px; padding:0px; text-indent:0px;}
13+
img{ border:none; max-width: 100%;}
14+
a{ text-decoration:none; color:#399bff;}
15+
a.active,a:focus{ outline:none!important; text-decoration:none;}
16+
ol,ul,p,h1,h2,h3,h4,h5,h6{ padding:0; margin:0}
17+
a:hover{ color:#06c; text-decoration: none!important}
18+
19+
20+
.clearfix:after, .clearfix:before {
21+
display: table;
22+
content: " "
23+
}
24+
.clearfix:after {
25+
clear: both
26+
}
27+
.pulll_left{float:left;}
28+
.pulll_right{float:right;}
29+
/*谷哥滚动条样式*/
30+
31+
::-webkit-scrollbar {width:5px;height:5px;position:absolute}
32+
::-webkit-scrollbar-thumb {background-color:#5bc0de}
33+
::-webkit-scrollbar-track {background-color:#ddd}
34+
35+
/***/
36+
.canvas{position: absolute; width:100%; left: 0; top: 0; height: 99%; z-index: 1;}
37+
38+
.allnav{height: calc(100% - 30px);}
39+
.loading{position:fixed; left:0; top:0; font-size:18px; z-index:100000000;width:100%; height:100%; background:#1a1a1c; text-align:center;}
40+
.loadbox{position:absolute; width:160px;height:150px; color: #aaa; left:50%; top:50%; margin-top:-100px; margin-left:-75px;}
41+
.loadbox img{ margin:10px auto; display:block; width:40px;}
42+
43+
.copyright{ background:rgba(19,31,64,.32); border: 1px solid rgba(255,255,255,.05); line-height:.5rem; text-align: center; padding-right: 15px; bottom: 0; color:rgba(255,255,255,.7); font-size: .16rem; }
44+
45+
.head{ height:1.05rem; background: url(../images/head_bg.png) no-repeat center center; background-size: 100% 100%; position: relative; z-index: 100;}
46+
.head h1{ color:#fff; text-align: center; font-size: .4rem; line-height:.8rem;}
47+
.head h1 img{ width:1.5rem; display: inline-block; vertical-align: middle; margin-right: .2rem}
48+
.weather{ position:absolute; right:.3rem; top:0; line-height: .75rem;}
49+
.weather img{ width:.37rem; display: inline-block; vertical-align: middle;}
50+
.weather span{color:rgba(255,255,255,.7); font-size: .18rem; padding-right: .1rem;}
51+
.mainbox{ padding:.1rem .1rem 0rem .1rem;}
52+
.mainbox>ul{}
53+
.mainbox>ul>li{ float: left; padding: 0 .1rem}
54+
55+
.mainbox>ul>li{ width: 30%}
56+
.mainbox>ul>li:nth-child(2){ width: 40%;padding: 0}
57+
58+
.boxall{ border: 1px solid rgba(25,186,139,.17); padding:0 .2rem .4rem .15rem; background: rgba(255,255,255,.04) url(../images/line.png); background-size: 100% auto; position: relative; margin-bottom: .15rem; z-index: 10;}
59+
.boxall:before,
60+
.boxall:after{ position:absolute; width: .1rem; height: .1rem; content: ""; border-top: 2px solid #02a6b5; top: 0;}
61+
.boxall:before,.boxfoot:before{border-left: 2px solid #02a6b5;left: 0;}
62+
.boxall:after,.boxfoot:after{border-right: 2px solid #02a6b5; right: 0;}
63+
.alltitle{ font-size:.2rem; color:#fff; text-align: center; line-height: .5rem;}
64+
65+
.boxfoot{ position:absolute; bottom: 0; width: 100%; left: 0;}
66+
.boxfoot:before,
67+
.boxfoot:after{ position:absolute; width: .1rem; height: .1rem; content: "";border-bottom: 2px solid #02a6b5; bottom: 0;}
68+
69+
.bar{background:rgba(101,132,226,.1); padding: .15rem;}
70+
.barbox li,.barbox2 li{ width:50%; text-align: center; position: relative; z-index: 100;}
71+
.barbox:before,
72+
.barbox:after{ position:absolute; width: .3rem; height: .1rem; content: ""; }
73+
.barbox:before{border-left: 2px solid #02a6b5;left: 0;border-top: 2px solid #02a6b5; }
74+
.barbox:after{border-right: 2px solid #02a6b5; right: 0; bottom: 0;border-bottom: 2px solid #02a6b5; }
75+
76+
.barbox li:first-child:before{ position:absolute; content: ""; height:50%; width: 1px; background: rgba(255,255,255,.2); right: 0; top: 25%;}
77+
78+
.barbox{ border: 1px solid rgba(25,186,139,.17); position: relative;}
79+
.barbox li{ font-size: .7rem; color: #ffeb7b; padding: .05rem 0; font-family:electronicFont; font-weight: bold;}
80+
.barbox2 li{ font-size: .19rem; color:rgba(255,255,255,.7); padding-top: .1rem;}
81+
82+
.map{ position:relative; height: 7.2rem; z-index: 9;}
83+
.map4{ width: 200%; height:7rem; position: relative; left: -50%; top: 4%; margin-top: .2rem; z-index: 5;}
84+
.map1,.map2,.map3{ position:absolute; opacity: .5}
85+
.map1{ width:6.43rem; z-index: 2;top:.45rem; left: .7rem; animation: myfirst2 15s infinite linear;}
86+
.map2{ width:5.66rem; top:.85rem; left:1.2rem; z-index: 3; opacity: 0.2; animation: myfirst 10s infinite linear;}
87+
.map3{ width:5.18rem; top:1.07rem; left: 1.4rem; z-index: 1;}
88+
89+
90+
91+
92+
93+
.tabs { text-align: center; padding: .1rem 0 0 0;}
94+
.tabs a {
95+
position: relative;
96+
display: inline-block;
97+
margin-left: 1px;
98+
padding:.05rem .2rem;
99+
color: #898989;
100+
transition: all .3s ease-out 0s;
101+
font-size: 14px;
102+
}
103+
.tabs li{ display:inline-block;}
104+
.tabs a:after {
105+
position: absolute;
106+
width: 1px;
107+
height: 10px;
108+
background-color: rgba(255,255,255,.1);
109+
content: '';
110+
margin-left:0; right:-1px; margin-top: 7px;
111+
112+
113+
}
114+
.tabs li a.active {border: 1px solid rgba(25,186,139,.17); background: rgba(255,255,255,.05); color:#fff;}
115+
116+
.tit02{ text-align:center; margin: .1rem 0; position: relative}
117+
.tit02 span{border: 1px solid rgba(25,186,139,.17); letter-spacing: 2px; padding: .01rem .2rem; background: rgba(255,255,255,.05); font-size: .18rem; color: #49bcf7;}
118+
.tit02:before,.tit02:after{ position:absolute; width:26%; height: 1px;background: rgba(25,186,139,.2); content: ""; top: .12rem;}
119+
.tit02:after{ right:0;}
120+
.tit02:before{ left:0;}
121+
122+
.wrap{ height:2.54rem; overflow: hidden;}
123+
.wrap li{ line-height:.42rem; height:.42rem; font-size: .18rem; text-indent: .24rem; margin-bottom: .1rem; }
124+
.wrap li p{border: 1px solid rgba(25,186,139,.17);color: rgba(255,255,255,.6); }
125+
.sy{ float:left; width: 33%; height:95%; margin-top: .25rem;}
126+
127+
128+
.adduser{ height:1.5rem; overflow: hidden;}
129+
.adduser li{height:.5rem;}
130+
.adduser img{ width: .40rem; border-radius: .5rem; margin-right: .1rem; display: inline-block; vertical-align: middle;}
131+
.adduser span{ line-height:.5rem; font-size: .18rem;color: rgba(255,255,255,.6); }
132+
133+
.sycm ul{ margin-left:-.5rem;margin-right:-.5rem; padding: .16rem 0;}
134+
.sycm li{ float: left; width: 33.33%; text-align: center; position: relative}
135+
.sycm li:before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
136+
.sycm li:last-child:before{ width: 0;}
137+
138+
.sycm li h2{ font-size:.3rem; color: #c5ccff;}
139+
.sycm li span{ font-size:.18rem; color: #fff; opacity: .5;}
140+
141+
@keyframes myfirst2
142+
{
143+
from {transform: rotate(0deg);}
144+
to {transform: rotate(359deg);}
145+
}
146+
147+
@keyframes myfirst
148+
{
149+
from {transform: rotate(0deg);}
150+
to {transform: rotate(-359deg);}
151+
}
152+
153+
154+
/*Plugin CSS*/
155+
.str_wrap {
156+
overflow:hidden;
157+
width:100%;
158+
position:relative;
159+
-moz-user-select: none;
160+
-khtml-user-select: none;
161+
user-select: none;
162+
white-space:nowrap;
163+
}
164+
165+
166+
.str_move {
167+
white-space:nowrap;
168+
position:absolute;
169+
top:0;
170+
left:0;
171+
cursor:move;
172+
}
173+
.str_move_clone {
174+
display:inline-block;
175+
vertical-align:top;
176+
position:absolute;
177+
left:100%;
178+
top:0;
179+
}
180+
.str_vertical .str_move_clone {
181+
left:0;
182+
top:100%;
183+
}
184+
.str_down .str_move_clone {
185+
left:0;
186+
bottom:100%;
187+
}
188+
.str_vertical .str_move,
189+
.str_down .str_move {
190+
white-space:normal;
191+
width:100%;
192+
}
193+
.str_static .str_move,
194+
.no_drag .str_move,
195+
.noStop .str_move{
196+
cursor:inherit;
197+
}
198+
.str_wrap img {
199+
max-width:none !important;
200+
}

‎web/102 人口增长对经济影响可视化分析/font/DS-DIGIT.TTF

24.9 KB
Binary file not shown.

‎web/102 人口增长对经济影响可视化分析/images/bg.jpg

252 KB
Loading

‎web/102 人口增长对经济影响可视化分析/images/head_bg.png

7.7 KB
Loading

‎web/102 人口增长对经济影响可视化分析/images/line(1).png

3.85 KB
Loading

‎web/102 人口增长对经济影响可视化分析/index.html

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>人口增长对经济影响可视化分析</title>
6+
<script type="text/javascript" src="js/jquery.js"></script>
7+
<link rel="stylesheet" href="css/comon0.css">
8+
</head>
9+
<script>
10+
$(window).load(function(){
11+
$(".loading").fadeOut()
12+
})
13+
14+
/****/
15+
$(document).ready(function(){
16+
var whei=$(window).width()
17+
$("html").css({fontSize:whei/20})
18+
$(window).resize(function(){
19+
var whei=$(window).width()
20+
$("html").css({fontSize:whei/20})
21+
});
22+
});
23+
</script>
24+
<script type="text/javascript" src="js/echarts.min.js"></script>
25+
<script language="JavaScript" src="js/js.js"></script>
26+
<body>
27+
<div class="canvas" style="opacity: .2">
28+
<iframe frameborder="0" src="js/index.html" style="width: 100%; height: 100%"></iframe>
29+
</div>
30+
<div class="loading">
31+
<div class="loadbox"> <img src="picture/loading.gif"> 页面加载中... </div>
32+
</div>
33+
<div class="head">
34+
<h1><a href="https://gitee.com/iGaoWei/big-data-view" style="color: white">人口增长对经济影响可视化分析</a></h1>
35+
<div class="weather"><span id="showTime"></span></div>
36+
37+
<script>
38+
var t = null;
39+
t = setTimeout(time,1000);//開始运行
40+
function time()
41+
{
42+
clearTimeout(t);//清除定时器
43+
dt = new Date();
44+
var y=dt.getFullYear();
45+
var mt=dt.getMonth()+1;
46+
var day=dt.getDate();
47+
var h=dt.getHours();//获取时
48+
var m=dt.getMinutes();//获取分
49+
var s=dt.getSeconds();//获取秒
50+
document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"日 "+h+"时"+m+"分"+s+"秒";
51+
t = setTimeout(time,1000); //设定定时器，循环运行
52+
}
53+
54+
</script>
55+
56+
57+
</div>
58+
<div class="mainbox">
59+
<ul class="clearfix">
60+
<li>
61+
<div class="boxall" style="height: 3.2rem">
62+
<div class="alltitle">人口与经济增长率GDP</div>
63+
<div class="allnav" id="echart1"></div>
64+
<div class="boxfoot"></div>
65+
</div>
66+
<div class="boxall" style="height: 3.2rem">
67+
<div class="alltitle">人口与年龄结构</div>
68+
<div class="allnav" id="echart2"></div>
69+
<div class="boxfoot"></div>
70+
</div>
71+
<div class="boxall" style="height: 3.2rem">
72+
<div style="height:100%; width: 100%;">
73+
<div class="sy" id="fb1"></div>
74+
<div class="sy" id="fb2"></div>
75+
<div class="sy" id="fb3"></div>
76+
</div>
77+
<div class="boxfoot">
78+
79+
</div>
80+
</div>
81+
</li>
82+
<li>
83+
<div class="bar">
84+
<div class="barbox">
85+
<ul class="clearfix">
86+
<li class="pulll_left counter">1417552481</li>
87+
<li class="pulll_left counter">1138807</li>
88+
</ul>
89+
</div>
90+
<div class="barbox2">
91+
<ul class="clearfix">
92+
<li class="pulll_left">全国总人口 </li>
93+
<li class="pulll_left">国内生产总值(亿元)</li>
94+
</ul>
95+
</div>
96+
</div>
97+
<div class="map">
98+
<div class="map1"><img src="picture/lbx.png"></div>
99+
<div class="map2"><img src="picture/jt.png"></div>
100+
<div class="map3"><img src="picture/map.png"></div>
101+
<div class="map4" id="map_1"></div>
102+
</div>
103+
</li>
104+
<li>
105+
<div class="boxall" style="height:3.4rem">
106+
<div class="alltitle">人口与产业结构</div>
107+
<div class="allnav" id="echart4"></div>
108+
<div class="boxfoot"></div>
109+
</div>
110+
<div class="boxall" style="height: 3.2rem">
111+
<div class="alltitle">全国经济GDP TOP10（亿元）</div>
112+
<div class="allnav" id="echart5"></div>
113+
<div class="boxfoot"></div>
114+
</div>
115+
<div class="boxall" style="height: 3rem">
116+
<div class="alltitle">经济发展城市 TOP5</div>
117+
<div class="allnav" id="echart6"></div>
118+
<div class="boxfoot"></div>
119+
</div>
120+
</li>
121+
</ul>
122+
</div>
123+
<div class="back"></div>
124+
125+
126+
<script type="text/javascript" src="js/china.js"></script>
127+
<script type="text/javascript" src="js/area_echarts.js"></script>
128+
</body>
129+
</html>

0 commit comments

Comments
 (0)