️ 智慧乡村 智慧小区 动态数据大屏系统基于 Python Flask ECharts 实现的政务科技风可视化大屏纯模拟数据开箱即用 项目简介本项目包含两个完整的可视化动态大屏智慧乡村大屏- 展示乡村治理、产业、人口、环境等全方位数据智慧小区大屏- 展示小区建设、物业、安防、智慧社区等数据两个大屏共享一个 Flask 服务通过不同路由切换支持一键跳转。核心特点 政务科技风深蓝主题 ECharts 动态图表⚡ 数据 3 秒自动刷新️ 真实地图 楼栋分布图✨ 扫描线、粒子飘浮、发光边框等科技风特效 纯模拟数据无需数据库开箱即用️ 技术栈技术说明Python 3.7后端语言Flask轻量级 Web 框架ECharts 5.x可视化图表库HTML/CSS/JS前端页面阿里云 DataV河南省地图 GeoJSON 项目结构smart_rural_data_screen/ ├── app.py # Flask 主应用路由 模拟数据生成 ├── templates/ │ ├── rural.html # 乡村大屏页面 │ └── community.html # 小区大屏页面 ├── static/ # 静态资源目录可扩展 ├── README.md # 项目说明文档 └── 智慧乡村动态数据大屏项目需求说明书.md 快速开始1. 安装依赖pipinstallflask2. 启动服务cdsmart_rural_data_screen python app.py3. 访问大屏大屏地址乡村大屏http://localhost:5000 或 http://localhost:5000/rural小区大屏http://localhost:5000/community启动后控制台会显示访问地址浏览器打开即可全屏展示按 F11 进入全屏模式️ 功能模块详解一、智慧乡村大屏模块说明图表类型乡村总体概况总人口、总户数、耕地面积、常住/流动人口、覆盖率数字卡片产业经济分布农业、养殖、文旅、电商、手工业占比环形饼图人居环境监测空气质量、水质达标率、绿化覆盖率、垃圾处理率雷达图民生服务与治理便民服务、投诉处理、纠纷调解、政策宣传、网格巡查柱状图智慧安防监控监控设备在线率仪表盘人口结构分析老人、青年、儿童年龄结构柱状图河南省地图17个地级市监控点位、预警点位、异常点位散点地图 飞线动画季度收入趋势Q1-Q4 收入变化折线面积图二、智慧小区大屏模块说明图表类型小区总体概况总户数、总人口、建筑面积、楼栋数、车位数、绿化率数字卡片基础设施运行电梯正常率、停车位使用率、道路状况、照明覆盖率雷达图物业服务数据报修处理率、投诉处理率、缴费率、社区活动柱状图安防监控系统监控设备在线率仪表盘环境卫生监测垃圾分类、绿化养护、清洁保洁、消杀除害饼图智慧社区服务智能设备数、在线率、APP用户数、在线服务折线图楼栋分布图50栋楼可视化显示楼层、户数、状态、室温散点图能耗趋势分析近6个月用电量、用水量对比柱状图✨ 科技风特效说明视觉效果扫描线动画- 地图区域有垂直扫描光效模拟雷达扫描粒子飘浮- 背景 30 个粒子随机浮动营造科技感四角发光边框- 地图区域四角装饰发光边框卡片悬浮高亮- 鼠标悬浮时边框发光 内阴影效果数字跳动动画- 数值变化时有过渡动画渐变标题- 标题从白色到青色渐变 光晕效果地图特效河南省地图阿里云 DataV 加载真实河南省 GeoJSON 地图支持地图缩放、拖拽交互涟漪动画散点正常/预警/异常三种状态飞线动画连接各城市底部滚动字幕 - 实时滚动物业通知、安全提示等 数据刷新机制所有数据3 秒自动刷新模拟实时监控效果数值变化幅度轻微、合理符合实际数据逻辑图表跟随数据自动动态变化全部数据由 Python 后端随机生成前端渲染展示 代码说明后端app.py# 路由设计app.route(/)# 默认跳转乡村大屏app.route(/rural)# 乡村大屏app.route(/community)# 小区大屏# API 接口乡村app.route(/api/rural/overview)app.route(/api/rural/industry)app.route(/api/rural/environment)# ...# API 接口小区app.route(/api/community/overview)app.route(/api/community/infrastructure)app.route(/api/community/buildings)# ...前端关键实现// 数据自动刷新setInterval(updateData,3000);// 数字跳动动画functionanimateNumber(elementId,newValue){element.classList.add(updating);setTimeout((){element.textContentnewValue;element.classList.remove(updating);},150);}// 河南省地图加载fetch(https://geo.datav.aliyun.com/areas_v3/bound/410000_full.json).then(resres.json()).then(geoJson{echarts.registerMap(henan,geoJson);initMapChart();}); 适配场景政务大厅数据展示乡村治理指挥中心智慧社区运营监控项目汇报演示大屏投放展示 自定义修改指南修改端口# app.py 最后一行app.run(debugTrue,host0.0.0.0,port5000)# 改为你想要的端口修改数据范围# 例如修改乡村总人口范围defgenerate_rural_overview():return{total_population:random.randint(2800,3200),# 修改这里的范围# ...}添加新的图表在app.py中添加数据生成函数和 API 路由在对应的 HTML 文件中添加图表容器div idnew_chart/div在 JavaScript 中初始化 ECharts 并调用 API 更新数据 常见问题Q: 地图加载不出来A: 检查网络连接地图数据从阿里云 CDN 加载。如需离线使用可下载 GeoJSON 文件到本地。Q: 中文乱码A: 确保 HTML 文件编码为 UTF-8Flask 默认支持。Q: 如何全屏展示A: 浏览器按 F11 进入全屏模式或使用 Chrome 的创建快捷方式 → 在窗口中运行。 许可证MIT License - 自由使用请保留出处说明 联系作者如果这个项目对你有帮助欢迎点赞、收藏、关注如有问题或建议欢迎在评论区交流讨论。如果觉得不错请给个 Star ⭐ 支持一下