智慧物流BI监控大屏！附完整代码+详细解读，新手也能上手
假如你是物流调度中心的负责人，屏幕上实时滚动着几百单物流数据：哪些订单延误了？哪个承运商效率最高？哪个城市的货运量最繁忙？如果你还在用 Excel 查看这些数据，那你真的落后了。
今天，我就带你一步步用 Python 和 Plotly 搭建一套炫酷的中文大屏，可视化每一笔物流数据，让数据“活起来”。
一、数据加载：连接数据库还是模拟数据？
看代码的第一步，就是加载MySQL数据库数据：
def load_data():
try:
conn = pymysql.connect(
host='localhost',
user='root',
password='root',
database='wl202602',
port=3306, charset='utf8mb4'
)
df = pd.read_sql("SELECT * FROM logistics_orders", conn)
conn.close()
-
数据库优先：优先连接 MySQL，读取真实物流订单数据。
2、中文日期处理：通过 strftime('%m月%d日') 生成中文日期，用于图表横轴显示，美观又可读。
二、图表设计：趋势、承运商、延误和城市分布
可视化是大屏的灵魂，代码用 Plotly 来生成 4 个主要图表：
1️⃣ 每日物流吞吐量趋势
trend = df.groupby(['发货日期','中文日期']).size().reset_index(name='count')
fig_trend = go.Figure(go.Scatter(
x=trend['中文日期'], y=trend['count'], fill='tozeroy',
line=dict(color='#00f2fe', width=3),
hovertemplate="日期: %{x}
单量: %{y}
-
用面积图展示每日订单量变化趋势。
-
fill='tozeroy'填充曲线下方区域，视觉冲击力强。 -
中文日期直接显示在横轴，友好可读。
2️⃣ 承运商平均时效对比
carrier = df.groupby('承运商').agg({'实际时效':'mean'}).reset_index()
fig_carrier = go.Figure(go.Bar(
x=carrier['承运商'], y=carrier['实际时效'],
marker=dict(color='#4facfe', line=dict(color='#fff', width=0.5))
))
-
柱状图直观对比顺丰、圆通等承运商的平均时效。
-
用蓝色渐变突出数据重点。
3️⃣ 延误分布
fig_delay = go.Figure(go.Histogram(x=df['延误时长'], marker_color='#f87171'))
-
红色直方图标记延误情况，异常订单一目了然。
4️⃣ 始发城市业务量
city = df['始发城市'].value_counts()
fig_city = go.Figure(go.Bar(x=city.index, y=city.values, marker_color='#fbbf24'))
-
黄色柱状图展示城市分布，调度人员可迅速了解重点城市。
统一布局设计：
def get_layout(title):
return dict(
title=dict(text=title, font=dict(size=18, color='#00f2fe')),
paper_bgcolor="rgba(0,0,0,0)",
plot_bgcolor="rgba(0,0,0,0)",
font=dict(color="#e0e0e0"),
xaxis=dict(gridcolor="#1e293b", tickfont=dict(size=11)),
yaxis=dict(gridcolor="#1e293b")
)
-
统一暗黑主题，字体和网格协调，视觉感舒适。
三、HTML 大屏：侧边栏 + KPI + 跑马灯
代码生成的 HTML 页面集成了：
-
侧边栏导航：总览、承运商对比、趋势分析、延误分布、城市分布。
-
KPI 面板：核心单量、异常订单、平均时效、系统状态。
-
跑马灯表格：实时滚动显示前 30 条异常或重点订单，提升监控感。
-
用 CSS
@keyframes scrollLoop实现无缝滚动效果，避免依赖复杂 JS 插件。
四、前端交互：点击切换视图，图表联动
JavaScript 部分实现：
function switchView(viewId, btn) {
// 按钮高亮
document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
// 显示对应视图
document.querySelectorAll('.content-view').forEach(v => v.classList.remove('active'));
const targetView = document.getElementById('view-' + viewId);
targetView.classList.add('active');
// 动态渲染 Plotly 图表
const chartDiv = targetView.querySelector('.chart-box');
if(chartDiv && chartDiv.id) {
const data = chartsData[chartDiv.id];
Plotly.react(chartDiv.id, data.data, data.layout, {responsive:true});
}
}
-
点击侧边栏切换图表，保证数据交互流畅。
-
Plotly.react动态更新图表，不刷新页面。
五、亮点
-
可复用数据加载函数：数据库或模拟数据都能支持。
-
中文可读日期：更符合大屏场景需求。
-
统一暗黑主题：界面美观，突出数据视觉。
-
实时滚动表格：KPI 和异常单据一目了然。
-
交互式切换图表：轻量 JS 就能实现大屏动态更新。
六、运行方式
python logistics_dashboard.py
-
生成文件
logistics_chinese_v4.html，直接用浏览器打开即可。 -
支持数据库实时拉取。
这份代码展示了一个从数据加载、数据处理到可视化大屏全流程的 Python 实战方案。无论你是数据分析师还是 BI 工程师，都可以在几分钟内搭建一个中文可视化大屏，让物流数据“动”起来，快速发现问题和趋势。
🔮 获取和交流
需要本文源代码和数据集的同学，关注公众号 + 点赞 + 在看 （三连），评论区回复 666，即可获取！
为了能随时获取最新动态，大家可以动动小手将公众号添加到“星标⭐”哦，点赞 + 关注，用时不迷路！！！！
关注公众号：IT小本本 👇
用时不迷路！！
