# E-commerce data screen

**Repository Path**: doublecc/e-commerce-data-screen

## Basic Information

- **Project Name**: E-commerce data screen
- **Description**: 一个现代化、科技感十足的电商数据可视化大屏系统，采用 Vue 3 + TypeScript + ECharts + Three.js 构建，支持实时数据、3D可视化、动画特效和响应式布局。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-07-24
- **Last Updated**: 2025-07-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🚀 智慧电商数据大屏

一个现代化、科技感十足的电商数据可视化大屏系统，采用 Vue 3 + TypeScript + ECharts + Three.js 构建，支持实时数据、3D可视化、动画特效和响应式布局。

![License](https://img.shields.io/badge/license-MIT-blue.svg)
![Vue](https://img.shields.io/badge/Vue-3.x-green.svg)
![Node](https://img.shields.io/badge/Node-%3E%3D16-green.svg)

## ✨ 项目特性• 3D粒子背景，科技感十足• 实时核心指标卡片，数字滚动动画• 多维度数据可视化（折线、柱状、饼图、3D图等）• 实时地图，动态用户分布• 热销商品排行、用户活跃度、销售趋势等多场景分析• 动画丰富，GSAP/CountUp.js/CSS3• 响应式设计，适配大屏/PC/移动端• 可对接真实后端API，支持mock和动态切换

## 🛠️ 技术栈• Vue 3.x + Vite + TypeScript• Element Plus（UI组件库）• ECharts 5.x（数据可视化）• Three.js（3D粒子背景）• GSAP/CountUp.js（动画）• Axios（网络请求）• 支持ESLint/Prettier规范


### 🎨 现代化界面设计
- **3D粒子背景**：基于 Three.js 的动态3D粒子效果
- **毛玻璃效果**：现代化的背景虚化和透明效果
- **流光边框**：动态边框动画效果
- **渐变配色**：科技蓝色主题配色方案

### 📊 丰富的数据可视化
- **实时数据卡片**：带有数字滚动动画的核心指标展示
- **3D图表**：支持3D柱状图和曲面图的销售数据分析
- **实时地图**：动态效果的用户分布地图
- **多样图表**：折线图、饼图、柱状图等多种图表类型

### 🎬 动画效果
- **GSAP动画**：专业级的页面进入动画
- **数字滚动**：CountUp.js 数字递增动画
- **CSS3动画**：丰富的CSS3过渡和关键帧动画
- **交互反馈**：鼠标悬停和点击的视觉反馈

### 📱 响应式设计
- **自适应布局**：支持不同屏幕尺寸的适配
- **网格系统**：灵活的CSS Grid布局
- **移动端优化**：移动设备的特殊优化

## 🛠️ 技术栈

### 前端框架
- **Vue 3.5** - 渐进式JavaScript框架
- **Vue Router 4** - 官方路由管理器
- **Vite 6.3** - 下一代前端构建工具

### UI组件库
- **Element Plus 2.10** - 基于Vue 3的组件库
- **Animate.css 4.1** - CSS3动画库

### 数据可视化
- **ECharts 5.4** - Apache开源可视化图表库
- **ECharts GL 2.0** - ECharts的3D扩展
- **ECharts WordCloud** - 词云图扩展

### 动画库
- **GSAP 3.12** - 专业级JavaScript动画库
- **CountUp.js 2.8** - 数字滚动动画
- **Three.js 0.159** - 3D图形库

### 网络请求
- **Axios 1.9** - Promise based HTTP client

## 🚀 快速开始

### 环境要求
- Node.js >= 16.0.0
- npm >= 7.0.0

### 安装依赖
```bash
npm install
```

### 启动开发服务器
```bash
npm run dev
```

### 构建生产版本
```bash
npm run build
```

### 预览生产版本
```bash
npm run preview
```

## 📁 项目结构

```
ecommerce-dashboard/
├── src/
│   ├── components/          # 可复用组件
│   │   ├── AnimatedCounter.vue    # 数字滚动动画
│   │   ├── DataCard.vue          # 数据展示卡片
│   │   ├── ParticleBackground.vue # 3D粒子背景
│   │   ├── ProgressBar.vue       # 进度条组件
│   │   ├── ProgressCircle.vue    # 环形进度条
│   │   ├── RealTimeMap.vue       # 实时地图
│   │   ├── Sales3DChart.vue      # 3D销售图表
│   │   └── SalesAmount3D.vue     # 3D销售额组件
│   ├── router/              # 路由配置
│   │   └── index.js
│   ├── views/              # 页面组件
│   │   └── Home.vue        # 主页面
│   ├── mock/               # 模拟数据
│   ├── App.vue             # 根组件
│   └── main.js            # 入口文件
├── public/                 # 静态资源
├── package.json           # 项目配置
├── vite.config.js        # Vite配置
└── README.md             # 项目说明
```

## 🎯 核心功能

### 1. 核心指标监控
- 今日销售额（实时更新）
- 订单数量统计
- 活跃用户数量
- 转化率分析
- 客单价计算

### 2. 数据可视化分析
- **销售趋势分析**：24小时销售数据趋势
- **商品分类占比**：环形图展示商品分布
- **用户活跃度**：一周用户活跃情况
- **热销商品TOP10**：排行榜展示
- **实时用户分布**：地图可视化

### 3. 3D数据展示
- **3D柱状图**：立体化的销售数据展示
- **3D曲面图**：平滑的数据变化趋势
- **动态切换**：实时切换不同的3D视图

### 4. 实时数据流
- PV/UV 统计
- 订单实时监控
- 支付金额统计
- 退款率监控

## 🎨 设计理念

### 色彩方案
- **主色调**：科技蓝 (#00f0ff)
- **辅助色**：青绿色 (#00ff9d)
- **警告色**：橙色 (#ffa502)
- **危险色**：红色 (#ff4757)
- **成功色**：绿色 (#7bed9f)

### 字体使用
- **主字体**：系统默认字体栈
- **数字字体**：等宽字体，保证数字对齐
- **图标字体**：Element Plus Icons

### 动画设计
- **进入动画**：从下往上的滑入效果
- **悬停动画**：轻微的缩放和发光效果
- **数据动画**：平滑的数字递增动画
- **背景动画**：粒子的缓慢移动和呼吸效果

## 🔧 自定义配置

### 修改主题色彩
在 `src/main.js` 中修改 CSS 变量：
```css
:root {
  --primary-color: #00f0ff;
  --secondary-color: #00ff9d;
  --warning-color: #ffa502;
  --danger-color: #ff4757;
  --success-color: #7bed9f;
}
```

### 添加新的图表
1. 在 `src/components/` 中创建新的图表组件
2. 在 `src/views/Home.vue` 中引入和使用
3. 配置相应的数据源和样式

### 修改数据源
在 `src/mock/` 目录下创建模拟数据，或者配置真实的API接口。

## 🌟 最佳实践

### 性能优化
- 使用 Vue 3 的 Composition API
- ECharts 图表的懒加载和按需引入
- 图片和资源的优化压缩
- 代码分割和懒加载

### 可维护性
- 组件化开发，提高代码复用性
- 统一的代码风格和命名规范
- 完善的注释和文档

### 用户体验
- 流畅的动画过渡效果
- 响应式设计，适配多种设备
- 无障碍访问支持

## 📄 许可证

MIT License - 详见 [LICENSE](LICENSE) 文件

## 🤝 贡献

欢迎提交 Issues 和 Pull Requests！

## 📞 联系方式

如有问题或建议，请联系项目维护者。

---

**⭐ 如果这个项目对你有帮助，请给个星标支持一下！**