# big-screen

**Repository Path**: wo1233/big-screen

## Basic Information

- **Project Name**: big-screen
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-29
- **Last Updated**: 2025-06-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 大屏数据可视化项目

这是一个基于 React + TypeScript + ECharts 的大屏数据可视化项目，展示了一个包含5个图表的数据大屏。

## 功能特点

- 左上角：趋势分析折线图
- 左下角：实时监控折线图
- 中间：香港3D地图（18个区域）
- 右上角：数据统计柱状图
- 右下角：对比分析柱状图

## 技术栈

- React 18
- TypeScript
- ECharts + ECharts-for-React
- ECharts-GL（3D地图）
- Styled-components
- Ant Design

## 开始使用

1. 安装依赖：
```bash
npm install
```

2. 启动开发服务器：
```bash
npm start
```

3. 构建生产版本：
```bash
npm run build
```

## 项目结构

```
src/
  ├── components/          # 图表组件
  │   ├── LineChart.tsx    # 左上角折线图
  │   ├── LineChart2.tsx   # 左下角折线图
  │   ├── BarChart.tsx     # 右上角柱状图
  │   ├── BarChart2.tsx    # 右下角柱状图
  │   └── HongKongMap.tsx  # 香港3D地图
  ├── styles/              # 样式文件
  │   ├── GlobalStyle.ts   # 全局样式
  │   └── Layout.ts        # 布局样式
  ├── App.tsx             # 主应用组件
  └── index.tsx           # 入口文件
```

## 注意事项

1. 香港地图数据来自阿里云数据可视化服务
2. 所有图表都支持响应式布局
3. 地图支持3D旋转和缩放
4. 所有图表都支持暗色主题