# sc-datav-main

**Repository Path**: njd0608/sc-datav-main

## Basic Information

- **Project Name**: sc-datav-main
- **Description**: 3d大屏
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-14
- **Last Updated**: 2026-07-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
  <h1>数据可视化大屏</h1>
  <p>基于 Three.js + React 19 + ECharts 的 3D 地图可视化大屏项目</p>
  <p>包含 3D 地图渲染、轮廓飞线、侧边扫光、多图表联动等丰富功能</p>

<p>
    <a href="https://github.com/knight-L/sc-datav/pulls">
      <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome">
    </a>
    <a href="https://react.dev/">
      <img src="https://img.shields.io/badge/React-19.1.1-61dafb?style=flat-square&logo=react" alt="React">
    </a>
    <a href="https://threejs.org/">
      <img src="https://img.shields.io/badge/Three.js-0.181.2-black?style=flat-square&logo=three.js" alt="Three.js">
    </a>
    <a href="https://www.typescriptlang.org/">
      <img src="https://img.shields.io/badge/TypeScript-5.9.3-3178c6?style=flat-square&logo=typescript" alt="TypeScript">
    </a>
    <a href="https://github.com/knight-L/datav/stargazers">
      <img src="https://img.shields.io/github/stars/knight-L/datav?style=flat-square" alt="GitHub stars">
    </a>
    <a href="https://github.com/knight-L/datav/network/members">
      <img src="https://img.shields.io/github/forks/knight-L/datav?style=flat-square" alt="GitHub forks">
    </a>
  </p>
</div>

## 预览

南通新能源运营监控平台 — 3D 地图数据可视化大屏。

## 地图轮廓贴图下载工具

[https://github.com/knight-L/sat-hunter](https://github.com/knight-L/sat-hunter)

## 功能特性

1. **3D 地图可视化**: 基于 Three.js 的 3D 地图渲染，轮廓飞线动画效果，侧边扫光视觉效果
2. **市级地图展示**: 南通市及下辖区县地理轮廓精确呈现
3. **多图表联动**: 柱状图、折线图等多种数据可视化形式
4. **响应式设计**: 支持多种屏幕尺寸自适应
5. **实时调试面板**: 使用 Leva 实现参数实时调整

## 技术栈

本项目是一个基于现代 Web 技术的数据可视化大屏应用，主要技术栈包括：

- **核心框架**: React 19 + TypeScript
- **构建工具**: Vite (Rolldown 版本)
- **3D 可视化**: Three.js + @react-three/fiber + @react-three/drei
- **数据可视化**: ECharts
- **地理数据处理**: D3-geo
- **动画库**: GSAP
- **样式库**: Styled-components
- **调试工具**: Leva
- **自适应布局**: autofit.js

## 目录结构

```
src/
├── assets/             # 静态资源文件
│   ├── nantong.json         # 南通市区县地理数据
│   └── nantong_outline.json # 南通市轮廓数据
├── components/         # 通用组件
│   ├── chart.tsx       # 图表组件
│   └── seamVirtualScroll.tsx # 虚拟滚动组件
├── hooks/              # 自定义Hooks
├── pages/OperationsDashboard/ # 运营监控大屏页面
│   ├── index.tsx       # 页面入口
│   ├── dashboard.tsx   # 页面布局
│   ├── panel/          # 侧边面板与图表
│   │   ├── headder.tsx # 顶部标题与导航
│   │   ├── chart1.tsx  # 发电汇总
│   │   ├── chart2.tsx  # 用电量预测
│   │   ├── chart3.tsx  # 上半年发电情况
│   │   ├── chart4.tsx  # 电网设备数量
│   │   ├── chart5.tsx  # 用电大市 TOP5
│   │   └── chart6.tsx  # 故障异常
│   └── map/            # 3D 地图组件
└── App.tsx             # 应用根组件
```

## 开发指南

### 环境要求

- Node.js >= 18
- PNPM >= 8

### 安装依赖

```bash
pnpm install
```

### 开发运行

```bash
# 启动开发服务器
pnpm dev
```

### 构建部署

```bash
# 构建生产版本
pnpm build

# 预览构建结果
pnpm preview
```

### Docker 部署

```bash
# 构建并后台启动，对外端口固定为 9502
docker compose up -d --build

# 浏览器访问
# http://服务器IP:9502/sc-datav/

# 查看运行日志
docker compose logs -f

# 停止服务
docker compose down
```

也可以单独构建和运行镜像：

```bash
docker build -t sc-datav:latest .
docker run -d --name sc-datav --restart unless-stopped -p 9502:80 sc-datav:latest
```