# 数据大屏

**Repository Path**: yan_jidao/data-dashboard

## Basic Information

- **Project Name**: 数据大屏
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-01
- **Last Updated**: 2026-06-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 福建省新能源汽车数据大屏

基于福建省新能源汽车销售数据集（30,000 条记录 / 63 个字段），构建的 1920×1080 全屏数据可视化大屏。

## 技术栈

| 层级 | 技术 | 用途 |
|------|------|------|
| 数据预处理 | Python 3 + pandas | CSV 读取、分组聚合、JSON 输出 |
| 图表渲染 | ECharts 5 (CDN) | 15 张图表 + 地图热力 + 自动轮播 |
| 前端 | 纯 HTML/CSS/JS | 单文件静态大屏，CSS Grid 布局 |
| 地图 | 阿里 DataV GeoAtlas | 福建九地市 GeoJSON |

选型理由：ECharts 是国内数据大屏领域的事实标准，内置暗色主题、地图注册、动画效果。React/Vue 对纯静态大屏属于过度设计。

## 项目结构

```
数据大屏/
├── data/
│   ├── fujian_nev.csv              # 原始数据 (30K 行 × 63 字段)
│   ├── dashboard_data.js           # 聚合后的图表数据 (23KB, 21 组)
│   ├── fujian_geojson.json         # 福建九地市地图 GeoJSON
│   └── fujian_geojson.js           # 地图 JS 变量 (124KB)
├── data_processor.py               # 数据预处理脚本
├── dashboard/
│   └── index.html                  # 大屏主页面
└── README.md
```

## 数据字段分级

对 63 个字段按大屏实用价值分为四个梯队：

- **第一梯队（核心 KPI）**：monthly_sales, cumulative_sales, market_share, nps_score, user_rating, quality_complaints
- **第二梯队（关键维度）**：city, brand_name, vehicle_type, energy_type, price_range, buyer_age_range 等 14 个
- **第三梯队（深度分析）**：range_km, autonomous_driving_level, charging_station_coverage 等 16 个
- **第四梯队（可忽略）**：record_id, province, top_tags 等 27 个区分度低或难以图表化的字段

## 大屏布局

```
┌──────────────────────────────────────────────────────┐
│  标题栏: 福建省新能源汽车数据监测平台 | 实时时钟 | 数据版本  │
├──────────────────────────────────────────────────────┤
│  累计总销量 │ 市场份额 │ NPS评分 │ 用户评分 │ 投诉总数 │ EV渗透率 │
├────────┬──────────────────────────┬─────────────────┤
│  品牌   │                          │  车型类型饼图     │
│ TOP15  │     福建九地市地图         │  (轿车/SUV/客车)  │
│  柱状图 │     热力填充 (自动轮播)     ├─────────────────┤
│        │  销量→EV渗透率→NPS        │  能源类型玫瑰图   │
│        │                          │  (BEV/PHEV/EREV) │
├────────┴──────────────────────────┴─────────────────┤
│  月度销量趋势折线图               │  价格 × 续航散点气泡图    │
├──────────────────────────────────────────────────────┤
│  用户年龄分布 │ 自动驾驶等级 │ 轮播: 沿海对比/品牌雷达/购车目的 │
└──────────────────────────────────────────────────────┘
```

共计 14 个可视化组件（6 个 KPI 卡片 + 8 张图表 + 地图 3 轮播 + 底部 3 轮播）。

## 快速开始

```bash
# 1. 数据预处理（如果原始 CSV 有更新）
python data_processor.py

# 2. 浏览器打开大屏
# Windows: 直接双击 dashboard/index.html
# 或命令行: start dashboard/index.html
```

> 数据预处理会生成 `data/dashboard_data.js`（图表数据）和 `data/fujian_geojson.js`（地图数据）。

## 方案评审过程

方案经过两轮 subagent 独立审查后修订为 v2：

### 架构审查（code-reviewer）

| 问题 | 风险等级 | 处理方式 |
|------|----------|----------|
| 21 个组件在 1920×1080 下过于拥挤 | 高 | 精简至 14 个 |
| 缺少福建地图组件 | 中 | 引入九地市 GeoJSON 热力地图 |
| 15 张 ECharts 图并发渲染白屏 | 中 | 分批渲染，首屏 6 张 + RAF 延迟渲染 |
| 一次性聚合无法按维度筛选 | 中 | 保留省/市/TopN 三级聚合粒度 |

### 视觉/体验审查（ux-reviewer）

| 问题 | 风险等级 | 处理方式 |
|------|----------|----------|
| 默认 dark 配色偏蓝紫，与新能源不匹配 | 高 | 自定义青绿主题 (#00E5A0 / #0A0E17) |
| 纯黑背景在 LED 屏上发灰 | 高 | 深蓝灰渐变背景 + 装饰边框 |
| 图表类型单一（饼图+柱状图为主） | 中 | 加入散点气泡图、雷达图、南丁格尔玫瑰图 |
| 缺少大屏仪式感元素 | 中 | 添加标题栏、实时时钟、四角科技装饰、扫描线动画 |
| 全静态观感平淡 | 中 | 地图区 20s 自动轮播、底部区 30s 自动轮播 |

## 设计特点

- **科技青绿主题**：背景 #0A0E17 渐变，主色 #00E5A0，适配新能源汽车语义
- **自适应缩放**：body 按视口等比 transform:scale，兼容非标准分辨率
- **动画细节**：扫描线动画、KPI 卡片悬浮效果、Orbitron 等宽数字字体
- **错误兜底**：JS/CSS 加载失败时显示明确错误提示，避免白屏
- **零依赖构建**：ECharts 通过 CDN 引入，项目本身无需 npm install