基于EchartsHTML5可视化数据大屏展示-图书馆大屏看板
![https://bing.ee123.net/img/rand?artid=151264767](https://bing.ee123.net/img/rand?artid=151264767 "本文展示了一个上海市图书馆指挥中心的网页设计效果。网页包含顶部的标题栏、时间显示和天气插件，中间展示6个关键数据指标（馆藏图书、新增图书、读者总数等），下方分为左右两栏。左栏包含"新增馆藏/新增读者分析"和"到馆人次/借阅册次分析"两个图表区域，使用ECharts实现数据可视化。整体采用响应式布局，适配不同设备屏幕。代码结构清晰，通过HTML定义页面框架，CSS控制样式，JavaScript实现交互功能。")
目录
基于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>作品来自于网络收集、侵权立删