从零构建电商运营可视化大屏：伪数据生成 + Excel存储 + 一键导出

本文记录如何在无构建工具、仅依赖浏览器与 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。

核心生成流程（节选）：
```js
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 启动端口，或结束占用进程后重试。

总结

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