150 lines
3.2 KiB
Markdown
150 lines
3.2 KiB
Markdown
|
# 数据大屏 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. 安装依赖
|
||
|
|
|
||
|
|
```bash
|
||
|
|
cd react-app
|
||
|
|
npm install
|
||
|
|
```
|
||
|
|
|
||
|
|
### 2. 启动开发服务器
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run dev
|
||
|
|
```
|
||
|
|
|
||
|
|
浏览器会自动打开 `http://localhost:3001`
|
||
|
|
|
||
|
|
### 3. 构建生产版本
|
||
|
|
|
||
|
|
```bash
|
||
|
|
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` 函数中修改：
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
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返回格式
|
||
|
|
|
||
|
|
```json
|
||
|
|
{
|
||
|
|
"target": 3500,
|
||
|
|
"actual": 2750
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### 排名数据格式
|
||
|
|
|
||
|
|
在 `GroupRanking.jsx` 和 `PersonRanking.jsx` 中修改数据：
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
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 |
|
||
|
|
| 学习曲线 | 中等 | 较低 |
|
||
|
|
| 生态成熟度 | 非常成熟 | 快速发展 |
|