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

2401_84183669

于 2024-04-27 10:52:23 发布

阅读量187

点赞数 2

文章标签： echarts html5 数据分析

本文链接：https://blog.csdn.net/2401_84183669/article/details/138244532

版权

<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实现：

$(function(){
			var a=$('.visualSssf_left a')
			for(var i=0;i<a.length;i++){
				a[i].index=i;
				a[i].onclick=function(){
					for(var i=0;i<a.length;i++){
						a[i].className=''
						}
					this.className='active'
				}
			}

			var sfzcllH=$('.sfzcll_box').height()
			var sfzcllHtwo=sfzcllH-2
			$('.sfzcll_box').css('line-height',sfzcllH+'px')
			$('.sfzcll_smallBk>div').css('line-height',sfzcllHtwo+'px')

			//删除加载动画
			$('#load').fadeOut(1000)
    		setTimeout(function(){    
    			$('#load').remove()
    		}
    		,1100);
		})

	//交通流量
	var myChart1 = echarts.init(document.getElementById('main1'));
    myChart1.setOption(option1);
	//交通工具流量
	var myChart2 = echarts.init(document.getElementById('main2'));
    myChart2.setOption(option2);
    //本月发生事件
	var myChart3 = echarts.init(document.getElementById('main3'));
    myChart3.setOption(option3);
    var myChart31 = echarts.init(document.getElementById('main31'));


![img](https://img-blog.csdnimg.cn/img_convert/a98dac08a05be4b55d2cd1d3040dfbba.png)
![img](https://img-blog.csdnimg.cn/img_convert/3285f7ce478bd6b46b91c39156f9892c.png)
![img](https://img-blog.csdnimg.cn/img_convert/4deb97cddbe948b5e905205e96a257ae.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**