FlyFish 数据可视化大屏如何快速上手：从部署到拖拽出图

FlyFish 数据可视化大屏如何快速上手：从部署到拖拽出图

【免费下载链接】FlyFishFlyFish is a data visualization coding platform. We can create a data model quickly in a simple way, and quickly generate a set of data visualization solutions by dragging.项目地址: https://gitcode.com/gh_mirrors/fl/FlyFish

凌晨三点机房告警弹出，值班的人却盯着黑屏发呆——不是没有监控，是那块数据可视化大屏上周就该上线、一直卡在排期里。FlyFish（飞鱼）是一个数据可视化编码平台：先用简单方式把数据模型建起来，再靠拖拽拼出一整套大屏方案，让"等排期"变成"自己就能搭"。下面按我实际把它跑起来的顺序，讲清楚它能省掉哪一段、内部怎么分层，以及从 git clone 到在 8089 端口看到第一块屏要经过哪几步。

这张 GIF 是平台的工作台：左边是拼好的大屏，右侧面板在配数据绑定，把查询好的字段映射到图表上——这是 FlyFish 拖拽搭建数据可视化大屏时最常打交道的一步。

它省掉的是哪一段：传统大屏 vs FlyFish

传统做法里，"出一块大屏"要拉上三方：业务方描述要展示什么，数据同学去库表里把指标捞出来，前端再写框架、写图表、做绑定，一个中等复杂度的看板从立项到能看，往往要排进好几个迭代的队列。依赖也堆得高——得会写前端框架、懂数据接口、还清楚图表库，才进得去这个流程。

FlyFish 把中间那段砍掉了大半。业务诉求直接变成一个"项目"，要展示的指标先在数据源里用 SQL 查出来封装成"数据"，前端部分拆成一个个"组件"，拖到画布上再绑数据。真正要写代码的环节，交给内置的在线编辑器完成，而不是要求每个人都熟前端框架。参与角色从"前端+数据+业务"收敛成"会用平台的人"，耗时从"以迭代计"压到"官方示例下数小时能搭出首块屏"这个量级。

技术设计上值得留意的三点

它的单位是"组件"，不是"页面"。组件是最小开发粒度，一个仪表盘、一段进度条、一张地图各是一个组件，大屏就是组件的组合；应用可以是单页，也可以做多页路由。这个拆法意味着同一组件能跨项目复用，而不是每块屏都从零画起。

它不是纯拖拽的黑盒，底层挂着一个在线 code-server。仓库里内置了基于 VS Code 内核的在线编辑器，起在 8081 端口，组件和大屏的细节都能进到真实代码里去改。换句话说，拖拽负责速度和下限，写代码负责上限，两者不互斥。

数据是分两层供的。底层是数据源，README 里写明支持 MySQL 和 Http 这类来源接进来建源；上层是"数据查询"，可以按数据表写 SQL、把结果封装保存，甚至把查到的数据重新组合后再丢给组件直接调用。取数和展示之间隔了一层封装，改指标不用动画布。

拖拽搭建 IT 基础设施监控大屏的完整走读

挑一个最典型的场景讲透：IT 基础设施监控总览。数据从哪来——先把机房、主机的指标表接到 MySQL 数据源，用数据查询按表把 CPU、内存、流量、告警数这些字段查出来，封装成组件可调用的数据。界面怎么搭——新建一个项目代表这次监控需求，在项目里建应用，从组件库把地图、仪表盘、趋势图、告警列表这些拖到画布，逐个绑定上面封装好的数据，调好配色和布局。最终呈现的是一块能 7×24 挂着看的总览屏：中间机房分布，四周实时指标和趋势曲线，异常项高亮出来，值班的人不用再去翻日志。

这是搭出来的总览屏动图，中间是机房分布，两侧是实时指标、趋势和告警，适合常驻大屏做无人值守。

同一套数据源换个布局，就是这块基础监控看板，说明组件复用之后换一屏的代价很低。

业务管理类的看板也是同一套流程：换个数据源、换批组件、重新绑一遍数据就行，不必另起一套。

FlyFish 部署流程：从克隆仓库到 8089 看到页面

🛠️ 我按官方文档手动跑过一遍，顺序大致是这样。先拉代码：

git clone https://gitcode.com/gh_mirrors/fl/FlyFish

然后装基础环境，文档给的是 CentOS 7.6、Node 14.19.3、Nginx 1.20.1、MySQL 5.7.x、JDK 1.8+，外加 pm2、nvm、maven 这几个配套。再分头起服务：前端 lcapWeb 装依赖、打包，用 Nginx 在 8089 上做静态资源和反向代理；后端 flyfishServer 用 Maven 打包，先执行 sql/init.sql 建库（cw_lcap），改掉配置里的库地址和账号，再在 bin 下 start，起在 19531；数据源服务 flyfishDevServer 同样打包、改配置、start，起在 19532，还会用一个 initResource 的 jar 往库里灌内置组件；最后把 code-server 配成 0.0.0.0:8081，用 pm2 起在 8081。全部起来后，浏览器访问 http://ip:8089，用初始账号 admin 登录，就能开搭了。

官方把这套流程画成了这张图：基础环境（Node/MySQL/Nginx/JDK）到位后，依次是下载源码、装依赖、改配置、起服务，和上面的叙述一一对应。

起在 8081 的在线编辑器长这样，本质是个 VS Code 界面，组件和大屏要写真实代码时就在这里改。

嫌手动折腾的话，仓库提供了一套 docker-compose 方案，见 FlyFish_docker镜像使用指南：装好 docker 后下载 compose 文件、执行 docker-compose up -d，看到 mysql、server、devserver、codeserver、web 五个容器都 Started 就算成功，同样从 8089 访问。

组件库与二次开发的成熟度

📦 模板和组件这一层，是它能不能"少写代码"的关键。开发完的应用和组件都能上传到模板库，之后基于现成模板建项目，而不是每次从零开始；官方模板中心里仪表盘、柱状图、进度条、地图这些基础组件都有现成的，可以拿来即用，也能照着规范自己做一个塞回去。二次开发的上限则由 code-server 兜底，任何拖拽改不动的细节，都能进代码里解决。

这是组件模版库的展示样式，每个组件带预览、作者和时间戳，可直接挑选或参考其实现。

成熟度上几个可核实的信号：

• 模板库 + 在线编辑器两条线并行，复用和定制都能覆盖
• README 挂着 18 位贡献者，且配套技术文档、教学视频和论坛
• 部署文档分了三篇（基础环境 / code-server / 平台部署），还给了 docker 备选，问题能查到处

它适合谁、下一步先做什么

🎯 适合有运维或业务可视化诉求、又不想为每块屏养专职前端团队的中小团队：你只需要一个人会用平台、会写一点 SQL 和 JS，就能把指标搬上大屏。下一步建议很小：先按 doc 目录的 docker 指南起一套环境，跑通 8089 的 admin 登录，再拿一张真实的库表试拖一块屏——跑通这三步，基本就能判断它合不合你的场景。

【免费下载链接】FlyFishFlyFish is a data visualization coding platform. We can create a data model quickly in a simple way, and quickly generate a set of data visualization solutions by dragging.项目地址: https://gitcode.com/gh_mirrors/fl/FlyFish