當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

基于Echarts+HTML5可视化数据大屏展示—大数据智慧数据平台

發布時間：2025/3/12 HTML 31 豆豆

生活随笔收集整理的這篇文章主要介紹了基于Echarts+HTML5可视化数据大屏展示—大数据智慧数据平台小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

🍅 作者主頁：Java李楊勇?

🍅 簡介：Java領域優質創作者🏆、Java李楊勇公號作者? ?簡歷模板、學習資料、面試題庫、技術互助【關注我，都給你】

🍅 歡迎點贊 👍 收藏 ?留言 📝 ??

動圖演示：?文末獲取源碼?

代碼目錄：

主要代碼實現：

主頁HTML布局：?

<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="css/default.css"/> <link rel="stylesheet" type="text/css" href="css/mobile.css"/> <link rel='stylesheet' href='css/jquery-ui.css'> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/common.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,maximum-scale=1.0,user-scalable=no"> <title>大數據智慧能力 - 網絡能力 </title> </head> <body><div id="wrapper"><h1>大數據智慧能力 - 網絡能力 </h1><h2><strong>重點關注</strong><sub>Focus on the indicators</sub><b class="logoline"></b><b class="logoline1"></b><b class="logoline2"></b><b class="logoline3"></b><b class="logoline4"></b></h2><div class="date-timer"><p><strong id="H"></strong><strong>:</strong><strong id="M"></strong><strong id="S" class="hide"></strong></p><em id="D"></em><ul><li id="Y"></li><li id="MH"></li><li id="TD"></li></ul></div><div class="big-index-1"><ul><li><b class="animation-1"></b><b class="animation-2"></b><b class="animation-3"></b><p>VLR登記用戶數</p><strong>174.6069</strong></li><li><b class="animation-1"></b><b class="animation-2"></b><b class="animation-3"></b><p>VLR登記用戶數</p><strong>174.6069</strong></li><li><b class="animation-1"></b><b class="animation-2"></b><b class="animation-3"></b><p>VLR登記用戶數</p><strong>174.6069</strong></li><li><b class="animation-1"></b><b class="animation-2"></b><b class="animation-3"></b><p>VLR登記用戶數</p><strong>174.6069</strong></li><li><b class="animation-1"></b><b class="animation-2"></b><b class="animation-3"></b><p>VLR登記用戶數</p><strong>174.6069</strong></li><li><b class="animation-1"></b><b class="animation-2"></b><b class="animation-3"></b><p>VLR登記用戶數</p><strong>174.6069</strong></li></ul></div><div class="submenu"><ul><li><a href="#this"><b>68</b><span>無線專業<em></em></span></a> </li><li><a href="#this" class="active"><b>69</b><span>交換專業<em></em></span></a> </li><li><a href="#this"><b>70</b><span>數據專業<em></em></span></a> </li><li><a href="#this"><b>71</b><span>輸出專業<em></em></span></a> </li></ul></div><div class="center-area"><div class="pandect-area"><h3><p>當前08時<sub>8 points</sub></p><strong>總覽</strong><em> 11時：29.742 Erl</em></h3><span class="pandect-area-left"><b></b></span><div class="pandect-area-center"><img src="images/charts.png" /></div><span class="pandect-area-right"><b></b></span></div><div class="details1-area"><span class="detailsl-area-left"></span><div class="details1-area-center"><h3>VLR登錄用戶數</h3><dl><dt>上月平均值</dt></ul>448875</dd><dt>昨日語音網絡接通率</dt><dd><ul></dl><b></b></div><span class="detailsl-area-right"></span></div><div class="details2-area"><span class="details2-area-left"></span><div class="details2-area-center"><h3>A口話務量</h3><dl><dt>上月平均值</dt>448875</dd><dt>昨日語音網絡接通率</dt><dt>今日語音網絡接通率 </dt><dd><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li class="red"></li><li class="red"></li><li class="red"></li><li class="red"></li><li class="red"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>448875</dd></dl><b></b></div><span class="details2-area-right"></span></div></div><div class="right-area"><h3>語音網絡接通率 <b></b></h3><div class="area-inbox-1"><dl><dt>上月平均值</dt><dd class="font12"><span>76.525%</span><b></b></dd><dt class="ml-20">今日語音網絡接通率</dt><dd class="font-red ml-20"><span>74.113%</span><b></b></dd><dt>今日語音網絡接通率</dt><dd><span>68.113%</span><b></b></dd></dl><div class="round-1"></div><div class="round-2"></div><div class="round-3">30%</div><div class="round-4"></div></div><div class="area-inbox-2"><ul><li><strong>12</strong>74.23%<b></b><em></em></li><li><strong>16</strong>71.19%<b></b><em></em></li><li><strong>18</strong>68.02%<b></b><em></em></li></ul><div class="area-text"><b class="animation-line1"></b><h4>口徑說明：</h4><p class="text_container"><script>var s = '（當日VLR登記用戶數、昨日VLR登記用戶數、上月平均值當日語音網絡接通率、昨日語音網絡接通'; var con = $('.text_container'); var index = 0; var length = s.length; var tId = null; function start(){ con.text(''); tId=setInterval(function(){ con.append(s.charAt(index)); if(index++ === length){ clearInterval(tId); index = 0; start() } },100); } start();</script></p><b class="animation-line2"></b></div></div></div><div class="time-base-outer"><b class="line1"></b><div class="time-base"><div class="slider2"></div><script src="js/jquery_and_jqueryui.js"></script><script src="js/index.js"></script></div><b class="line2"></b></div></div> </body> </html>

