基于Echarts+HTML5可视化数据大屏展示-图书馆大屏看板
效果展示：
代码结构：
主要代码实现
index.html布局
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"><link rel="stylesheet" href="./static/swiper.min.css"><link rel="stylesheet" type="text/css" href="./static/style.css"><title>上海市图书馆指挥中心</title><style id="ai-assist-right-style">html.ai-assist-html {width: calc(100% - 480px)!important;position: relative!important;min-height: 100vh!important}.ai-assist-highlight {background: yellow;}</style><script src="static/common.js"></script>
</head><body>
<div class="tsg box report"><!-- head --><div class="tsg_head "><div class="tsg_title fc"><div class="d1"><p id="time">2024-6-21 10:1:49</p></div><div class="d2"><img src="./static/title.png"></div><div class="d3"><iframe allowtransparency="true" frameborder="0" width="255" height="60" scrolling="no" src="https://tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=1&v=0&d=1&bd=0&k=000000&f=00ffff<f=009944&htf=cc0000&q=0&e=0&a=1&c=54511&w=255&h=60&align=center"></iframe></div></div><div class="tsg_hul fc"><div class="tsg_hli"><p class="p1"><img class="img1" src="./static/right.png"><span>馆藏图书</span><img class="img2" src="./static/right.png"></p><p class="p2">3367220<span>册</span></p></div><div class="tsg_hli"><p class="p1"><img class="img1" src="./static/right.png"><span>新增图书</span><img class="img2" src="./static/right.png"></p><p class="p2">76921<span>册</span></p></div><div class="tsg_hli"><p class="p1"><img class="img1" src="./static/right.png"><span>读者总数</span><img class="img2" src="./static/right.png"></p><p class="p2">271599<span>册</span></p></div><div class="tsg_hli"><p class="p1"><img class="img1" src="./static/right.png"><span>新增读者</span><img class="img2" src="./static/right.png"></p><p class="p2">19206<span>册</span></p></div><div class="tsg_hli"><p class="p1"><img class="img1" src="./static/right.png"><span>借阅总量</span><img class="img2" src="./static/right.png"></p><p class="p2">17741348<span>册</span></p></div><div class="tsg_hli"><p class="p1"><img class="img1" src="./static/right.png"><span>最近借阅</span><img class="img2" src="./static/right.png"></p><p class="p2">1066937<span>册</span></p></div></div></div><div class="tsg_box fl"><!-- 左侧 --><div class="tsg_box_left tsg_box_lis"><!-- 新增馆藏/新增读者分析 --><div class="tsg_box_left_li tsg_table_6"><div class="tsg_box_t tsg_hli"><p class="p1"><img class="img1" src="./static/right.png"><span>新增馆藏/新增读者分析</span><img class="img2" src="./static/right.png"></p></div><!-- echarts_1 --><div id="echarts_1" class="echarts_1" _echarts_instance_="ec_1718935309104" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; width: 559px; height: 243px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="559" height="243" style="position: absolute; left: 0px; top: 0px; width: 559px; height: 243px; 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="tsg_box_left_li tsg_table_6"><div class="tsg_box_t tsg_hli"><p class="p1"><img class="img1" src="./static/right.png"><span>到馆人次/借阅册次分析</span><img class="img2" src="./static/right.png"></p></div><!-- echarts_2 --><div><div id="echarts_2" class="echarts_1 echarts_tab" _echarts_instance_="ec_1718935309105" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative; display: block;"><div style="position: relative; width: 559px; height: 243px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="559" height="243" style="position: absolute; left: 0px; top: 0px; width: 559px; height: 243px; 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 id="echarts_21" class="echarts_1 echarts_tab" _echarts_instance_="ec_1718935309106" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative; display: none;"><div style="position: relative; width: 559px; height: 243px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="559" height="243" style="position: absolute; left: 0px; top: 0px; width: 559px; height: 243px; 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 id="echarts_22" class="echarts_1 echarts_tab" _echarts_instance_="ec_1718935309107" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative; display: none;"><div style="position: relative; width: 559px; height: 243px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="559" height="243" style="position: absolute; left: 0px; top: 0px; width: 559px; height: 243px; 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></div><!-- 中间 --><div class="tsg_box_center tsg_box_lis"><!-- 实时客流分析 --><div class="tsg_box_left_li tsg_table_3"><div class="tsg_box_t tsg_hli"><p class="p1"><img class="img1" src="./static/right.png"><span>实时客流分析</span><img class="img2" src="./static/right.png"></p></div><div class="tsg_online_kl fc"><div class="tsg_online_kl_li fc"><div><div class="tsg_box_t tsg_hli"><p class="p1"><img class="img1" src="./static/right.png"><span>今日入馆</span><img class="img2" src="./static/right.png"></p></div><div class="tsg_online_kl_1">235</div><div class="tsg_online_kl_2">人</div></div></div><div class="tsg_online_kl_li fc"><div><div class="tsg_box_t tsg_hli"><p class="p1"><img class="img1" src="./static/right.png"><span>当前在馆</span><img class="img2" src="./static/right.png"></p></div><div class="tsg_online_kl_1 tsg_online_kl_11">95</div><div class="tsg_online_kl_2">人</div></div></div></div><div class="tsg_online_text">7小时内读者滞馆情况</div><!-- echarts_3 --><div id="echarts_3" class="echarts_2" _echarts_instance_="ec_1718935309108" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; width: 552px; height: 270px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="552" height="270" style="position: absolute; left: 0px; top: 0px; width: 552px; height: 270px; 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><!-- 右侧 --><div class="tsg_box_right tsg_box_lis"><!-- 最近24小时分管借阅情况 --><div class="tsg_box_left_li tsg_table_7"><div class="tsg_box_t tsg_hli"><p class="p1"><img class="img1" src="./static/right.png"><span>最近24小时分管借阅情况</span><img class="img2" src="./static/right.png"></p></div><div class="tsg_box_rul tsg_box_rul24 "><div class="tsg_box_rhead fc"><div class="d1">借阅位置</div><div class="d1">册次</div><div class="d1">最后借阅时间</div></div><div class="tsg_box_rtr"><div class="tsg_box_rli fc"><div class="d2">上海图书馆综合借阅室</div><div class="d3">121</div><div class="d4">2024-08-25 17:00:00</div></div><div class="tsg_box_rli fc"><div class="d2">上海图书馆璜土分管</div><div class="d3">105</div><div class="d4">2024-08-25 17:00:00</div></div><div class="tsg_box_rli fc"><div class="d2">上海图书馆少儿馆</div><div class="d3">95</div><div class="d4">2024-08-25 17:00:00</div></div><div class="tsg_box_rli fc"><div class="d2">上海图书馆嘉定分馆</div><div class="d3">84</div><div class="d4">2024-08-25 17:00:00</div></div><div class="tsg_box_rli fc"><div class="d2">上海图书馆世纪广场</div><div class="d3">76</div><div class="d4">2024-08-25 17:00:00</div></div><div class="tsg_box_rli fc"><div class="d2">上海图书馆长宁分馆</div><div class="d3">59</div><div class="d4">2024-08-25 17:00:00</div></div><div class="tsg_box_rli fc"><div class="d2">上海图书馆少儿馆</div><div class="d3">49</div><div class="d4">2024-08-25 17:00:00</div></div><div class="tsg_box_rli fc"><div class="d2">上海图书馆综合借阅室</div><div class="d3">44</div><div class="d4">2024-08-25 17:00:00</div></div></div></div></div><!-- 读者构成情况分析 --><div class="tsg_box_left_li tsg_table_7"><div class="tsg_box_t tsg_hli"><p class="p1"><img class="img1" src="./static/right.png"><span>读者构成情况分析</span><img class="img2" src="./static/right.png"></p></div><div class="tsg_box_two fc"><div id="echarts_4" class="echarts_3 tsg_box_two_li" _echarts_instance_="ec_1718935309109" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; width: 279px; height: 270px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="279" height="270" style="position: absolute; left: 0px; top: 0px; width: 279px; height: 270px; 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 id="echarts_5" class="echarts_4 tsg_box_two_li" _echarts_instance_="ec_1718935309110" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; width: 279px; height: 270px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="279" height="270" style="position: absolute; left: 0px; top: 0px; width: 279px; height: 270px; 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></div></div>
</div>
<script type="text/javascript" src="./static/jquery.min.js"></script>
<script type="text/javascript" src="./static/swiper.min.js"></script>
<script type="text/javascript" src="./static/echarts.min.js"></script>
<script type="text/javascript" src="./static/common.js"></script>
<script>var swiper = new Swiper('.swiper-container',{pagination:'.swiper-pagination',loop:true,autoplay:3000,//grabCursor:true,centeredSlides:true,slidesPerView:'2',effect:'coverflow', //叠加coverflow:{rotate:0,//滑动时旋转角度stretch:50,//聚合宽度depth:100,//景深modifier:1,//覆盖叠加层数slideShadows:false//是否阴影}});window.onload = function(){getCurDate()}setInterval("getCurDate()", 1000);function getCurDate() {var date = new Date()var y = date.getFullYear();var m = date.getMonth() + 1;var d = date.getDate();var h = date.getHours();var min = date.getMinutes();var s = date.getSeconds();s = s<10 ? "0" + s : s;document.getElementById("time").innerHTML = y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s;}
</script>
<!---->
</body>
</html>
作品来自于网络收集、侵权立删