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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考