当前位置：首页 > java >正文

数据可视化大屏——智慧社区内网比对平台

java 2025/5/12 7:55:52

综述分析：

智慧社区内网数据比对信息系统

这段代码实现了一个智慧社区内网数据比对信息系统的前端界面，采用三栏式布局展示各类社区安全相关数据。界面主要由左侧数据统计、中间地图展示和右侧数据分析三部分组成，使用了多种图表可视化技术。

整体结构

代码采用了三栏式布局设计：

左侧区域：展示当前比对数据量、违法犯罪人员分析饼图和最近人口出入记录表格
中间区域：显示系统标题、实时时间天气信息、重点地区数据和中国地图可视化
右侧区域：展示违法犯罪人员年龄分布、地区分布和人口出入时间段统计图表

关键功能模块

时间和日期显示

html

预览
```
<div class="weather-box"><div class="data"><p class="time" id="time">00:00:00</p><p id="date"></p></div>
</div>
```
这部分代码预留了时间和日期的显示位置，实际更新逻辑应该在外部 JavaScript 文件中实现。
数据可视化
页面使用了多个 ECharts 图表组件：
- pie_fanzui：违法犯罪人员类型分析饼图
- china_map：中国地图，展示各地区相关数据
- pie_age：违法犯罪人员年龄分布饼图
- qufenbu_data：违法犯罪人员地区分布图表
- line_time：人口出入时间段统计折线图

表格数据展示

html

预览

<table class="table3"><thead><tr><th>姓名</th><th>角色</th><th>开门方式</th><th>时间</th></tr></thead><tbody id="tList"><!-- 数据行 --></tbody>
</table>

表格展示了社区人员的出入记录，包括姓名、角色、开门方式和时间信息。

交互元素
- 页面中包含一些交互元素，如选择框、切换按钮等
- 例如：switchBtn用于切换不同的数据展示类型

技术栈

前端框架：使用了 jQuery 作为主要交互库
UI 组件：采用了 layer.js 作为弹窗组件
图表库：使用 ECharts 实现数据可视化
响应式设计：通过 viewport 和 rem.js 实现移动端适配
样式：使用自定义 CSS 实现整体布局和视觉效果

代码框架：

完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="renderer" content="webkit"><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><script type="text/javascript" src="js/rem.js"></script><link rel="stylesheet" href="css/style.css"><title>天津市博安信通智慧社区内网数据比对信息系统</title>
</head><body style="visibility: hidden;"><div class="container-flex" tabindex="0" hidefocus="true"><div class="box-left"><div class="left-top"><div class="current-num"><div>当前比对数据</div><p>3,456,789</p></div></div><div class="left-center"><div class="title-box"><h6>违法犯罪人员分析</h6></div><div class="chart-box pie-chart" style=""><div id="pie_fanzui" style="width:100%;"></div></div></div><div class="left-bottom" class="select"><div class="title-box"><h6>人口出入记录</h6></div><div class="chart-box"><table class="table3"><thead><tr><th>姓名</th><th>角色</th><th>开门方式</th><th>时间</th></tr></thead><tbody id="tList">
<!--<tr><td colspan="4"><p style="width:9.6rem;">暂无数据</p></td></tr>--><tr><td>张梦</td><td>访客</td><td>人脸</td><td>2018-11-01 13:51:23</td></tr><tr><td>李阳荣</td><td>业主</td><td>APP</td><td>2018-11-01 13:51:23</td></tr><tr><td>张无双</td><td>访客</td><td>人脸</td><td>2018-11-01 13:51:23</td></tr><tr><td>李阳</td><td>业主</td><td>APP</td><td>2018-11-01 13:51:23</td></tr></tbody></table></div></div></div><div class="box-center"><div class="center-top"><h1><img src="images/jinghui.png" style="width:55px;margin-right:20px;"/>智慧社区内网比对平台</h1></div><div class="center-center"><div class="weather-box"><div class="data"><p class="time" id="time">00:00:00</p><p id="date"></p></div><div class="weather"><img id="weatherImg" src="images/weather/weather_img01.png" alt=""><div id="weather"><p class="active">多云</p><p>16-22℃</p><p>天津市和平区</p></div></div></div><img src="images/line_bg.png" alt=""><div class="select-box" style="height: 0.3rem;"><div data-type="2"><div class="select" tabindex="0" hidefocus="true" ><p style="color:#FFFF00;font-weight:bold;">NO.1北京：2543289人</p><p style="color:#7FFF00;font-weight:bold;">NO.1天津： 5690人</p><p style="color:#7FFFD4;font-weight:bold;">NO.1河北： 456人</p></div></div></div></div><div class="center-bottom"><div class="chart-box"><div id="china_map" style="width:100%;height:95%;"></div></div></div></div><div class="box-right"><div class="right-top"><div class="title-box"><h6 id="barTitle">违法犯罪人员年龄分布</h6></div><p class="unit">单位：岁</p><div class="chart-box"><div id="pie_age" style="width:100%;height:100%;"></div></div></div><div class="right-center"><div class="title-box"><h6>违法犯罪人员地区分布</h6></div><div class="chart-box pie-chart"><div id="qufenbu_data"style="width:90%;height:120px;margin-left:10px;"></div></div></div><div class="right-bottom"><div class="title-box"><p id="switchBtn"><span class="active" data-dataType="income">人口出入时间段统计</span></p></div><div id="line_time" style="width:90%;height:160px;margin-left:10px;"></div></div></div></div></body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/layer/layer.min.js"></script>
<script type="text/javascript" src="js/layer/laydate/laydate.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript" src="js/infographic.js"></script>
<script type="text/javascript" src="js/macarons.js"></script>
<script type="text/javascript" src="js/shine.js"></script>
<script type="text/javascript" src="js/base.js"></script><script type="text/javascript">$('document').ready(function () {$("body").css('visibility', 'visible');var localData = [$('#teacher').val(), $('#start').val() + '/' + $('#end').val(), $('#leader').val()]localStorage.setItem("data", localData);})
</script></html>