900字范文 > 【9】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 酒店行业

【9】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 酒店行业

时间：2022-05-12 17:41:43

精彩案例汇总

效果展示

1、动态效果图

2、实时分片数据图

3、丰富的背景样式

一、确定需求方案

1、确定产品上线部署的屏幕LED分辨率

2、功能模块

3、部署方式：

二、整体架构设计

三、编码实现（基于篇幅及可读性考虑，此处展示部分关键代码）

1、前端html代码

2、前端JS代码

3、后端python代码

4、数据传输格式

四、上线运行

五、源码下载

精彩案例汇总

近年来，数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。今天为大家分享的是【酒店行业 - 数据可视化大屏】。

之前小伙伴们建议我出一些视频课程来学习Echarts，这样可以更快上手，所以我就追星赶月的录制了《Echarts - 0基础入门课程》Echarts-0基础入门--其他视频教程-编程语言-CSDN程序员研修院，希望小伙伴们多多支持。

话不多说，开始分享干货，欢迎讨论！微信号：6550523

精彩案例汇总

YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客

效果展示

1、动态效果图

2、实时分片数据图

3、丰富的背景样式

为了满足不同用户的审美需求，本案例实现了多个背景样式：

一、确定需求方案

1、确定产品上线部署的屏幕LED分辨率

1280px*768px，F11全屏后占满整屏且无滚动条；其它分辨率屏幕均可自适应显示。

2、功能模块

根据市场上同类产品数据分析的关键指标，本案例实现的功能模块如下：

近10日入住率

热门房型及销量

酒店印象

客户年龄&地区分布

访问来源&会员等级

全国门店分布

3、部署方式：

B/S版：可以流畅的运行在 PC（Windows系统，Linux及各衍生系统）和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）；C/S版：整个项目仅一个可执行文件，超简单的方式，没有之一。

二、整体架构设计

前端基于Echarts开源库设计，使用WebStorm编辑器；后端基于Python Web实现，使用Pycharm编辑器；数据传输格式：JSON；数据源类型：支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等，还可以定制HTTP API接口方式或其它类型数据库。数据更新方式：摒弃了前端页面定时拉取的方式（这种方式带来严重的资源浪费），采用后端数据实时更新，实时推送到前端展示；

三、编码实现（基于篇幅及可读性考虑，此处展示部分关键代码）

1、前端html代码

<body background="myimg/bg_6.jpg"><div class="container-fluid" id="vue_app"><div class="row" id="lo_header"><dv-decoration-4 :reverse="true" style="height:10%;"></dv-decoration-4><h3 id="container_h"></h3></div><div class="row" id="lo_center"><div class="col-4" id="lo_left"><dv-border-box-2 :color="['#cba871', '#25201f']" style="height:50%"><div class="row" id="lo_1"><h6> - 近10日入住率 - </h6><div id="container_1"></div></div></dv-border-box-2><dv-border-box-2 :color="['#cba871', '#25201f']" style="height:50%"><div class="row" id="lo_2"><h6> - 热门房型及销量 - </h6><div id="container_2"><dv-scroll-board :config="config" /></div></div></dv-border-box-2></div><div class="col-4" id="lo_middle"><dv-border-box-2 :color="['#cba871', '#25201f']"><div id="lo_3"><h6> - 酒店印象 - </h6><div id="container_3"></div></div></dv-border-box-2></div><div class="col-4" id="lo_right"><dv-border-box-2 :color="['#cba871', '#25201f']" style="height:50%"><div class="row" id="lo_4"><h6> - 客户年龄&地区分布 - </h6><div class="col" id="container_4_1"></div><div id="line_1"></div><div class="col" id="container_4_2"></div></div></dv-border-box-2><dv-border-box-2 :color="['#cba871', '#25201f']" style="height:50%"><div class="row" id="lo_5"><h6> - 访问来源&会员等级 - </h6><div class="col" id="container_5_1"></div><div id="line_2"></div><div class="col" id="container_5_2"></div></div></dv-border-box-2></div></div><div class="row" id="lo_bottom"><dv-border-box-2 :color="['#cba871', '#25201f']"><div id="lo_6"><h6> - 全国门店分布 - </h6><div id="container_6"></div></div></dv-border-box-2></div></div></body>

2、前端JS代码

3、后端python代码

class MyRequestHandler(SimpleHTTPRequestHandler):sys_version = "Python/3.8.10"target = "./" # 监听目录，配置项def do_GET(self):SimpleHTTPRequestHandler.do_GET(self)def HttpServer():try:server = HTTPServer((ip, port), MyRequestHandler)listen = "http://%s:%d" % (ip, port)print("服务器监听地址： ", listen)server.serve_forever()except ValueError as e:print("Exception", e)server.socket.close()if __name__ == "__main__":# 开启线程，触发动态数据a = threading.Thread(target=asyncJson.loop)a.start()# 开启web服务HttpServer()

4、数据传输格式

{"xAxis": {"data": ["深圳市", "广州市", "长沙市", "武汉市", "北京市", "上海市", "沈阳市", "南昌市", "郑州市", "庐山市", "黄山市", "岳阳市"]}, "series": [{"data": [461, 650, 202, 557, 302, 191, 639, 131, 488, 574, 301, 343]}]}