12个炫酷的大屏可视化开源项目，太高级了！

推荐的12个可视化大屏项目，用来学习或者毕设亦或者参考都是非常不错滴，值得大家参考学习。

全是干货，点赞收藏一下！

1、Vue+threejs的数据可视化

github.com/fh332393900/

在线预览：stevenfeng.cn/threejs-d

2、大屏展示模版

gitee.com/lvyeyou/DaShu

包含智慧交通、智慧城市、智慧政务、智慧物流、智慧电商…

效果截图：

3、PPTX

github.com/MrXujiang/pp

基于web的可视化PPT设计器。

目前开源协议友好，协议为：Apache-2.0 license。大家可以基于它进行二次扩展开发，实现自己企业级在线PPT编辑器。

4、74套大屏HTML模板

gitee.com/52itstyle/vis

74套大数据可视化大屏模版，来源于网络收集

效果图：

5、react-big-screen

gitee.com/MTrun/react-b

一个基于 React、Dva、DataV、ECharts 框架的 ” 数据大屏项目 “。支持数据动态刷新渲染、屏幕适配、数据请求模拟、局部样式、图表自由替换/复用等功能。

项目界面图：

文件目录：

Project
├── mock 模拟数据
├── src
│  │  ├── assets 静态资源
│  │  ├── components 各个模块组件
│  │  ├── models Dva模型管理
│  │  ├── routes 路由主界面定义
│  │  ├── services 异步获取函数
│  │  ├── style 全局样式
│  │  └── utils 工具函数
│  │
│  ├── index.js 主函数文件
│  └── router.jsx 路由定义文件
│
└── .roadhogrc.mock.js 导出模拟数据

6、big-screen-vue-datav

gitee.com/MTrun/big-scr

基于 vue、datav、Echart 框架的大数据可视化（大屏展示）模板，提供数据动态刷新渲染、屏幕适应、内部图表自由替换、Mixins注入等功能，持续更新….

项目展示：

项目的基准尺寸是 1920px*1080px，所以支持同比例屏幕 100% 填充，如果非同比例则会自动计算比例居中填充，不足的部分则留白。

7、V6.Dooring可视化大屏编辑器

github.com/MrXujiang/v6

v6.dooring 采用了前沿的 Web 技术栈，结合 Ant Design 等优秀的 UI 组件库，构建了一个高效、灵活的可视化编辑引擎。

其底层的可扩展架构，使得组件的拖拽、配置等操作流畅无阻，同时支持动态数据绑定、动画效果以及响应式布局，确保大屏在不同设备上都能完美呈现。

动态渲染器负责根据用户的操作和配置，实时渲染出可视化大屏。当用户调整组件的属性、位置或数据时，动态渲染器能够迅速做出响应，更新大屏的展示效果，实现即见即所得的编辑体验。

8、es-big-screen

github.com/vangleer/es-

es-big-screen是一个大屏可视化项目模板，项目架构基于Vue 3+Echarts+高德地图+Pinia。

提供了如下功能：

  • 大屏适配
  • 图表组件(Echarts)封装
  • 高德地图组件封装
  • 拖拽布局
  • 入场动画
  • 无缝滚动

9、Vue大数据可视化（2D）

github.com/bym110/vue-e

在线预览：bym110.github.io/vue-ec

三个大屏模板 样式还是比较全的 包括世界地图、中国地图、canvas转盘等。

10、Vue风力发电机监控平台（3D）

github.com/fengtianxi00

在线预览：大型风力发电机监控平台

一个大型涡轮扇叶风力发电机数据大屏案例。

目前还在实时更新中，更新日志：

v3.0.1

  • 对字体文件进行分包,显著提升大屏加载速度
  • 新增设备的outline,鼠标拾取高亮
  • 新增设备信息面板
  • 对项目打包资源进行压缩
  • 对项目代码结构进行简化
  • 对项目界面进行优化
  • 优化设备的拆解和组装动画

v3.0.0

  • 对项目界面进行了重构
  • 优化部分代码并修复了一些 bug
  • 增加风机部件的分解和组装功能
  • 加入代码风格检查

v2.0.0

  • 使用vue3/ts/vite重构项目
  • 添加了风机平台的光线动效
  • 风机零部件的高亮拾取

v1.0.0

  • 风机零部件的状态绑定
  • 风机偏航角数据绑定

11、Vue+Cesium的数字城市项目（3D）

gitee.com/hawk86104/vue

在线预览：http://map.217dan.com/addons/cesiummapv

后台地址: map.217dan.com/aeSAZtOfuN.php

用户名:test 密码:12345678

效果图展示：

12、Vue数据可视化大屏

github.com/bin-zhi/vue2

基于vue2+vuex+router+echarts的数据可视化大屏，使用缩放进行了屏幕的适配。用于vue2+Datv+echarts,内部图标以进行封装，可以直接传入数据使用。

在线地址： https://my-bin.github.io/vue2-visualization-LargeScreen/dist

配备话大屏自适应，利用与缩放比例进行计算，可试用用不同屏幕，解决了适配问题。

最后：

这12个大屏展示的开源项目，干货确实多。

如有需求，点赞记录一下！