HTML+CSS+JS数据可视化大屏平台模板实例4-交通大数据

共20个文件

png：7个

js：7个

css：3个

版权申诉

数据可视化大屏

5星 · 超过95%的资源 186 浏览量 2022-03-25 08:28:11 上传评论收藏 665KB RAR 举报

资源详情

资源评论

资源推荐

收起资源包目录

HTML+CSS+JS数据可视化大屏平台模板实例4-交通大数据.rar （20个子文件）

HTML+CSS+JS数据可视化大屏平台模板实例4-交通大数据

交通大数据分析平台.html 20KB

交通大数据分析平台_files

ksh45.png 153B

echarts.min.js 730KB

swiper.min.js 123KB

visual.css 7KB

jcdsj_logo.gif 35KB

ksh43.png 154B

ksh35.png 350B

swiper.min.css 19KB

ksh34.png 118B

ksh42.png 153B

visual.js 35KB

ksh33.png 582B

chartMap.js 62KB

bootstrap.min.js 36KB

china.js 60KB

jquery.min.js 91KB

bootstrap.css 138KB

ksh44.png 152B

HTML+CSS+JS数据可视化大屏平台模板实例4-交通大数据.JPG 290KB

<!DOCTYPE html>  <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>交通大数据分析平台</title>  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" type="text/css" href="./交通大数据分析平台_files/bootstrap.css">  <script src="./交通大数据分析平台_files/jquery.min.js"></script><style type="text/css"></style>  <script src="./交通大数据分析平台_files/bootstrap.min.js"></script>  <script src="./交通大数据分析平台_files/echarts.min.js"></script>  <link rel="stylesheet" type="text/css" href="./交通大数据分析平台_files/swiper.min.css"> <script src="./交通大数据分析平台_files/swiper.min.js"></script>  <script src="./交通大数据分析平台_files/visual.js"></script> <script src="./交通大数据分析平台_files/china.js"></script> <script src="./交通大数据分析平台_files/chartMap.js"></script> <link rel="stylesheet" type="text/css" href="./交通大数据分析平台_files/visual.css"> </head> <body class="ksh" style=""> <div class="head_top" style="cursor:pointer;" onclick="location.href='https://shop188702750.taobao.com/search.htm?spm=a1z10.1-c.0.0.1221421cqgmNaI&search=y'"> <img class="img-responsive" src="./交通大数据分析平台_files/jcdsj_logo.gif"> </div> <div class="visual"> <div class="visual_left"> <div class="visual_box"> <div class="visual_title"> <span>交通流量</span> <img src="./交通大数据分析平台_files/ksh33.png"> </div> <div class="visual_chart" id="main1" _echarts_instance_="ec_1648167399609" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 313px; height: 123px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="469" height="184" style="position: absolute; left: 0px; top: 0px; width: 313px; height: 123px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div> </div> <div class="visual_box"> <div class="visual_title"> <span>交通工具流量</span> <img src="./交通大数据分析平台_files/ksh33.png"> </div> <div class="visual_chart" id="main2" _echarts_instance_="ec_1648167399610" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 313px; height: 123px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="469" height="184" style="position: absolute; left: 0px; top: 0px; width: 313px; height: 123px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px "Microsoft YaHei"; padding: 5px; left: 90px; top: -40px; pointer-events: none;">2月<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:rgb(137,189,27);"></span>小型车: 35<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:rgb(0,136,212);"></span>中型车: 99.2<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:rgb(219,50,51);"></span>大型车: 81</div></div> </div> <div class="visual_box"> <div class="visual_title"> <span>收费站车流量</span> <img src="./交通大数据分析平台_files/ksh33.png"> </div> <div class="visual_chart sfzcll"> <a>运输方式</a> <a>客运量</a> <a>货运量</a> <div class="sfzcll_pos_box"> <div class="sfzcll_box" style="line-height: 13px;"> <img class="sfzcll_bkJk" src="./交通大数据分析平台_files/ksh34.png"> <img class="sfzcll_bkJk" src="./交通大数据分析平台_files/ksh34.png"> <img class="sfzcll_bkJk" src="./交通大数据分析平台_files/ksh34.png"> <img class="sfzcll_bkJk" src="./交通大数据分析平台_files/ksh34.png"> <label><img src="./交通大数据分析平台_files/ksh35.png">公路运输</label> <div class="sfzcll_smallBk"> <div class="ygl" style="line-height: 11px;"> <span>4347.2万</span>人 </div> </div> <div class="sfzcll_smallBk"> <div class="ygh" style="line-height: 11px;"> <span>4347.2万</span>人 </div> </div> <div class="clear"></div> </div> <div class="sfzcll_box" style="line-height: 13px;"> <img class="sfzcll_bkJk" src="./交通大数据分析平台_files/ksh34.png"> <img class="sfzcll_bkJk" src="./交通大数据分析平台_files/ksh34.png"> <img class="sfzcll_bkJk" src="./交通大数据分析平台_files/ksh34.png"> <img class="sfzcll_bkJk" src="./交通大数据分析平台_files/ksh34.png"> <label><img src="./交通大数据分析平台_files/ksh35.png">公路运输</label> <div class="sfzcll_smallBk"> <div class="ygl" style="line-height: 11px;"> <span>4347.2万</span>人 </div> </div> <div class="sfzcll_smallBk"> <div class="ygh" style="line-height: 11px;"> <span>4347.2万</span>人 </div> </div> <div class="clear"></div> </div> <div class="sfzcll_box" style="line-height: 13px;"> <img class="sfzcll_bkJk" src="./交通大数据分析平台_files/ksh34.png"> <img class="sfzcll_bkJk" src="./交通大数据分析平台_files/ksh34.png"> <img class="sfzcll_bkJk" src="./交通大数据分析平台_files/ksh34.png"> <img class="sfzcll_bkJk" src="./交通大数据分析平台_files/ksh34.png"> <label><img src="./交通大数据分析平台_files/ksh35.png">公路运输</label> <div class="sfzcll_smallBk"> <div class="ygl" style="line-height: 11px;"> <span>4347.2万</span>人 </div> </div> <div class="sfzcll_smallBk"> <div class="ygh" style="line-height: 11px;"> <span>4347.2万</span>人 </div> </div> <div class="clear"></div> </div> </div> </div> </div> </div> <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</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