TOPIC | 莫奈花园风格销售数据大屏实战课件 | Python · Flask · ECharts

技术栈：Python + Pandas + Flask + HTML + CSS + JavaScript + ECharts

INTRO | 课程目标 | 学完你将掌握什么

完成本课程后，你将掌握：

1. 使用 Pandas 生成与聚合模拟业务数据
2. 使用 Flask 搭建后端数据接口（REST API）
3. 使用 HTML/CSS/JavaScript + ECharts 构建数据可视化大屏
4. 实现"莫奈花园"视觉风格：白色卡片、颜色渐变、玻璃质感
5. 掌握大屏常用动效：数字滚动、列表轮播、地图涟漪、进度动画、定时刷新

PART A | 项目结构 | 五个目录各司其职

项目根目录/├── app.py                    # Flask 入口：首页路由 + /api/data 数据接口├── requirements.txt          # 依赖清单（flask、pandas）├── data/│   ├── data.csv              # 模拟销售数据（300 条）│   └── generate_data.py      # 数据生成脚本（random.seed(42) 可复现）├── templates/│   ├── index.html            # 初始首页│   └── dashboard.html        # 数据大屏页面└── static/    ├── css/dashboard.css     # 大屏样式（莫奈花园风格）    └── js/        ├── dashboard.js      # 大屏逻辑（图表 + 动效）        ├── echarts.min.js    # ECharts 5.5.1（本地化，不依赖外网）        └── china.json        # 中国地图 GeoJSON（阿里云 DataV）

开发约定（增量开发模式）：每次只完成当前功能、不提前开发后续内容、不重写可运行代码、代码简单、添加必要注释。

STEP 01 | 生成模拟数据 | Pandas 三段核心逻辑

数据要求

• 300 条服装类销售记录，保存到 data/data.csv
• 字段：日期、省份、产品、渠道、销量、销售额、利润
• 省份覆盖全国 31 个主要省份

数据生成核心逻辑

# 销售额 = 销量 × 单价（单价取产品价格区间随机值）price = random.uniform(low, high)revenue = round(qty * price, 2)# 利润 = 销售额 × 渠道利润率（含 ±3% 浮动）margin = {"电商平台": 0.15, "直播带货": 0.12, "线下门店": 0.30, "批发": 0.08}[channel]profit = round(revenue * random.uniform(margin - 0.03, margin + 0.03), 2)# 导出 utf-8-sig 编码，保证 Excel 打开不乱码df.to_csv("data/data.csv", index=False, encoding="utf-8-sig")

要点：random.seed(42) 固定随机种子，数据可复现；批发渠道单量设为 200~1000，模拟"薄利多销"。

STEP 02 | Flask 后端接口 | 一次请求喂饱全部图表

路由设计

接口聚合逻辑（一次请求返回所有图表数据）

@app.route("/api/data")defapi_data():    df = load_data()                      # 读取 CSV，日期转 datetime# 顶部核心指标（加 ±2% 扰动，模拟实时刷新）    total_revenue = jitter(float(df["销售额"].sum()))    kpi = {"total_revenue": total_revenue, "total_profit": ...,"profit_rate": total_profit / total_revenue * 100, ...}# 月度趋势：按月聚合销售额与利润    monthly = df.groupby(df["日期"].dt.strftime("%Y-%m")).agg(        销售额=("销售额", "sum"), 利润=("利润", "sum"))# 省份聚合：一次 groupby 复用给 地图/占比/热榜/涟漪散点    prov = df.groupby("省份")["销售额"].sum().sort_values(ascending=False)# 利润进度：目标利润 = 总销售额 × 25%# 销售明细：按日期倒序取最近 20 条return jsonify({...})

要点：jitter() 函数给数值加 ±2% 随机扰动，让 30 秒定时刷新时数字"动起来"；省份经纬度字典 PROVINCE_COORD 用于地图涟漪散点定位。