CSS樣式：

@import url('http://fonts.googleapis.com/css?family=Bitter:400,700,400italic'); /* ui slider pips */ .ui-slider-horizontal.ui-slider-pips {margin-bottom: 2.8em; } .ui-slider-pips .ui-slider-number, .ui-slider-pips .ui-slider-pip-hide {display: none; } .ui-slider-pips .ui-slider-pip-number .ui-slider-number {display: block; } .ui-slider-pips .ui-slider-pip {width: 2em;height: 1em;line-height: 1em;position: absolute;font-size: 0.8em;color: #999;overflow: visible;text-align: center;top: 20px;left: 20px;margin-left: -1em;cursor: pointer; } .ui-slider-pips .ui-slider-line {background: #999;width: 1px;height: 3px;position: absolute;left: 50%; } .ui-slider-pips .ui-slider-number {position: absolute;top: 5px;left: 50%;margin-left: -1em;width: 2em; } .ui-slider-pip:hover .ui-slider-number {color: white;font-weight: bold; } .ui-slider-vertical.ui-slider-pips {margin-bottom: 0;margin-right: 2em; } .ui-slider-vertical.ui-slider-pips .ui-slider-pip {text-align: left;top: 20px;left: 20px;margin-left: 0;margin-top: -0.5em; } .ui-slider-vertical.ui-slider-pips .ui-slider-line {width: 3px;height: 1px;position: absolute;top: 50%;left: 0; } .ui-slider-vertical.ui-slider-pips .ui-slider-number {top: 50%;left: 0.5em;margin-left: 0;margin-top: -0.5em;width: 2em; } .ui-slider-vertical.ui-slider-pip:hover .ui-slider-number {color: white;font-weight: bold; } .ui-slider-float .ui-slider-tip, .ui-slider-float .ui-slider-tip-number {position: absolute;visibility: hidden;top: -40px;display: block;width: 34px;margin-left: -17px;left: 50%;height: 20px;line-height: 20px;background: white;border-radius: 3px;box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);text-align: center;font-size: 12px;opacity: -1;transition: all 0.4s ease;color: #333; } .ui-slider-float .ui-slider-handle:hover .ui-slider-tip, .ui-slider-float .ui-slider-handle:focus .ui-slider-tip, .ui-slider-float .ui-slider-pip:hover .ui-slider-tip-number {opacity: 0.9;top: -30px;color: #333;visibility: visible; } .ui-slider-float .ui-slider-pip .ui-slider-tip-number {top: 15px; } .ui-slider-float .ui-slider-pip:hover .ui-slider-tip-number {top: 5px;font-weight: normal; } .ui-slider-float .ui-slider-tip:after, .ui-slider-float .ui-slider-pip .ui-slider-tip-number:after {content: " ";width: 0;height: 0;border: 5px solid rgba(255, 255, 255, 0);border-top-color: #ffffff;position: absolute;bottom: -10px;left: 50%;margin-left: -5px; } .ui-slider-float .ui-slider-pip .ui-slider-tip-number:after {border: 5px solid rgba(255, 255, 255, 0);border-bottom-color: #ffffff;top: -10px; } /* ------------------------- */ /* demo stuff */ body {font-family: 'bitter';padding: 20px 50px;text-align: center;background: url('http://wallpaperswa.com/thumbnails/detail/20120313/abstract%20blue%20lights%20orange%20bokeh%20gaussian%20blur%201920x1200%20wallpaper_www.wallpaperhi.com_43.jpg');background-size: cover;color: white; } h1, h3 {margin: 0 0 10px ; } h3 {font-weight: 200;margin-bottom: 10px; } h4 {font-weight: 300;font-style: italic;color: black;padding: 10px 20px;background: rgba(255, 255, 255, 0.7);display: inline-block;border-radius: 4px; } a {color: #2cafe3; } .wrapper {padding: 40px 40px 0;border: 1px dotted rgba(200, 200, 255, 0.6);background: rgba(0, 10, 20, 0.7);border-radius: 10px; } .ui-slider {box-shadow: inset 0 2px 1px #aaa;border-color: #000; } .ui-slider-horizontal {height: 10px;background: #ddd; }

作品來自于網絡收集、侵權立刪?

上面的圖片文件以及js文件等需要引入進來

?源碼獲取

大家點贊、收藏、關注、評論啦、查看👇🏻👇🏻👇🏻微信公眾號獲取👇🏻👇🏻👇🏻

打卡文章更新?58/? 100天

專欄推薦閱讀：

ECharts+HTML5大數據模板《100套》

HTML5大作業實戰案例《100套》

Java畢設項目精品實戰案例《100套》

總結

以上是生活随笔為你收集整理的基于Echarts+HTML5可视化数据大屏展示—大数据智慧数据平台的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： php中多选提交如何获取,php中che
下一篇： HTML+CSS+JS实现 ❤️乐队成员