近年來，資料可視化大屏的出現，掀起一番又一番的浪潮，眾多企業主紛紛想要打造屬于自己的 “酷炫吊炸天” 的霸道總裁大屏駕駛艙，今天為大家分享的是 【酒店行業 資料可視化大屏】，
話不多說，開始分享干貨，歡迎討論！微信號： 6550523
效果展示
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代碼
<html>
<head>
<title>酒店行業資料可視化大屏</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
</style>
</head>
<link rel="icon" type="image.png" href="/static/images/favicon.ico">
<link rel="stylesheet" href="/static/js/fun.css">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<script src="/static/echart/opt/vue.js"></script>
<script src="/static/echart/opt/dv.js"></script>
<script src="/static/js/jquery-2.2.3.min.js"></script>
<body style="background-color:#090a14;" background="myimg/bg_8.jpg">
<!-- <body style="background-color:#090a14;" > -->
<div class="container_fluid">
<div class="row_fluid" id="vue_app">
<div style="padding:0px; " class="col-xs-12 col-md-12">
<dv-decoration-4 :reverse="true" style="height:2%;">
</dv-decoration-4>
<h3 style="color:#cba871;text-align:center;" id="container_h"></h3>
</div>
<div style="padding: 0px;" class="col-xs-12 col-md-4">
<div style="padding: 0px; " class="col-xs-12 col-md-12">
<dv-border-box-2 style="padding: 12px; height:30%; " :color="['#cba871', '#25201f']">
<h6 style=" color:#cba871; text-align: center;"> - 近10日入住率 - </h6>
<div style="padding:5%; height:90%; " id="container_1"></div>
</dv-border-box-2>
</div>
<div style="padding: 0px; " class="col-xs-12 col-md-12">
<dv-border-box-2 style="padding: 12px; height:30%; " :color="['#cba871', '#25201f']">
<h6 style=" color:#cba871; text-align: center; "> - 熱門房型及銷量 - </h6>
<div style="padding:5%; height:90%; " id="container_2">
<dv-scroll-board :config="config" />
</div>
</dv-border-box-2>
</div>
</div>
<div style="padding:0px;" class="col-xs-12 col-md-4">
<div style="padding:0px; " class="col-xs-12 col-md-12">
<dv-border-box-2 style="padding: 12px; height:60%; " :color="['#cba871', '#25201f']">
<h6 style=" color:#cba871; text-align: center;"> - 酒店印象 - </h6>
<div style="padding:5%; height:90%;" id="container_3"></div>
</dv-border-box-2>
</div>
</div>
<div style="padding: 0px;" class="col-xs-12 col-md-4">
<div style="padding: 0px; " class="col-xs-12 col-md-12">
<dv-border-box-2 style="padding: 12px; height:30%; " :color="['#cba871', '#25201f']">
<h6 style=" color:#cba871; text-align: center; height:3%;"> - 客戶年齡&地區分布 - </h6>
<div style="padding: 0px; " class="col-xs-12 col-md-6">
<div style="padding:5%; height:90%;" id="container_4_1"></div>
</div>
<div style="padding: 0px; " class="col-xs-12 col-md-1">
<div style="width: 0.3px; align=center; height: 80%; background: #cba871;"></div>
</div>
<div style="padding: 0px; " class="col-xs-12 col-md-5">
<div style="padding:5%; height:90%;" id="container_4_2"></div>
</div>
</dv-border-box-2>
</div>
<div style="padding: 0px; " class="col-xs-12 col-md-12">
<dv-border-box-2 style="padding: 12px; height:30%; " :color="['#cba871', '#25201f']">
<h6 style=" color:#cba871; text-align: center;height:3%;"> - 訪問來源&會員等級 - </h6>
<div style="padding: 0px; " class="col-xs-12 col-md-6">
<div style="padding:5%; height:90%;" id="container_5_1"></div>
</div>
<div style="padding: 0px; " class="col-xs-12 col-md-1">
<div style="width: 0.3px; align=center; height: 80%; background: #cba871;"></div>
</div>
<div style="padding: 0px; " class="col-xs-12 col-md-5">
<div style="padding:5%; height:90%;" id="container_5_2"></div>
</div>
</dv-border-box-2>
</div>
</div>
<div style="padding:0px;" class="col-xs-12 col-md-12">
<div style="padding:0px;" class="col-xs-12 col-md-12">
<dv-border-box-2 style="padding: 12px;height:28%; " :color="['#cba871', '#25201f']">
<h6 style="color:#cba871; text-align: center; "> - 全國門店分布 - </h6>
<div style=" padding:2%; height:90%; " id="container_6"></div>
</dv-border-box-2>
</div>
</div>
</div>
</div>
</body>
</html>2、前端JS代碼
var idContainer_6 = "container_6";
var chartDom = document.getElementById(idContainer_6);
var myChart = echarts.init(chartDom, window.gTheme);
var option;
option = {
grid: {
left: "1%",
right: "1%",
bottom: "1%",
top: "0",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
formatter: function (params) {
return params[0].name + ": " + params[0].value;
},
},
xAxis: {
data: [],
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
color: "#cba871",
},
},
yAxis: {
splitLine: { show: false },
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { show: false },
},
color: ["#cba871"],
series: [
{
name: "hill",
type: "pictorialBar",
barCategoryGap: "-100%",
// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
itemStyle: {
opacity: 1,
},
emphasis: {
itemStyle: {
opacity: 1,
},
},
data: [],
z: 10,
},
],
};
function asyncData_6() {
$.getJSON("json/echart_pictorial_bar.json").done(function (data) {
var myChart = echarts.init(document.getElementById(idContainer_6));
myChart.setOption(data);
}); //end $.getJSON
}
window.addEventListener("resize", function () {
myChart.resize();
});
myChart.setOption(option);
asyncData_6();
3、后端python代碼
# -*- coding:utf-8 -*-
import io
import os
import sys
import urllib
import json
from http.server import HTTPServer, SimpleHTTPRequestHandler, ThreadingHTTPServer
ip = "localhost" # 監聽IP，配置項
port = 8815 # 監聽埠，配置項
index_url = "http://%s:%d/index.html" %(ip, port) # 監聽主頁url，配置項
class MyRequestHandler(SimpleHTTPRequestHandler):
protocol_version = "HTTP/1.0"
server_version = "PSHS/0.1"
sys_version = "Python/3.7.x"
target = "./" # 監聽目錄，配置項
def do_GET(self):
if self.path.find("/json/") > 0:
print(self.path)
req = {"success": "true"}
self.send_response(200)
self.send_header("Content-type", "json")
self.end_headers()
with open(self.path, 'r', encoding="utf-8") as f:
data = json.load(f)
rspstr = json.dumps(data)
self.wfile.write(rspstr.encode("utf-8"))
else:
SimpleHTTPRequestHandler.do_GET(self);
def do_POST(self):
data = self.rfile.read(int(self.headers["content-length"]))
data = json.loads(data)
self.send_response(200)
self.send_header("Content-type", "text/html")
self.end_headers()
rspstr = "recv ok, data = "
rspstr += json.dumps(data, ensure_ascii=False)
self.wfile.write(rspstr.encode("utf-8"))
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__":
HttpServer()4、資料傳輸格式
{"xAxis": {"data": ["深圳市", "廣州市", "長沙市", "武漢市", "北京市", "上海市", "沈陽市", "南昌市", "鄭州市", "廬山市", "黃山市", "岳陽市"]}, "series": [{"data": [461, 650, 202, 557, 302, 191, 639, 131, 488, 574, 301, 343]}]}四、上線運行
本次分享結束，歡迎討論！微信號： 6550523
??系列文章??
資料可視化：基于 Echarts + Python 實作的動態實時大屏范例【九】
資料可視化：基于 Echarts + Python 實作的動態實時大屏范例【八】
資料可視化：基于 Echarts + Python 實作的動態實時大屏范例【七】
資料可視化：基于 Echarts + Python 實作的動態實時大屏范例【六】
資料可視化：基于 Echarts + Python 實作的動態實時大屏范例【五】
資料可視化：基于 Echarts + Python 實作的動態實時大屏范例【四】
資料可視化：基于 Echarts + Python 實作的動態實時大屏范例【三】
資料可視化：基于 Echarts + Python 實作的動態實時大屏范例【二】
資料可視化：基于 Echarts + Python 實作的動態實時大屏范例【一】
資料可視化：基于 Pyecharts + PyQT 實作的動態實時拖拉拽大屏范例【一】
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/293615.html
標籤：python