共计 3105 个字符，预计需要花费 8 分钟才能阅读完成。
本文转录自云智慧前端开发工程师 Martel Sun 的视频课程。
原视频地址：【利落拽数据可视化大屏教程】不必代码实现酷炫大屏制作！
FlyFish 介绍
FlyFish 是云智慧开源的一款数据可视化编排平台。通过配置数据模型为用户提供上百种可视化图形组件，零编码即可实现合乎本人业务需要的炫酷可视化大屏。需注意，本教程仅实用于云智慧开源数据可视化平台 FlyFish。如果喜爱咱们的我的项目，请点击 FlyFish 代码仓库地址，在 GitHub / Gitee 仓库上点个 Star。
应用形式一： 线上 Demo 环境体验
应用形式二： Gitee 本地下载部署应用
应用形式三： GitHub 本地下载部署应用
数据可视化大屏制作
相较于 FlyFish 2.1，FlyFish 2.2.1 的整体大屏编辑页面均作了优化，因而编辑大屏的时候体验会更好。FlyFish 2.2.1 反对在同一利用中增加多张大屏，并能够在多张大屏中来回跳转以及实现大屏轮播数据。除此之外，FlyFish 2.2.1 减少了数据查问以及 PostgreSQL、ClickHouse 等更多数据源，不便开发者们在应用大屏中组件的时候接入数据。最初，FlyFish 2.2.1 也减少了大屏辅助线，以此不便开发者们更快捷、更精确地拖拽以及调整大屏中组件的地位。
大屏配置
下图为大屏构建页面，“martel 专用”为新增加利用。下方标红按钮别离代表编辑利用、删除利用、导出利用、复制利用，以及预览与开发。
点击开发按钮后，可进入到大屏编辑页面。左侧是大屏页面编辑区，通过点击左上方的增加按钮即可新增一个页面，若想删除该新增页面，只需将鼠标移至页面题目地位待显示出删除按钮后，点击删除即可。
左下角为 FlyFish 的组件区，FlyFish 将组件分为根底组件和我的项目组件。在根底组件中，FlyFish 内置了一批开箱即用的高质量组件，可能应酬绝大部分的业务利用场景。包含各类折线图、柱状图、饼图、散点图等图表类组件；自定义中国地图、地图路线图等地图类组件；图片、视频、导航栏、流动箭头等媒体布局组件。我的项目组件即独自我的项目开发中所用到的组件。
两头区域为大屏编辑区，正上方按钮为组件相干编辑按钮，包含组件置顶、置底、组合、拆解等操作选项。而后咱们能够拖拽一个组件过去，可通过 Ctrl+C/V 可复制粘贴组件。此外，该大屏编辑页面的辅助线能够确保开发者们在拖拽组件的时候能够保障能准确对齐，同时也能能够看到每个组件的区域散布状况。
右上角为大屏保留、预览、导入、导出相干按钮。为避免开发者从新进入界面呈现已开发大屏失落的状况，因而在开发大屏时开发者需实时查看大屏预览成果并进行保留。点击预览时，因为大屏的分辨率基本上为 1920*1080 像素，与局部电脑上的分辨率不相匹配，因而会看到大屏预览界面下方有滚动条。如开发者无需滚动条，可通过在缩放形式选项中抉择全屏铺满即可。当开发者抉择导出大屏时，此时会导出一个 JSON 文件，若要从新导入，则只需将之前导出的 JSON 操作导入即可。
右下方为大屏设置、事件、函数、数据集相干按钮。点击设置，开发者能够对大屏的分辨率、缩放形式进行设置。组件申请 Domain 用于设置组件申请前缀，在组件发出请求中会组合接口和前缀发送申请，需注意，申请前缀要求必须蕴含 http:// 或 https://。此外，开发者能够设置一些全局变量。通过设置页面和题目以此变更页面名称和浏览器页签 icon。
自定义 CSS 次要是扭转组件的款式。设置自定义 CSS 会挂载在可视化预览区域全局，可设置全局 CSS 笼罩组件默认款式。如下图所示，能够通过设置自定义 CSS 将组件背景色改为红色。
事件主要用途为监听页面或者组件的行为，触发相应的动作。罕用于页面和组件的交互、组件间互相通信。需注意，设置的自定义事件只能提供给以后页面应用。如下图所示，开发者可通过实现设置事件源（趋势图）➡️ 事件类型（鼠标移入）➡️ 操作（调用组件办法（趋势图 复制））➡️ 工夫动作（hide）➡️ 配置系列动作达到移入鼠标趋势图隐没的目标。
函数通常与事件搭配应用，开发者可对函数进行增删改查。需注意，设置的自定义函数只能提供给以后页面应用。如下图所示，开发者可通过编写相干函数以及设置相干事件达成大屏 this 的日志的打印。
数据集目标是为大屏提供数据撑持。次要解决多组件专用数据状况，反对静态数据、数据查问、数据模型、HTTP 数据。
组件配置
在组件配置中，当开发者选中指标组件时便能够操作款式和数据等相干配置。款式配置中，开发者能够对组件的区域、CSS 类名、组件显示 / 暗藏以及其余等内容进行配置更改。
- 区域：单击选中实时预览区域中的组件，设置区域中设置组件宽高，输出相应的宽高。在实时预览区域拖拽扭转组件宽高地位与此处输入框数值统一。
- CSS 类名：单击选中实时预览区域中的组件，设置区域中设置组件 css 类名。
- 组件显示 / 暗藏：单击选中实时预览区域中的组件，设置组件的显示 / 暗藏状态。
- 其余：依据组件不同和理论需要，配置个性化组件。
数据方面次要提供组件数据撑持。反对组件绑定数据，反对 静态数据、数据查问、http 申请、绑定全局数据集。
残缺大屏构建
上述解说了大屏及组件的根底配置，本大节将解说如何构建一张残缺大屏。
第一步：拖动组件
在拖动组件的同时可实现组件相干款式配置。
第二步：数据配置
通过数据查问配置数据
数据查问是在下拉列表中抉择数据查问信息。在飞鱼平台接入数据源后，开发者能够通过数据查问性能筛选指标数据，随后组成新的数据汇合。此外，也能够其余多个数据重新组合成一个新的数据汇合，这便是数据查问中数据列表的起源。
在通过数据查问配置组件数据时，首先需点击数据查问列表中的相干数据，随后点击新增表格并点击执行查问，此时相干数据表格已显示在后果预览界面。若只需抉择局部数据，则只需通过增加自定义字段实现数据抽取。
指标数据抽取实现后，在数据查问中点击新建根底查问抉择对应数据源中的数据表，执行查看数据表详情无误后，点击保留即可。随后点击大屏中绝对应组件，点击数据，在数据查问中抉择指标数据表点击利用即可看到数据已被利用到绝对应组件中。
通过全局数据集配置数据
在通过全局数据集配置数据时，首先需新增一个数据集，此时数据类型可抉择数据查问，数据抉择上述数据查问中的数据表即可。随后抉择大屏中绝对应组件，点击数据，在全局数据集数据中抉择指标数据集，实现 X 轴与 Y 轴显示数据设置（如无 X 轴和 Y 轴，亦可通过数据结构解决，对返回数据做进一步解决，以适配到对应组件中），点击利用，即可看到数据已被利用到绝对应组件中。
大屏利用
在实现大屏组件拖动与数据配置后，若想部署大屏只需点击利用下方的导出按钮，随后将导出的包解压后部署到 Apache 等任意环境即可。
开源福利
上述便是实现大屏制作流程，如果喜爱咱们的我的项目，请不要遗记点击下方代码仓库地址，在 GitHub / Gitee 仓库上点个 Star，咱们须要您的激励与反对。此外，即刻参加 FlyFish 我的项目奉献成为 FlyFish Contributor 的同时更有万元现金等你来拿。
GitHub 地址：https://github.com/CloudWise-…
Gitee 地址：https://gitee.com/CloudWise/f…
FlyFish 奉献指南：http://bbs.aiops.cloudwise.co…
FlyFish 模版核心： https://www.cloudwise.ai/flyF…
微信搜寻 xiaoyuerwise 或扫描辨认下方二维码，备注【飞鱼】退出 AIOps 社区飞鱼开发者交换群，与 FlyFish 我的项目 PMC 面对面交换。