本文转录自云智前端开发工程师MartelSun的视频课程。原视频地址：【拖拽式数据可视化大屏教程】无代码完成炫酷大屏制作！FlyFish简介FlyFish是云智开源的数据可视化编排平台。通过配置数据模型为用户提供上百种可视化图形组件，零编码实现满足业务需求的炫酷可视化大屏。需要注意的是，本教程仅适用于云智开源数据可视化平台FlyFish。如果您喜欢我们的项目，请点击FlyFish代码仓库地址，在GitHub/Gitee仓库上点一个Star。使用方法一：在线Demo环境体验使用方法二：Gitee本地下载部署使用方法三：GitHub本地下载部署使用数据可视化大屏制作与FlyFish2.1相比，FlyFish2.2.1的整体大屏编辑页面为全部优化，大屏编辑体验更佳。FlyFish2.2.1支持在同一个应用中添加多个大屏，可以在多个大屏之间来回跳转，实现大屏轮播数据。此外，FlyFish2.2.1增加了更多的数据查询和PostgreSQL、ClickHouse等数据源，方便开发者在大屏使用组件时访问数据。最后，FlyFish2.2.1还新增了大屏辅助线，方便开发者更快速、更准确地拖动调整组件在大屏中的位置。大屏配置下图为大屏构建页面，“martelspecial”为新增应用。下面的红色按钮分别代表编辑应用、删除应用、导出应用、复制应用、预览和开发。点击开发按钮后，即可进入大屏编辑页面。左侧为大屏页面编辑区。单击左上角的添加按钮以添加新页面。如果要删除新添加的页面，只需将鼠标移到页面标题上，直到出现删除按钮，点击删除即可。能。左下角是FlyFish的组件区，FlyFish将组件分为基础组件和项目组件。在基础组件中，飞鱼内置了一批开箱即用的优质组件，可以应对绝大部分业务应用场景。包括折线图、直方图、饼图、散点图等多种图表组件；中国地图、地图路线图等自定义地图组件；媒体布局组件，例如图片、视频、导航栏和流向箭头。项目组件是在单个项目开发中使用的组件。中间区域是大屏编辑区，正上方的按钮是组件相关的编辑按钮，包括组件置顶、置底、合并、拆解等操作选项。然后我们可以将一个组件拖过来，通过Ctrl+C/V复制粘贴该组件。此外，大屏编辑页面上的辅助线可以保证开发者在拖放组件时可以保证准确对齐，也可以看到各个组件的区域分布。右上角是大屏保存、预览、导入、导出的相关按钮。为了防止开发者重新进入界面丢失开发好的大屏，开发者需要在开发大屏的时候实时查看大屏的预览效果并保存。当你点击预览时，由于大屏的分辨率基本都是1920*1080像素，与部分电脑的分辨率不匹配，所以你会在大屏预览界面的下方看到一个滚动条。如果开发者不需要滚动条，他们可以在缩放模式选项中选择填充整个屏幕。当开发者选择导出大屏时，此时会导出一个JSON文件。如果要重新导入，只需要导入之前导出的JSON操作即可。右下方是与大屏设置、事件、功能和数据集相关的按钮。点击设置，开发者可以设置大屏的分辨率和缩放方式。组件请求域用于设置组件请求的前缀。当组件发送请求时，接口和前缀结合起来发送请求。需要注意的是，请求前缀必须包含http://或https://。此外，开发人员可以设置一些全局变量。通过设置页面和标题更改页面名称和浏览器选项卡图标。自定义CSS主要是改变组件的样式。设置自定义CSS会在可视化预览区域全局挂载，可以设置全局CSS覆盖组件默认样式。如下图所示，可以通过设置自定义CSS，将组件的背景颜色改为红色。事件的主要目的是监视页面或组件的行为并触发相应的动作。常用于页面与组件的交互，组件之间的通信。需要注意的是，自定义事件集只能被当前页面使用。如下图，开发者可以设置事件源（趋势图）??事件类型（鼠标移入）??操作（调用组件方法（趋势图复制））??时间动作（隐藏）??配置一系列动作来实现鼠标移动图故意消失。函数通常与事件结合使用，开发者可以对函数进行增删改查。需要注意的是，自定义功能集只能被当前页面使用。如下图所示，开发者可以通过编写相关函数，设置相关事件，将此日志打印在大屏上。数据集的目的是为大屏提供数据支持。主要解决多组件公共数据的情况，支持静态数据、数据查询、数据模型、HTTP数据。组件配置在组件配置中，开发者在选择目标组件时，可以对样式、数据等相关配置进行操作。在样式配置中，开发者可以对组件区域、CSS类名、组件显示/隐藏等内容进行配置更改。区域：点击选中实时预览区域的组件，在设置区域设置组件的宽高，输入相应的宽高。在实时预览区拖拽改变组件的宽高位置，使其与此处输入框的值一致。CSS类名：点击选中实时预览区的组件，在设置区设置组件的css类名。组件显示/隐藏：点击选中实时预览区的组件，设置组件的显示/隐藏状态。其他：根据不同组件和实际需要配置个性化组件。在数据方面，主要提供组件数据支持。支持组件绑定数据，支持静态数据、数据查询、http请求、绑定全局数据集。构建完整的大屏以上介绍了大屏的基本配置和组件。本节将讲解如何构建一个完整的大屏幕。第一步：拖拽组件，在拖拽组件的同时完成组件相关的样式配置。第二步：数据配置通过数据查询配置数据数据查询就是在下拉列表中选择数据查询信息。飞鱼平台接入数据源后，开发者可以通过数据查询功能对目标数据进行筛选，形成新的数据集。另外，也可以将其他多条数据重新组合成一个新的数据集，作为数据查询中数据列表的来源。通过数据查询配置组件数据时，首先需要在数据查询列表中点击相关数据，然后点击AddTable，点击ExecuteQuery。此时，相关数据表已经显示在结果预览界面上。如果只需要选择部分数据，只需要添加自定义字段即可完成数据提取。提取目标数据后，在数据查询中点击新建基本查询，选择对应数据源中的数据表，执行查看数据表明细是否正确，点击保存。然后在大屏点击相应的组件，点击数据，在数据查询中选择目标数据表点击应用，可以看到数据已经应用到相应的组件上了。通过全局数据集配置数据通过全局数据集配置数据时，首先需要添加一个新的数据集。此时可以选择数据类型为数据查询，在上面的数据查询中可以从数据表中选择数据。然后在大屏中选择相应的组件，点击数据，在全局数据集数据中选择目标数据集，完成X轴和Y轴显示数据设置（如果没有X轴和Y轴，也可以通过数据结构进行处理，将返回的数据进一步处理适配对应的组件），点击应用，可以看到数据已经应用到对应的组件上了。大屏应用完成大屏组件拖拽和数据配置后，如果要部署大屏，只需要点击应用下方的导出按钮，然后解压导出的包即可部署到任意环境比如阿帕奇。开源的好处以上就是完成大屏的制作过程。如果您喜欢我们的项目，请不要忘记点击下方代码仓库地址，点击GitHub/Gitee仓库。Star，我们需要你的鼓励和支持。另外，马上参与FlyFish项目，成为FlyFishContributor，同时还有更多现金等着你。github地址：https://github.com/CloudWise-...Gitee地址：https://gitee.com/CloudWise/f...FlyFish投稿指南：http://bbs.aiops.cloudwise.co...飞鱼模板中心：https://www.cloudwise.ai/flyF...微信搜索xiaoyuerwise或扫描下方二维码，关注【飞鱼】加入AIOps社区飞鱼开发者交流群，交流面对面-与FlyFish项目PMC面对面交流。
