在线演示地址(需科学上网):knight-l.github.io/datav/
github 地址(需科学上网):github.com/knight-L/sc…
功能特性
- 3D 地图可视化: 基于 Three.js 的 3D 地图渲染,轮廓飞线动画效果,侧边扫光视觉效果
- 省级地图展示: 四川省地理轮廓精确呈现
- 多图表联动: 柱状图、折线图等多种数据可视化形式
- 响应式设计: 支持多种屏幕尺寸自适应
- 实时调试面板: 使用 Leva 实现参数实时调整
技术栈
本项目是一个基于现代 Web 技术的数据可视化大屏应用,主要技术栈包括:
- 核心框架: React 19 + TypeScript
- 构建工具: Vite (Rolldown 版本)
- 3D 可视化: Three.js + @react-three/fiber + @react-three/drei
- 数据可视化: ECharts
- 地理数据处理: D3-geo + topojson-client
- 动画库: GSAP
- UI 库: Styled-components
- 调试工具: Leva
- 自适应布局: autofit.js