STEP 03 | 前端三栏布局 | 1920×1080 等比缩放

┌─────────────────────────────────────────────────┐│  顶部标题栏（渐变文字标题 + 实时时钟）              │├─────────────────────────────────────────────────┤│  核心指标 KPI 行（6 张玻璃卡片）                   │├──────────┬──────────────────────┬───────────────┤│ 销售明细  │   全国销售分布（地图）  │  地区热榜      ││ (自动滚动)│   + Top6 涟漪散点     │  (自动轮播)    │├──────────┤──────────────────────┼───────────────┤│ 渠道占比  │   月度销售趋势         │  产品排行      ││ (环形图)  │   (双折线渐变面积)     │  (横向条形图)  │├──────────┤                      ├───────────────┤│ 利润进度  │                      │  地区占比      ││ (进度条)  │                      │  (玫瑰图)      │└──────────┴──────────────────────┴───────────────┘

1920×1080 等比缩放适配

// 固定 1920x1080 设计稿，按窗口大小整体 scalefunctionfitScreen() {const scale = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);    screen.style.transform = `translate(-50%, -50%) scale(${scale})`;}

STEP 04 | 莫奈花园视觉风格 | 水彩渐变 + 玻璃卡片

风格三要素

关键样式

.card {background: rgba(255,255,255,.62);   /* 半透明白 */    backdrop-filter: blur(12px);          /* 玻璃模糊 */border: 1px solid rgba(255,255,255,.8);border-radius: 16px;box-shadow: 06px24pxrgba(120,150,170,.14);}

配色灵感取自莫奈《睡莲》：睡莲绿 #7fc8a9、湖水蓝 #a9c8ec、花瓣粉 #f3c1d8、鸢尾紫 #c9b6e4。

STEP 05 | 六大动效实现 | 数字滚动到定时刷新

数字滚动

// easeOutCubic 缓动，从旧值平滑滚到新值functionrollNumber(el, from, to, decimals) {conststep = (now) => {const p = Math.min((now - start) / 1000, 1);const eased = 1 - Math.pow(1 - p, 3);        el.textContent = (from + (to - from) * eased).toLocaleString("zh-CN");if (p < 1) requestAnimationFrame(step);    };requestAnimationFrame(step);}

列表自动轮播（悬停暂停）

// 表体/列表复制一份，位移过半后归零，形成无缝循环tbody.innerHTML = rows + rows;wrap.addEventListener("mouseenter", () => paused = true);   // 悬停暂停wrap.addEventListener("mouseleave", () => paused = false);setInterval(() => {if (paused) return;    offset += 1;if (offset >= half) offset = 0;    tbody.style.transform = `translateY(${-offset}px)`;}, 40);

其余动效速查

STEP 06 | 运行与验证 | 三条命令跑起来

# 1. 安装依赖（PyPI 超时可换阿里云镜像）pip install flask pandas -i https://mirrors.aliyun.com/pypi/simple/# 2. 生成数据（可选，已内置 data.csv）python data/generate_data.py# 3. 启动服务python app.py# 访问 http://127.0.0.1:5000

验证清单：

• 页面、/api/data、全部静态资源返回 200
• 31 省份数据、12 个月趋势、20 条明细正常渲染
• 大屏在浏览器实际运行效果（见下方作业完成证明）

CASE | 作业完成证明 | 1920×1080 实际运行截图

大屏实际运行截图（1920×1080）：

OUTRO | 课程小结 | 四层收获

1. 数据层：Pandas 完成"生成 → 清洗 → 聚合"全流程，一次 groupby 复用于多个图表
2. 接口层：Flask 单接口返回全部图表数据，前端一次 fetch 全量刷新，逻辑简单清晰
3. 展示层：ECharts 五类图表（地图/折线/环形/条形/玫瑰）+ 原生 JS 动效
4. 工程习惯：增量开发、本地化第三方资源、固定随机种子保证可复现