【Html模板】电商运营可视化大屏模板 Excel存储 + 一键导出（已上线-可预览）

目录

• • 前言
  • 项目概览
  • 目录结构
  • 伪数据生成设计
  • 看板页面设计
  • 导出与存储功能
  • 快速启动与预览
  • 数据字典（核心字段）
  • 定制建议
  • 常见问题
  • 总结

专栏导读

🌸 欢迎来到Python办公自动化专栏---Python处理办公问题，解放您的双手

🏳️‍🌈 个人博客主页：请点击------> 个人的博客主页 求收藏

🏳️‍🌈 Github主页：请点击------> Github主页 求Star⭐

🏳️‍🌈 知乎主页：请点击------> 知乎主页 求关注

🏳️‍🌈 CSDN博客主页：请点击------> CSDN的博客主页 求关注

👍 该系列文章专栏：请点击------>Python办公自动化专栏 求订阅

🕷 此外还有爬虫专栏：请点击------>Python爬虫基础专栏 求订阅

📕 此外还有python基础专栏：请点击------>Python基础学习专栏 求订阅

文章作者技术和水平有限，如果文中出现错误，希望大家能指正🙏

❤️ 欢迎各位佬关注！ ❤️

前言

本文记录如何在无构建工具、仅依赖浏览器与 PowerShell 的环境下，快速搭建一个"电商运营可视化大屏"。内容涵盖伪造电商后台数据、图表大屏搭建、Excel/JSON 导出，以及将 Excel 存到本地服务器。

点我可进行线上预览
点我可进行线上预览
点我可进行线上预览

项目概览

• 可视化内容：GMV 趋势、品类销售额、支付方式分布、Top 商品、地区销售额、转化率仪表盘、最近订单表格。
• 数据能力：前端生成近 180 天的订单与聚合统计；支持一键导出 Excel、多 Sheet；支持下载 JSON；支持 POST 到服务器保存 Excel。
• 技术栈：
  • 前端：原生 HTML/CSS/JS + ECharts + dayjs + xlsx(SheetJS)
  • 服务：PowerShell HttpListener 充当轻量静态服务器与保存接口

目录结构

├── index.html           # 页面骨架与按钮
├── assets/styles.css    # 暗色主题与大屏布局样式
├── data/fake-data.js    # 伪数据生成（订单/聚合）
├── app.js               # 渲染图表、表格、导出与保存逻辑
└── tools/serve.ps1      # 轻量静态服务器 + 保存Excel接口

伪数据生成设计

• 品类与价格区间：为不同品类设定基础价格区间与权重（如手机、电脑、家电等）。
• 订单生成：
  • 时间跨度：近 180 天，以天为单位。
  • 每日模拟访问量、订单数（周末加权），并逐条生成订单明细：数量、折扣、支付方式、渠道、设备、省份与状态。
• 聚合指标：每日GMV、订单数、访问量、退款率；同时汇总品类销售额、支付方式分布、地区销售额、商品销售额排行与 KPI。

核心生成流程（节选）：

const days = 180;
const start = dayjs().startOf('day').subtract(days, 'day');
for (let d = 0; d < days; d++) {
  const date = start.add(d, 'day');
  const ordersCount = randInt(180, 520);
  // 循环生成订单，累计 dailyRevenue / 分类 / 地区 / 支付分布...
}
return { kpis, orders, dailySummary, categorySales, paymentDistribution, regionSales, topProducts, products };

看板页面设计

• Header：标题、当前时间、按钮（导出 Excel、保存到服务器、下载 JSON）。
• KPI 区：GMV、订单数、客单价、退款率、总访问量、转化率。
• Charts：
  • 折线：GMV趋势
  • 柱状：品类销售额、地区销售额(Top10)、Top商品(横向)
  • 饼图：支付方式分布
  • 仪表盘：整体转化率
• 表格：最近 200 条订单明细（订单号、日期、省份、品类、商品、金额、支付方式、状态）。

导出与存储功能

• 浏览器导出 Excel：

const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, XLSX.utils.json_to_sheet(data.orders), 'Orders');
// ... 追加 DailySummary / CategorySales / Products
XLSX.writeFile(wb, '电商后台数据.xlsx');

• 下载 JSON：将数据对象序列化为 Blob，触发下载。
• 保存到服务器（POST 到 /save-excel）：

const payload = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
await fetch(`/save-excel?name=${encodeURIComponent('电商后台数据.xlsx')}`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' },
  body: payload
});

服务端 tools/serve.ps1 处理逻辑（节选）：

if ($req.HttpMethod -eq 'POST' -and $path -eq 'save-excel') {
  $outDir = Join-Path $Root 'exports'
  if (-not (Test-Path $outDir)) { New-Item -ItemType Directory -Path $outDir | Out-Null }
  $outFile = Join-Path $outDir $name
  $req.InputStream.CopyTo($ms)
  [System.IO.File]::WriteAllBytes($outFile, $ms.ToArray())
}

快速启动与预览

• 启动静态服务器（当前进程临时放宽脚本执行策略）：

  Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
  .\n tools\serve.ps1 -Port 8081 -Root .

• 打开浏览器访问：http://localhost:8081/

• 点击"保存Excel到服务器"，会在 exports/电商后台数据.xlsx 生成文件。

如遇端口占用，切换端口：

.
  tools\serve.ps1 -Port 8090 -Root .

数据字典（核心字段）

• kpis：GMV、订单数、平均客单价、退款率、总访问量、转化率
• orders：orderId、orderDate、province、category、productName、unitPrice、quantity、discount、totalAmount、paymentMethod、channel、device、status
• dailySummary：date、revenue、orders、visits、conversions、refundRate
• categorySales：category、revenue
• paymentDistribution：method、count
• regionSales：province、revenue
• topProducts：productName、revenue

定制建议

• 命名与版本：保存文件名改为带时间戳，避免覆盖：

const name = `电商后台数据_${dayjs().format('YYYY-MM-DD_HH-mm-ss')}.xlsx`;

• 图表增强：加入时段（小时）分析、设备/渠道联动、地图可视化、自动轮播。
• 真实数据接入：改造为前端读取后端 API 或直接读取后台 Excel/CSV；可以用 Node/Python 提供 REST 服务。
• 大屏适配：针对 1920×1080、2K、4K 自适配布局与字体，加入全屏模式与轮播间隔配置。

常见问题

• npm 未安装：本项目已采用纯静态页面，避免构建依赖。
• PowerShell 禁止脚本执行：在当前进程临时放宽策略：Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass。
• 端口占用：修改 serve.ps1 启动端口，或结束占用进程后重试。

总结

这套实现以"低依赖、强可视化、易扩展"为目标：用最少的工具快速搭建一个可用于演示与原型验证的电商运营大屏。后续可以平滑接入真实数据源、添加更多业务维度与交互，快速演进为生产级的监控与分析看板。

结尾

希望对初学者有帮助；致力于办公自动化的小小程序员一枚

希望能得到大家的【❤️一个免费关注❤️】感谢！

求个 🤞 关注 🤞 +❤️ 喜欢 ❤️ +👍 收藏 👍

此外还有办公自动化专栏，欢迎大家订阅：Python办公自动化专栏

此外还有爬虫专栏，欢迎大家订阅：Python爬虫基础专栏

此外还有Python基础专栏，欢迎大家订阅：Python基础学习专栏