sales_data_dashboard/react-app

数据大屏 React 项目

这是使用 React 18 + Vite 重构的数据大屏项目，功能与原HTML版本完全一致。

项目结构

react-app/
├── src/
│   ├── components/
│   │   ├── TopData.jsx         # 顶部数据区域（年度目标、销售额、进度条、季度进度）
│   │   ├── GroupRanking.jsx    # 小组排名组件
│   │   └── PersonRanking.jsx   # 个人排名组件
│   ├── App.jsx                # 主应用组件
│   ├── main.jsx               # 入口文件
│   └── style.css              # 全局样式
├── public/
│   └── img/                   # 图片资源
├── index.html                 # HTML模板
├── package.json              # 项目配置
└── vite.config.js            # Vite配置

安装步骤

1. 安装依赖

cd react-app
npm install

2. 启动开发服务器

npm run dev

浏览器会自动打开 http://localhost:3001

3. 构建生产版本

npm run build

构建产物在 react-app/dist/ 目录

功能特性

✅ 响应式设计

• PC端自动等比例缩放
• 移动端自适应布局
• 支持4K屏幕、普通PC、移动端

✅ 数据展示

• 年度目标和销售额动态加载
• 进度条动画效果
• 季度周数进度显示

✅ 图表功能

• 小组排名柱状图
• 个人排名柱状图（移动端横向布局）
• ECharts响应式图表

✅ 性能优化

• React Hooks (useState, useEffect, useRef)
• 组件化开发
• 防抖处理窗口resize
• 图表自动销毁重建

技术栈

• React 18.2+ (Hooks)
• Vite 5.0+
• ECharts 5.4+
• JavaScript ES6+

对接真实API

在 src/components/TopData.jsx 的 fetchYearData 函数中修改：

const fetchYearData = async () => {
  try {
    const response = await fetch('/api/year-data')
    const data = await response.json()
    return data
  } catch (error) {
    console.error('获取数据失败:', error)
    return { target: 0, actual: 0 }
  }
}

数据格式

API返回格式

{
  "target": 3500,
  "actual": 2750
}

排名数据格式

在 GroupRanking.jsx 和 PersonRanking.jsx 中修改数据：

const groupData = [
  { name: '名称', target: 目标值, actual: 实际值 }
]

React Hooks 使用

• useState: 组件状态管理
• useEffect: 副作用处理（图表初始化、事件监听）
• useRef: DOM引用和图表实例存储
• useCallback: 性能优化（可选）

浏览器支持

• Chrome (推荐)
• Firefox
• Safari
• Edge

注意事项

1. 确保 public/img/ 目录包含所有图片资源
2. PC端缩放范围为 0.6-1.0（缩小不放大）
3. 移动端断点为 768px
4. 图表使用防抖处理resize事件（300ms延迟）
5. React组件使用函数式组件 + Hooks

与Vue版本对比

特性	React版本	Vue版本
状态管理	useState	ref/reactive
副作用	useEffect	onMounted/onUnmounted
DOM引用	useRef	ref
组件定义	函数式组件	setup script
样式处理	CSS Modules/全局CSS	scoped CSS
学习曲线	中等	较低
生态成熟度	非常成熟	快速发展