我们做了一个100%开源的数据可视化系统

0 阅读1分钟

TReport 是我们基于 Vue3 做的一套数据可视化系统。

平时做数据大屏、仪表盘、统计报表,甚至活动海报,都可以用它来完成。支持静态数据,也支持通过 API 拉取动态数据。和 Tduck 表单系统是打通的,表单收集到的数据可以直接拿来做可视化分析,不用再来回导出折腾。

前后端代码都是开源的,支持私有化部署。如果你有自己的业务需求,也可以在这个基础上做二次开发。

项目价值

很多团队都有表单、有数据,但最后还是导出 Excel 做统计,做完截图发群里。

TReport 的价值在于,把这些数据直接变成图表、看板和大屏。
数据实时展示、持续更新,而不是一次性的统计结果。

从“收集数据”到“持续可视化”,形成一个完整的数据闭环。

能做什么?

数据大屏设计

支持自定义大屏布局和组件配置,适合:业务数据展示、预约统计展示、销售业绩看板、政务大厅展示,支持拖拽配置,可根据需求自由组合图表组件。

仪表盘设计

适合做部门数据监控、个人工作台、管理驾驶舱等场景。

可以将多个统计模块组合在同一个页面中,形成结构清晰的数据视图。

海报设计

支持将统计结果做成可视化海报,用于活动传播或数据汇报场景。

与 Tduck 表单集成

TReport 可以直接对接 Tduck 表单系统的数据。

表单收集完成后,可以自动推送到可视化系统,实时生成图表或统计结果。

不需要再导出 Excel 手动处理,也不需要额外开发数据对接逻辑。

同步表单字段与存量数据

  1. 进入表单后台,点击数据推送,复制【表单字段同步 API】填入大屏端【表单数据源】中的对应配置入口
  2. 如果需要同步存量数据,复制【表单数据同步 API】填入对应数据源中对应未知(如图)

同步表单增量数据

  • 在填鸭表单后台进入数据推送。
  • 配置一个数据推送地址:例如:report.tduckcloud.com/tduck-api/f…
  • 格式要求:您自行部署的大屏端ip或url+/tduck-api/form/data/sync
  • 选择一个推送事件类型(数据新增时/修改/删除时)

技术栈

后端:SpringBoot、SpringSecurity、MyBatis-Plus、Redis、MySQL

前端:Vue3、Element Plus、Vite、TypeScript、Echarts

采用主流技术栈,结构清晰,方便维护和扩展。

部署方式

支持本地部署和 Docker 快速启动。

基本步骤:

  1. 导入数据库脚本
  2. 修改数据库配置
  3. 启动后端
  4. 启动前端

docker快速启动

docker-compose 部署环境及项目#
1.先安装docker-compose

2.下载 tduck-report-platform源码

3.进入目录下的docker目录

cd docker
docker-compose up -d

4.运行结束 会自动安装mysql mongdb redis以及tduck程序

内存建议不低于4g

默认账号密码 admin/123456

http://localhost:5173

文档正在持续整理中,也欢迎参与完善。

在线预览

体验地址:
report.tduckcloud.com

测试账号:test
密码:12345678

开源说明

项目已在 Gitee 开源,开源地址:gitee.com/TDuckApp/td…

前后端代码均可查看和使用。

如果觉得项目对你有帮助,欢迎 Star 或提交 PR。