效果图展示
动态效果演示
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
<script type="text/javascript">
$('#loader').shCircleLoader({color: "#00deff"});
</script>
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>'+
'好评率：95%
'+
'诚信经营：10年
';
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