馬上就要國慶黃金周了，小伙伴們是不是已經熱血沸騰籌謀著去哪里玩一玩嗨一嗨，作為程式猿的我，腳步雖然還沒走出去，但是 “酷炫吊炸天” 的霸道總裁大屏駕駛艙必須雙手奉上，供大家參考交流，今天為大家分享的是 【國慶黃金周旅游監測 - 資料可視化大屏解決方案】，
前幾天echarts5.*發布新版，所以我們也一定跟上腳步，該文的地圖和柱狀圖切換即為最新版的功能，搶鮮體驗了下，效果還是很炫滴！
話不多說，開始分享干貨，歡迎討論！QQ微信同號： 6550523
??效果展示??
1、首先看動態效果圖
2、豐富的主題樣式
一、 確定需求方案
1、確定產品上線部署的螢屏LED解析度
1280px*768px，F11全屏后占滿整屏無滾動條；其它解析度螢屏可自適應顯示，
2、功能模塊
-
城市旅游收入統計
-
景區接待人數趨勢
-
高速車流量&高速擁堵趨勢
-
旅游總成交額
-
成交訂單數量
-
線上購票率
3、部署方式
- 基于免安裝可執行程式：支持Windows、Linux、Mac等各種主流作業系統；將可執行程式exe復制到服務器上即可，無需其它環境依賴；
- 觀看方式：既可在服務器上直接觀看程式界面，也可遠程使用瀏覽器打開播放，支持Chrome瀏覽器、360瀏覽器等主流瀏覽器，
二、整體架構設計
- 前端基于Echarts開源庫設計，使用WebStorm編輯器；
- 后端基于Python Web實作，使用Pycharm編輯器；
- 資料傳輸格式：JSON；
- 資料源型別：目前已支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等，還可以定制HTTP API介面方式或其它型別資料庫，
- 資料更新方式：摒棄了前端頁面定時拉取的方式（這種方式帶來嚴重的資源浪費），采用后端資料實時更新，實時推送到前端展示；
三、編碼實作 （基于篇幅及可讀性考慮，此處展示部分關鍵代碼）
1、前端html代碼
<body background="myimg/starfield.jpg">
<div class="container_fluid">
<div class="row_fluid" id="vue_app">
<div style="padding:0 0" class="col-xs-12 col-md-12">
<div style="padding: 0 0" class="col-xs-12 col-md-2">
<dv-decoration-1 style="width:100%;height:5%;" />
</div>
<div style="height:10%;" class="col-xs-12 col-md-6" id="container_0"> </div>
<div style="height:10%; color:#17c0ff; text-align: right;" class="col-xs-12 col-md-4" id="showTime"></div>
</div>
<div style="padding:0 0" class="col-xs-12 col-md-8">
<div style="height:90%;" id="container_1"></div>
<div class="div-title-1">
<p class="p-titile">旅游總成交額
<img src="myimg/1.png" style="height: 40%; ">
</p>
<p id="container_2_1" class="p-value">
12
</p>
</div>
<div class="div-title-2">
<p class="p-titile">成交訂單數量
<img src="myimg/2.png" style="height: 40%; ">
</p>
<p id="container_2_2" class="p-value">
23
</p>
</div>
<div class="div-title-3">
<p class="p-titile">線上購票率
<img src="myimg/3.png" style="height: 40%; ">
</p>
<p id="container_2_3" class="p-value">
55
</p>
</div>
</div>
<div style="padding:0 0" class="col-xs-12 col-md-4">
<div style="height:20%;" id="container_2"></div>
</div>
<div style="padding:0 0" class="col-xs-12 col-md-4">
<div style="height:25%;" id="container_3">
<dv-scroll-board :config="config" />
</div>
</div>
<div style="padding:0 0" class="col-xs-12 col-md-4">
<div style="height:25%;" id="container_4"></div>
</div>
<div style="padding:0 0" class="col-xs-12 col-md-4">
<div style="height:20%;" id="container_5">
</div>
</div>
</div>
</div>
<!-- theme -->
<ul id="rightMenu" style="width: 200px;">
<li><img src="myimg/drop-down.png"> 主題串列</li>
<li>infographic</li>
<li>macarons</li>
<li>roma</li>
<li>shine</li>
<li>walden</li>
<li>westeros</li>
<li>wonderland</li>
<li>vintage</li>
<li>purple-passion</li>
<li>chalk</li>
<li>dark</li>
<li>essos</li>
</ul>
</body>
2、前端JS代碼
function initEchartLineArea(idContainer)
{
var chartDom = document.getElementById(idContainer);
var myChart = echarts.init(chartDom, window.gTheme);
var option;
option = {
title: {
text: "景區接待人數趨勢",
left: "left",
textStyle: {
color: "#17c0ff",
fontSize: "12",
},
},
grid: {
left: "3%",
top: "15%",
right: "5%",
bottom: "10%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
// Use axis to trigger tooltip
type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
},
},
xAxis: {
type: "category",
boundaryGap: false,
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.7)",
fontSize: 12,
},
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
data: [],
},
yAxis: {
name: "萬次",
type: "value",
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.7)",
fontSize: 12,
},
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
series: [
{
data: [],
type: "line",
areaStyle: {},
},
],
};
option && myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function asyncDataLineArea(filename,idContainer) {
$.getJSON(filename).done(function (data) {
var myChart = echarts.init(document.getElementById(idContainer));
myChart.setOption({
xAxis: data["xAxis"],
series: data["series"],
});
}); //end $.getJSON
}
function initEchartLineMulti(idContainer) {
var myChart = echarts.init(
document.getElementById(idContainer),
window.gTheme
);
option = {
title: {
top: "10%",
text: "高速車流量&高速擁堵趨勢",
left: "left",
textStyle: {
color: "#17c0ff",
fontSize: "12",
},
},
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#dddc6b",
},
},
},
legend: {
top: "10%",
data: ["高速車流量", "高速擁堵趨勢"],
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: 10,
},
},
grid: {
left: "3%",
top: "20%",
right: "5%",
bottom: "10%",
containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.7)",
fontSize: 12,
},
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
],
yAxis: [
{
type: "value",
name: "萬次",
min: 0,
max: 300,
axisTick: { show: false },
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.7)",
fontSize: 12,
},
// formatter: '{value} KM',
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
],
series: [
{
name: "高速車流量",
type: "line",
// 平滑曲線 或 折線
smooth: true,
// 面接圖
areaStyle: {},
symbol: "circle",
symbolSize: 10,
lineStyle: {
normal: {
// color: '#0184d5',
width: 2,
},
},
data: [],
},
{
name: "高速擁堵趨勢",
type: "line",
smooth: true,
// 面接圖
areaStyle: {},
symbol: "circle",
symbolSize: 10,
lineStyle: {
normal: {
// color: '#0184d5',
width: 2,
},
},
data: [],
},
],
};
// 使用剛指定的配置項和資料顯示圖表，
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function asyncDataLineMulti(filename, idContainer) {
$.getJSON(filename).done(function (data) {
var myChart = echarts.init(document.getElementById(idContainer));
myChart.setOption({
xAxis: data["xAxis"],
series: data["series"],
});
}); //end $.getJSON
}
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 = 8813 # 監聽埠，配置項
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):
if self.path == "/signin":
print("postmsg recv, path right")
else:
print("postmsg recv, path error")
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()四、上線運行
五、原始碼下載
本次分享結束，歡迎討論！QQ微信同號： 6550523
??系列文章??
??資料可視化??：基于 Echarts + Python 實作的大屏范例【12】（你想要的酷炫世界地圖在這里了！）_小魔怪的博客-CSDN博客
資料可視化：基于 Echarts + Python 實作的動態實時大屏范例【11】
資料可視化：基于 Echarts + Python 實作的動態實時大屏范例【十】
資料可視化：基于 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/300750.html
標籤：python
下一篇：Django-Admin基本配置