devbox
运维做开发
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

大数据库可视化模版34：晋城高速综合管控大数据_晋城高速交通综评大数据

作者：运维做开发 | 2024-07-10 23:35:58

赞

踩

晋城高速交通综评大数据

博主介绍：《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。
所有项目都配有从入门到精通的基础知识视频课程，免费
项目配有对应开发文档、开题报告、任务书、PPT、论文模版等

项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！
在文章末尾可以获取联系方式

效果图

代码

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>交通大数据分析平台</title>
  6. <!--设置是否为缩放模式 -->
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <!-- 新 Bootstrap 核心 CSS 文件 --> 
  9. <link rel="stylesheet" type="text/css" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
  10.  
  11. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
  12. <script src="js/jquery.min.js"></script>
  13. <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
  14. <script src="js/bootstrap.min.js"></script>
  15. <!--echarts JS-->
  16. <script src="js/echarts.min.js"></script>
  17. <!-- 轮播swiper文件 -->
  18. <link rel="stylesheet" type="text/css" href="css/swiper.min.css">
  19. <script src="js/swiper.min.js"></script>
  20. <!--界面样式-->
  21. <script src="js/visual.js"></script>
  22. <script src="js/china.js"></script>
  23. <script src="js/chartMap.js"></script>
  24. <link rel="stylesheet" type="text/css" href="css/visual.css">
  25.  
  26. </head>
  27. <body class="ksh">
  28. 	<div id="load">
  29. 		<div class="load_img"><!-- 加载动画 -->
  30. 			<img class="jzxz1" src="images/jzxz1.png">
  31. 			<img class="jzxz2" src="images/jzxz2.png">
  32. 		</div>
  33. 	</div>
  34. 	<div class="head_top" style="cursor:pointer;" onclick="location.href=''">
  35. 		<img class="img-responsive" src="images/jcdsj_logo.png">
  36. 		
  37. 	</div>
  38. 	<div class="visual">
  39. 		<div class="visual_left">
  40. 			<div class="visual_box">
  41. 				<div class="visual_title">
  42. 					<span>交通流量</span>
  43. 					<img src="images/ksh33.png">
  44. 				</div>
  45. 				<div class="visual_chart" id="main1">
  46. 					
  47. 				</div>
  48. 			</div>
  49. 			<div class="visual_box">
  50. 				<div class="visual_title">
  51. 					<span>交通工具流量</span>
  52. 					<img src="images/ksh33.png">
  53. 				</div>
  54. 				<div class="visual_chart" id="main2">
  55. 					
  56. 				</div>
  57. 			</div>
  58. 			<div class="visual_box">
  59. 				<div class="visual_title">
  60. 					<span>收费站车流量</span>
  61. 					<img src="images/ksh33.png">
  62. 				</div>
  63. 				<div class="visual_chart sfzcll">
  64. 					<a>运输方式</a>
  65. 					<a>客运量</a>
  66. 					<a>货运量</a>
  67. 					<div class="sfzcll_pos_box">
  68. 						<div class="sfzcll_box">
  69. 							<img class="sfzcll_bkJk" src="images/ksh34.png">
  70. 							<img class="sfzcll_bkJk" src="images/ksh34.png">
  71. 							<img class="sfzcll_bkJk" src="images/ksh34.png">
  72. 							<img class="sfzcll_bkJk" src="images/ksh34.png">
  73. 							<label><img src="images/ksh35.png">公路运输</label>
  74. 							<div class="sfzcll_smallBk">
  75. 								<div class="ygl">
  76. 									<span>4347.2万</span>人
  77. 								</div>
  78. 							</div>
  79. 							<div class="sfzcll_smallBk">
  80. 								<div class="ygh">
  81. 									<span>4347.2万</span>人
  82. 								</div>
  83. 							</div>
  84. 							<div class="clear"></div>
  85. 						</div>
  86. 						<div class="sfzcll_box">
  87. 							<img class="sfzcll_bkJk" src="images/ksh34.png">
  88. 							<img class="sfzcll_bkJk" src="images/ksh34.png">
  89. 							<img class="sfzcll_bkJk" src="images/ksh34.png">
  90. 							<img class="sfzcll_bkJk" src="images/ksh34.png">
  91. 							<label><img src="images/ksh35.png">公路运输</label>
  92. 							<div class="sfzcll_smallBk">
  93. 								<div class="ygl">
  94. 									<span>4347.2万</span>人
  95. 								</div>
  96. 							</div>
  97. 							<div class="sfzcll_smallBk">
  98. 								<div class="ygh">
  99. 									<span>4347.2万</span>人
  100. 								</div>
  101. 							</div>
  102. 							<div class="clear"></div>
  103. 						</div>
  104. 						<div class="sfzcll_box">
  105. 							<img class="sfzcll_bkJk" src="images/ksh34.png">
  106. 							<img class="sfzcll_bkJk" src="images/ksh34.png">
  107. 							<img class="sfzcll_bkJk" src="images/ksh34.png">
  108. 							<img class="sfzcll_bkJk" src="images/ksh34.png">
  109. 							<label><img src="images/ksh35.png">公路运输</label>
  110. 							<div class="sfzcll_smallBk">
  111. 								<div class="ygl">
  112. 									<span>4347.2万</span>人
  113. 								</div>
  114. 							</div>
  115. 							<div class="sfzcll_smallBk">
  116. 								<div class="ygh">
  117. 									<span>4347.2万</span>人
  118. 								</div>
  119. 							</div>
  120. 							<div class="clear"></div>
  121. 						</div>
  122. 					</div>
  123. 					
  124. 				</div>
  125. 			</div>
  126. 		</div>
  127. 		<div class="visual_con">
  128. 			<div class="visual_conTop">
  129. 				<div class="visual_conTop_box visual_conTop1">
  130. 					<div>
  131. 						<h3>当前警情数(起)</h3>
  132. 						<p>67</p>
  133. 						<div class="conTop_smil">
  134. 							<a class="sz">日环比:<span>+3%</span><i class="fa fa-long-arrow-up"></i></a>
  135. 							<a class="xd">周环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a>
  136. 						</div>
  137. 					</div>
  138. 				</div>
  139. 				<div class="visual_conTop_box visual_conTop2">
  140. 					<div>
  141. 						<h3>区域拥堵指数</h3>
  142. 						<p>1.4</p>
  143. 						<div class="conTop_smil">
  144. 							<a class="">缓行</a>
  145. 							<a class="">平均车速<span>120</span>KM/H</i></a>
  146. 						</div>
  147. 					</div>
  148. 				</div>
  149. 				<div class="visual_conTop_box visual_conTop1">
  150. 					<div>
  151. 						<h3>当前警情数(起)</h3>
  152. 						<p>99</p>
  153. 						<div class="conTop_smil">
  154. 							<a class="sz">日环比:<span>+3%</span><i class="fa fa-long-arrow-up"></i></a>
  155. 							<a class="xd">周环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a>
  156. 						</div>
  157. 					</div>
  158. 				</div>
  159. 				<div class="visual_conTop_box visual_conTop2">
  160. 					<div>
  161. 						<h3>当前警情数(起)</h3>
  162. 						<p>7421</p>
  163. 						<div class="conTop_smil">
  164. 							<a class="null">null</a>
  165. 							<a class="xd">月环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a>
  166. 						</div>
  167. 					</div>
  168. 				</div>
  169. 				<div class="clear"></div>
  170. 			</div>
  171. 			<div class="visual_conBot">
  172. 				<img class="visual_conBot_l" src="images/ksh42.png">
  173. 				<img class="visual_conBot_2" src="images/ksh43.png">
  174. 				<img class="visual_conBot_3" src="images/ksh44.png">
  175. 				<img class="visual_conBot_4" src="images/ksh45.png">
  176. 				<div class="visual_chart_text">
  177. 					<h1>出行服务+大数据</h1>
  178. 					<h2>交通大数据分析平台</h2>
  179. 				</div>
  180. 				<div class="visual_chart" id="main8"></div>
  181. 				<div class="visual_conBot_bot">
  182. 					<div class="visualSssf_left">
  183. 						<h3>今日实时收费</h3>
  184. 						<a style="display:block">全省数据</a>
  185. 						<a>大同北</a>
  186. 						<a>大同南</a>
  187. 						<a>朔州</a>
  188. 						<a>吕梁北</a>
  189. 						<a>吕梁南</a>
  190. 						<a>太原</a>
  191. 						<a class="active">晋中</a>
  192. 						<a>太旧</a>
  193. 						<a>长治</a>
  194. 					</div>
  195. 					<div class="visualSssf_right">
  196. 						<div class="visualSssf_right_box" id="main5"></div>
  197. 						<div class="visualSssf_right_box" id="main6"></div>
  198. 						<div class="visualSssf_right_box" id="main7"></div>
  199. 					</div>
  200. 					<div class="clear"></div>
  201. 				</div>
  202. 			</div>
  203. 		</div>
  204. 		<div class="visual_right">
  205. 			<div class="visual_box">
  206. 				<div class="visual_title">
  207. 					<span>本月发生事件</span>
  208. 					<img src="images/ksh33.png">
  209. 				</div>
  210. 				<div class="swiper-container visual_swiper1 visual_chart">
  211. 					<div class="swiper-wrapper">
  212. 						<div class="swiper-slide"  id="main3"></div>
  213. 						<div class="swiper-slide"  id="main31"></div>
  214. 					</div>
  215. 				</div>
  216. 			</div>
  217. 			<div class="visual_box visualSfzsfl">
  218. 				<div class="visual_title">
  219. 					<span>收费站收费量</span>
  220. 					<img src="images/ksh33.png">
  221. 				</div>
  222. 				<div class="visual_chart" id="main9">
  223. 					
  224. 				</div>
  225. 				<div class="visual_table">
  226. 						<table>
  227. 							<tr>
  228. 								<td>小型车</td>
  229. 								<td>中型车</td>
  230. 								<td>大型车</td>
  231. 							</tr>
  232. 							<tr>
  233. 								<td>2486万</td>
  234. 								<td>2486万</td>
  235. 								<td>2486万</td>
  236. 							</tr>
  237. 							<tr>
  238. 								<td>2486万</td>
  239. 								<td>2486万</td>
  240. 								<td>2486万</td>
  241. 							</tr>
  242. 							<tr>
  243. 								<td>2486万</td>
  244. 								<td>2486万</td>
  245. 								<td>2486万</td>
  246. 							</tr>
  247. 							<tr>
  248. 								<td>2486万</td>
  249. 								<td>2486万</td>
  250. 								<td>2486万</td>
  251. 							</tr>
  252. 						</table>
  253. 					</div>
  254. 			</div>
  255. 			<div class="visual_box">
  256. 				<div class="visual_title">
  257. 					<span>收费站收费排行</span>
  258. 					<img src="images/ksh33.png">
  259. 				</div>
  260. 				<div class="swiper-container visual_swiper2 visual_chart">
  261. 					<div class="swiper-wrapper">
  262. 						<div class="swiper-slide"  id="main4"></div>
  263. 						<div class="swiper-slide"  id="main41"></div>
  264. 					</div>
  265. 				</div>
  266. 			</div>
  267. 		</div>
  268. 		<div class="clear"></div>
  269. 	</div>
  270. 	<script type="text/javascript">
  271. 		$(function(){
  272. 			var a=$('.visualSssf_left a')
  273. 			for(var i=0;i<a.length;i++){
  274. 				a[i].index=i;
  275. 				a[i].onclick=function(){
  276. 					for(var i=0;i<a.length;i++){
  277. 						a[i].className=''
  278. 						}
  279. 					this.className='active'
  280. 				}
  281. 			}
  282.  
  283. 			var sfzcllH=$('.sfzcll_box').height()
  284. 			var sfzcllHtwo=sfzcllH-2
  285. 			$('.sfzcll_box').css('line-height',sfzcllH+'px')
  286. 			$('.sfzcll_smallBk>div').css('line-height',sfzcllHtwo+'px')
  287.  
  288. 			//删除加载动画
  289. 			$('#load').fadeOut(1000)
  290.     		setTimeout(function(){    
  291.     			$('#load').remove()
  292.     		}
  293.     		,1100);
  294. 		})
  295.  
  296. 	//交通流量
  297. 	var myChart1 = echarts.init(document.getElementById('main1'));
  298.     myChart1.setOption(option1);
  299. 	//交通工具流量
  300. 	var myChart2 = echarts.init(document.getElementById('main2'));
  301.     myChart2.setOption(option2);
  302.     //本月发生事件
  303. 	var myChart3 = echarts.init(document.getElementById('main3'));
  304.     myChart3.setOption(option3);
  305.     var myChart31 = echarts.init(document.getElementById('main31'));
  306.     myChart31.setOption(option31);
  307.     var mySwiper1 = new Swiper('.visual_swiper1', {
  308. 		autoplay: true,//可选选项，自动滑动
  309. 		speed:800,//可选选项，滑动速度
  310. 		autoplay: {
  311. 		    delay: 5000,//1秒切换一次
  312. 		  },
  313. 	})
  314.     //收费站收费排行
  315. 	var myChart4 = echarts.init(document.getElementById('main4'));
  316.     myChart4.setOption(option4);
  317.     var myChart41 = echarts.init(document.getElementById('main41'));
  318.     myChart41.setOption(option41);
  319.     var mySwiper2 = new Swiper('.visual_swiper2', {
  320. 		autoplay: true,//可选选项，自动滑动
  321. 		direction : 'vertical',//可选选项，滑动方向
  322. 		speed:2000,//可选选项，滑动速度
  323. 	})
  324.     //今日实时收费
  325. 	var myChart5 = echarts.init(document.getElementById('main5'));
  326.     myChart5.setOption(option5);
  327.     var myChart6 = echarts.init(document.getElementById('main6'));
  328.     myChart6.setOption(option6);
  329.     var myChart7 = echarts.init(document.getElementById('main7'));
  330.     myChart7.setOption(option7);
  331.     //中间地图
  332. 	var myChart8 = echarts.init(document.getElementById('main8'));
  333.     myChart8.setOption(option8);
  334.     //收费站收费量
  335. 	var myChart9 = echarts.init(document.getElementById('main9'));
  336.     myChart9.setOption(option9);
  337. 	</script>
  338. </body>
  339. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/808065
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号