运营数据驾驶舱

> 个人实践项目 | 1 个项目

DESCRIPTION.md

运营数据驾驶舱是一个模拟真实电商/交易系统的数据可视化看板。采用 Next.js 15 + React 19 + ECharts 技术栈，实现了统一筛选系统、KPI 汇总、趋势/结构分析，以及点击下钻到订单明细等核心能力。支持 URL 参数同步，便于分享和复现分析状态。

目的

设计一个真实可用的数据看板架构
前端状态管理与 URL 同步
ECharts 交互和品质优化的通用模式
实现可维护的单元测试

界面

核心亮点

技术栈

Next.js 15（App Router）+ React 19 + TypeScript
ECharts 通过自定义 hook 封装，解耦实例与事件
beaver-ui 提供筛选、抽屉、表格等基础组件

功能完整性

多维筛选系统：时间、渠道、地区、订单状态四维度联动
KPI 汇总：GMV、订单数、退款率等关键指标 + 上期同比
可视化分析：趋势折线图（双 Y 轴）、渠道堆叠柱图
智能下钻：点击图表即可查看该时间段订单明细，支持搜索和分页

工程化亮点

两阶段筛选：草稿态编辑 + 提交态应用，避免频繁重算
URL 双向同步：筛选条件与 querystring 同步，支持链接分享和状态复现
统一边界态：loading/empty/error 由卡片容器统一处理，提升用户体验
最小化单测：使用 Vitest 覆盖关键派生逻辑

TECH_STACK.json

TypeScriptReactNext.jsEcharts

返回 GitHub

META.yml

分类:数据可视化

创建:2026-02-26

更新:2026-02-26

精选:NO

# 以工程化视角梳理元数据，保持信息原子性与可演化性。

STRUCTURE.json

{ "id": "cmm39f9fg0002ld048yvcjdab", "name": "运营数据驾驶舱", "tags": ["TypeScript", "React", "Next.js", "Echarts"], "featured": false, "category": "数据可视化" }