DataFlow - 数据流转监控平台

项目完成时间：2025.8 - 2025.9

耗时约10日

DataFlow是一个数据流转与监控可视化平台。

项目基于 Vue 3 和 Element Plus 构建，深度集成了 ECharts、echarts-gl 、canvas2D和 D3.js 等多种强大的可视化库，旨在通过直观、动态的界面，清晰地展示复杂的数据链路、用户数据概览以及标识生成与识别的全过程。

✨ 主要功能 (Features)

• 动态数据可视化地图 (首页)

  • 基于 ECharts 和 GeoJSON 实现的中国地图，实时展示跨区域的数据流向。
  • 通过动态飞线和涟漪特效，清晰呈现发送地与接收地的关系。
  • 支持交互式缩放、平移、双击复位以及城市名称搜索高亮。

• 数据/业务流转链路查询

  • 提供结构化的表格来展示所有数据和业务链路。
  • 内置多维度筛选功能（ID、敏感等级、时间等）并集成了分页。

• 数据溯源链条详情

  • 利用 D3.js 绘制分层的力导向图，可视化单个数据的完整溯源路径。
  • 支持节点拖拽、悬停高亮和动态数据包流动动画。

• 用户数据查询与详情

  • 具有赛博朋克风格的沉浸式查询入口，包含酷炫的3D背景地球和加载动画。
  • 查询成功后进入三栏式数据驾驶舱，通过多种图表全方位展示用户数据概览。

• 标识生成与识别可视化

  • 分步式的、可交互的动画系统，完整模拟了“生成数据 -> 过滤 -> 注入标识 -> 识别 -> 接收”的全过程。
  • 通过丰富的粒子动画生动地展示数据块在各个处理阶段的状态变化。

• 数据流动演示

  • 基于 Canvas 2D 绘图的纯粹艺术感粒子流动画，模拟大规模数据的宏观流动，并支持鼠标悬浮交互。

🛠️ 基础工具与技术栈 (Tools & Tech Stack)

• 核心框架：Vue 3、Vue Router
• 开发语言：JavaScript
• UI 组件库：Element Plus
• 可视化与绘图：
  • 图表库：ECharts、echarts-gl
  • 数据驱动绘图：D3.js
  • 原生绘图技术：Canvas 2D API
• 工程化与工具：
  • 构建工具：Vite
  • 包管理器：pnpm
  • 代码规范：ESLint + Prettier
  • 版本控制：Git & GitHub
  • 浏览器调试：Vue Devtools

🚀 快速开始 (Getting Started)

1. 克隆仓库

   git clone git@github.com:fufu39/DataFlow.git

2. 进入项目目录

   cd DataFlow

3. 安装依赖

   pnpm install

4. 运行开发服务器

   pnpm dev

---

本项目仅供课程/科研/个人学习用途，禁止用于商业用途。