效果图展示
动态效果演示
2.静态切片效果图
一、确定需求方案
1.确定产品上线部署的屏幕LED分辨率
本案例基于16:9 屏宽比，F11全屏显示。
2.部署方式
浏览器打开播放，Chrome浏览器、360浏览器等。
二、整体架构设计
前端基于 Echarts开源库设计，使用WebStorm编辑器；
后端基于Python Flask实现，使用 Vscode 或 Pycharm编辑器；
数据传输格式：JSON；
数据源类型：目前采用JSON文件方式，可自行添加支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite，自行添加pandas支持Excel表格等，还可以定制HTTP API接口方式。
数据更新方式：采用http get 轮询方式 。在实际应用中，也可以视情况选择j监测后端数据实时更新，实时推送到前端的方式；
三、编码实现 （关键代码）
1.前端html代码 - 页面布局主要基于div
<body>
<div id="loader"></div>
<script type="text/javascript">
$('#loader').shCircleLoader({color: "#00deff"});
</script>
<!--Top Start!-->
<div class="scanboardWp animsition">
<div id="top">
<div class="wp clearfix">
<div class="left pageTit">
</div>
<div class="center topLogo">
<h1 style="color: whitesmoke; font-weight: bolder; font-size: x-large; ">汉堡🍔炸鸡🐔奶茶🥤连锁餐饮店数据看板</h1>
</div>
<div class="right topBar">
<div class="topTime">时间加载中...</div>
<div class="clearfix">
<a href="index.html" class="signOut fr">退出</a>
<div class="company fr">
<h3 >资源推荐</h3>
<div class="dropdown">
<a href="https://blog.csdn.net/lildkdkdkjf/category_11398372.html">定制开发案例</a>
<a href="https://blog.csdn.net/lildkdkdkjf/category_9999313.html">可视化模板精选</a>
<a href="https://blog.csdn.net/lildkdkdkjf/category_11848863.html">智慧天气系统</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Top End!-->
<!--Main Start!-->
<div id="main" class="wp clearfix">
<div class="left">
<!--今日订单概览-->
<div class="item waybill">
<div class="itemTit">
<span class="border-yellow">今日订单概览</span>
</div>
<div class="itemCon itembg">
<div class="progress" progress="80%">
<h3 class="clearfix"><span>滿意单</span><i id="normal">80单</i></h3>
<div class="progressBar">
<span></span>
</div>
<h4>0%</h4>
</div>
<div class="progress" progress="15%">
<h3 class="clearfix"><span>无评价单</span><i id="temporary">15单</i></h3>
<div class="progressBar">
<span></span>
</div>
<h4>0%</h4>
</div>
<div class="progress" progress="5%">
<h3 class="clearfix"><span>差评单</span><i id="abnormal">5单</i></h3>
<div class="progressBar">
<span></span>
</div>
<h4>0%</h4>
</div>
</div>
</div>
<!--各阶段平均用时统计-->
<div class="item">
<div class="itemTit">
<span class="border-green">顾客平均用餐时间</span>
</div>
<div class="itemCon">
<ul class="listStyle">
<li class="clearfix">
<span>排队</span>
<span><strong>5</strong>分钟</span>
</li>
<li class="clearfix">
<span>用餐</span>
<span><strong>34</strong>分钟</span>
</li>
</ul>
</div>
</div>
<!--人员信息-->
<div class="item">
<div class="itemTit">
<span class="border-blue">餐厅运作用时</span>
</div>
<div class="itemCon itembg">
<ul class="listStyle">
<li class="clearfix">
<span>每日开业打扫卫生</span>
<span><strong>30</strong>分钟</span>
</li>
<li class="clearfix">
<span>每日备料时间</span>
<span><strong>50</strong>分钟</span>
</li>
<li class="clearfix">
<span>每单制作时间</span>
<span><strong>5</strong>分钟</span>
</li>
<li class="clearfix">
<span>每单等待清理时间</span>
<span><strong>4</strong>分钟</span>
</li>
<li class="clearfix">
<span>每单清理垃圾</span>
<span><strong>5</strong>分钟</span>
</li>
<li class="clearfix">
<span>每日打烊打扫卫生</span>
<span><strong>50</strong>分钟</span>
</li>
</ul>
</div>
</div>
</div>
<div class="center">
<div class="centerWp">
<!--中间大地图 高德-->
<div class="mapContainer">
<div class="btnLayer">
<div class="search">
<div class="searchInner">
<a href="javascript:;" class="searchBtn"><span class="icoSearch"></span></a>
<form class="searchForm">
<button class="icoSearch"></button>
<input type="text" name="" placeholder="请搜索门店">
</form>
</div>
</div>
</div>
<div id="myMap" class="item"></div>
</div>
<!--日订量趋势图-->
<div class="billChart">
<div class="itemTit">
<span class="border-red">日订量趋势图</span>
</div>
<div id="myChart1" ></div>
</div>
</div>
</div>
<div class="right">
<!--总计运单数-->
<div class="item total itembg">
<div class="itemTit">
<span class="border-yellow">总计订单数</span>
</div>
<div class="itemCon">
<div class="totalNum"><strong id="totalNum" total="1234">0</strong><span>单</span></div>
</div>
</div>
<!--实时订单状态-->
<div class="item basicInfo">
<div class="itemTit">
<span class="border-green">实时订单状态</span>
</div>
<div class="itemCon itembg">
<div class="infoPie">
<ul class="clearfix">
<li class="color-green">
<span class="border-green" id="indicator2" total="65">0</span>
<p>已完成</p>
</li>
<li class="color-yellow">
<span class="border-yellow" id="indicator1" total="32">0</span>
<p>正在制作中</p>
</li>
<li class="color-blue">
<span class="border-blue" id="indicator3" total="5">0</span>
<p>排队中</p>
</li>
</ul>
<div id="indicatorContainer"></div>
</div>
</div>
</div>
<!--订单列表-->
<div class="item basicInfo" >
<div class="itemTit">
<span class="border-blue">订单列表</span>
</div>
<div class="itemCon itembg" id="vue_app">
<dv-scroll-board :config="config" style="height:220px"/>
</div>
</div>
</div>
</div>
<!--Main End!-->
</div>
</body>
2. 前端JS - echarts图表
function init_echart_bar_ROA(container) {
var chartDom = document.getElementById(container);
var myChart = echarts.init(chartDom, window.gTheme);
var option;
option = {
title: {
// text: "资产负债率",
//top: "5%",
//left: "2%",
textStyle: {
// color: "#00ffff",
fontSize: "16",
},
},
grid: {
left: "3%",
right: "15%",
bottom: "10%",
top: "20%",
containLabel: true,
},
tooltip: {
trigger: "item",
formatter: "{b}日: {c} 亿元",
position: function (p) {
//其中p为当前鼠标的位置
return [p[0] + 10, p[1] - 10];
},
},
xAxis: {
name: "日期",
type: "category",
nameTextStyle: {
color: "rgba(255,255,255,.8)",
fontSize: 12,
},
data: [],
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.8)",
fontSize: 14,
},
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
yAxis: {
name: "%",
type: "value",
min: 0,
max: 100,
nameTextStyle: {
color: "rgba(255,255,255,.8)",
fontSize: 12,
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.8)",
fontSize: 14,
},
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
series: [
{
data: [],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
],
};
option && myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
3. 前端JS - 数据定时更新控制
支持在每个echarts图表中独立控制定时更新的间隔。
var container = "container_sale";
init_echart_bar_ROA(container);
// 定时1s执行数据更新函数
setInterval(function () {
async_echart_bar_ROA(container, path_bar_ROA + "bar_ROA.json");
}, 1000);
4. 前端高德地图
//高德地图
var myMap = new AMap.Map('myMap',{
resizeEnable: true,
zoom: 14,
mapStyle: 'amap://styles/darkblue',
center: [113.752171,23.068716],
});
var point = [
[113.752171,23.068716],
[113.759037,23.072046],
[113.73788,23.061257]
]
var maker;
for (var i = 0; i < point.length; i += 1) {
var marker = new AMap.Marker({
position: point[i],
map: myMap,
icon:'images/s_ico.png',
});
marker.content='<p>炸鸡汉堡 - 麻涌分店</p>'+
'<p>好评率：95%</p>'+
'<p>诚信经营：10年</p>';
marker.on('click', markerClick);
//map.setFitView();
}
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(16, -36)
});后端 Python Flask 代码
app = Flask(__name__, static_folder="static", template_folder="template")
@app.route('/')
def index():
return redirect('/static/index.html')
# 主程序在这里
if __name__ == "__main__":
a = threading.Thread(target=loop)
a.start()
# 开启 flask 服务
app.run(host='127.0.0.1', port=80, debug=True)
四、运行效果
五、更多案例
YYDatav的数据可视化大屏《精彩案例汇总》（Python&Echarts源码）_YYDataV的博客-CSDN博客
【工厂扫码打印&扫码装箱&错误追溯系统】完整案例详解（Python&PyQt 源码&Mysql数据库）_YYDataV数据可视化的博客-CSDN博客_pyqt案例
感谢开源分享的前端代码。
六、源码下载
36源码数据可视化：基于 Echarts + Python 动态实时大屏 - 连锁餐饮店订单数据看板.zip
https://download.csdn.net/download/lildkdkdkjf/87513373
4091
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
