基于Echarts+HTML5可视化数据大屏展示—交通大数据分析平台_echrts环比同比(9)

最新推荐文章于 2024-05-15 09:31:19 发布

2401_84183545

最新推荐文章于 2024-05-15 09:31:19 发布

阅读量396

点赞数 4

分类专栏：程序员文章标签：大数据面试学习

本文链接：https://blog.csdn.net/2401_84183545/article/details/138891230

版权

程序员专栏收录该内容

124 篇文章 0 订阅

订阅专栏

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

大数据分析主图展示&收费站流量&闯红灯分析统计

代码目录：

主要代码实现：

主页HTML布局：

<title>山西省交通大数据分析平台</title>

</head>
<body class="ksh">
	<div id="load">
		<div class="load_img"><!-- 加载动画 -->
			<img class="jzxz1" src="images/jzxz1.png">
			<img class="jzxz2" src="images/jzxz2.png">
		</div>
	</div>
	<div class="head_top"><span>通用大数据可视化展示模版</span></div>
	<div class="visual">
		<div class="visual_left">
			<div class="visual_box">
				<div class="visual_title">
					<span>交通流量</span>
					<img src="images/ksh33.png">
				</div>
				<div class="visual_chart" id="main1">
					
				</div>
			</div>
			<div class="visual_box">
				<div class="visual_title">
					<span>交通工具流量</span>
					<img src="images/ksh33.png">
				</div>
				<div class="visual_chart" id="main2">
					
				</div>
			</div>
			<div class="visual_box">
				<div class="visual_title">
					<span>收费站车流量</span>
					<img src="images/ksh33.png">
				</div>
				<div class="visual_chart sfzcll">
					<a>运输方式</a>
					<a>客运量</a>
					<a>货运量</a>
					<div class="sfzcll_pos_box">
						<div class="sfzcll_box">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<label><img src="images/ksh35.png">公路运输</label>
							<div class="sfzcll_smallBk">
								<div class="ygl">
									<span>4347.2万</span>人
								</div>
							</div>
							<div class="sfzcll_smallBk">
								<div class="ygh">
									<span>4347.2万</span>人
								</div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="sfzcll_box">
						
		<div class="visual_con">
			<div class="visual_conTop">
				<div class="visual_conTop_box visual_conTop1">
					<div>
						<h3>当前警情数(起)</h3>
						<p>67</p>
						<div class="conTop_smil">
							<a class="sz">日环比:<span>+3%</span><i class="fa fa-long-arrow-up"></i></a>
							<a class="xd">周环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a>
						</div>
					</div>
				</div>
				<div class="visual_conTop_box visual_conTop2">
					<div>
						<h3>区域拥堵指数</h3>
						<p>1.4</p>
						<div class="conTop_smil">
							<a class="">缓行</a>
							<a class="">平均车速<span>120</span>KM/H</i></a>
						</div>
					</div>
				</div>
				<div class="visual_conTop_box visual_conTop1">
					<div>
						<h3>当前警情数(起)</h3>
						<p>99</p>
						<div class="conTop_smil">
							<a class="sz">日环比:<span>+3%</span><i class="fa fa-long-arrow-up"></i></a>
							<a class="xd">周环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a>
						</div>
					</div>
				</div>
				<div class="visual_conTop_box visual_conTop2">
					<div>
						<h3>当前警情数(起)</h3>
						<p>7421</p>
						<div class="conTop_smil">
							<a class="null">null</a>
							<a class="xd">月环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="visual_conBot">
		
				<div class="visual_chart_text">
					<h1>出行服务+大数据</h1>
					<h2>山西省交通大数据分析平台</h2>
				</div>
				<div class="visual_chart" id="main8"></div>
				<div class="visual_conBot_bot">
					<div class="visualSssf_left">
						<h3>今日实时收费</h3>
						<a style="display:block">全省数据</a>
						<a>大同北</a>
						<a>大同南</a>
						<a>朔州</a>
						<a>吕梁北</a>
						<a>吕梁南</a>
						<a>太原</a>
						<a class="active">晋中</a>
						<a>太旧</a>
						<a>长治</a>
					</div>
				
					<div class="clear"></div>
				</div>
			</div>
		</div>
		<div class="visual_right">
			<div class="visual_box">
				<div class="visual_title">
					<span>本月发生事件</span>
					<img src="images/ksh33.png">
				</div>
				<div class="swiper-container visual_swiper1 visual_chart">
					<div class="swiper-wrapper">
						<div class="swiper-slide"  id="main3"></div>
						<div class="swiper-slide"  id="main31"></div>
					</div>
				</div>
			</div>
			<div class="visual_box visualSfzsfl">
				<div class="visual_title">
					<span>收费站收费量</span>
					<img src="images/ksh33.png">
				</div>
				<div class="visual_chart" id="main9">
		
		</div>

JavaScript实现：