得鹿梦鱼 得鹿梦鱼

多维数据可视化低代码平台的设计与实现

需求分析

业务需求

低代码数据可视化平台是集可视与服务一体的一站式搭建工具,它面向非专业数据分析人员,并利用图形化界面快速搭建专业化可视化应用,在进行需求分析时,需要同时考虑可视化端低代码和服务端低代码。对于可视化端来说,需要具有易用性、灵活性、可扩展性和可维护性等特点,以便非专业人员能够通过拖拽配置等操作,定制化设计并展示数据。对于服务端来说,不仅需要提供集成多类型数据源的能力,还需要提供快速生成服务API的能力。

前端组件化的角度

低代码多维数据可视化平台是一个基于前端组件化的可视化应用平台。通过组件化的思想,将复杂的多维数据可视化过程拆分成多个小的组件,每个组件都具有特定的功能和样式,可以根据业务需求灵活搭配组合

从组件数据服务的角度

低代码多维数据可视化平台还需具有服务端数据服务API自动生成的能力

功能需求

组件可视化端

组件可视化端

服务可视化端

组件可视化端

总体设计

该架构分为三个层次:应用层、服务层和数据层。应用层负责平台展示,包括两个组成部分,即组件可视化和服务API可视化,组件可视化提供用于组件的拖拽布局的编辑器,服务API可视化则提供为每个组件管理服务的可视化界面,这些界面使得平台在使用时更加直观和易懂。服务层提供了平台中数据交互的功能,该层通过提供接口和服务,使得平台可以和数据库进行交互,实现更加灵活的数据处理和服务功能。数据据层则主要是负责存储平台中的数据,包括平台布局、规则文件等关键数据

总体设计

组件可视化构建实现

组件编辑器模块

1组件布局实现

通过使用组件布局器,用户可以从组件库中选择一个组件,并将其拖动到布局器画布中进行布局。此外,该组件布局器还提供布局辅助工具,如辅助线、标尺、组件间吸附、组件层次、组件缩放等,让用户可以更方便地对组件进行布局

核心过程是用一个componen_IDa协数组维护编辑器中的数据,当把组件拖拽到画布中时,使用”sh方法将新的组件数据添加到compone佃北L,同时,编辑器将使用v-for循环指令遍历compon盟tData数组,将每个组件取出并逐个渲染到画布

组件渲染实现

件渲染是将组件库中的组件拖拽到编辑器画布上,将不同的组件组合在一起并通过组件配置器对其进行样式、数据和事件的配置,构建出丰富多彩的可视化应用的过程。在这个过程中,组件的配置信息和属性将被绑定到组件实例上,使得组件能够在应用中正确地展现其功能和外观

  1. 根据唯一标识码获取布局JSaN数据
  2. 遍历配置数据集合,获取组件包路径,并动态注册组件
  3. 遍历解析配置数据,并将组件和布局数据进行渲染
  4. ,每个组件会发起动态数据请求,实现可视化数据呈现

组件配置模块

该模块分为样式、数据、事件配置三个部分。样式配置包括布局器样式和单组件属性样式,可用于对组件进行样式设置和调整,用户能够通过样式配置界面选择并调整布局器样式和单组件属性样式。数据配置包括静态数据和动态API数据,用户能够通过数据配置界面设置组件的静态数据和动态API数据,可以手动输入静态数据,并从API数据配置中选择适当的A_PI来获取外部数据
事件配置分为基础事件和高级事件,其中基础事件包括鼠标事件、键盘事件等,用户可以选择相关事件并添加相应处理程序。高级事件包括自定义事件和扩展事件,用户可以自行定义事件,并添加相应的处理程序

组件样式配置

  1. 辑器样式配置
  2. 基础图表类组件样式配置
  3. 二维可视化组件样式配置
  4. 三维可视化组件样式配置
  5. 地图服务配置
  6. 其他装饰组件样式配置

组件数据配置

现编辑器模块和组件配置模块之间的数据交互,交互主要依赖组件通信Pinia工具

平台组件服务可视化实现

数据服务API可视化

提供一个直观易用的数据服务管理界面,可以方便用户创建、修改和管理数据服务

多源数据配置

用户方便地创建、导出、导入和浏览数据源

数据服务规则库管理

管理平台中的各种规则文件,包括新请求格式、新数据源、返回数据转换规则等,通过该模块用户能扩展出新的数据服务功能。该模块包含规则文件浏览、创建、修改和删除等模块

API接口文档

通过点击导出API接口按钮,可以跳出选择API接口的弹窗,选择完毕后将自动生成API文档