操作指南(数据可视化大屏)

参与文档共建赢好礼> HOT

逻辑编辑器概述

最近更新时间:2022-04-27 09:52:39

介绍

逻辑编辑器是图表之间实现联动的高级特性,可通过交互图连线方式轻松实现任意功能并更方便对图表逻辑进行管理。逻辑编辑器相较于联动可以实现数据请求合并和数据分发的功能、界面层的静态控制功能如控制图表显示隐藏移动,并且逻辑编辑器可以与联动兼容。

运行原理

将逻辑转换成事件、动作和连线的概念,当事件触发时将执行对应连线的动作,以此来描述一个完整的逻辑流。
如下图所示:

  1. 当用户鼠标单击 Tab 列表改变选中项时,将触发当Tab选中变更时的事件。
  2. 因为 Tab 列表的当Tab选中变更时与分支判断的判断动作有连线,因此将执行分支判断的判断动作。
  3. 判断动作的函数代码由用户指定,函数参数为当Tab选中变更时传递的参数,当函数代码返回 true,则会触发满足事件。
  4. 因为分支判断的满足事件与基础柱状图的显示动作有连线,因此将执行基础柱状图的显示动作。
  5. 基础柱状图进行显示,整个逻辑流完成。
    如果分支判断的函数代码返回 false,则会触发不满足事件,将按上述流程隐藏基础柱状图。

节点构成

逻辑编辑器节点由两部分组成,一部分是用户导入至逻辑编辑器的组件节点,一部分是逻辑节点。

组件节点

组件节点由界面设计器导入并添加到画布中,该节点主要是触发用户界面的事件和执行用户指定的动作。

逻辑节点

逻辑节点通过逻辑编辑器的顶部菜单添加到画布中,该节点需要连线执行动作并触发事件,逻辑节点需要用户使用配置面板进行配置。

配置面板

配置面板用于对逻辑节点进行配置,可以修改逻辑节点的名称、查询上流组件事件说明、下流组件动作说明以及对对应逻辑节点进行配置,如下图所示:

逻辑节点配置

下面是目前支持的所有逻辑节点的配置项说明。

全局节点

全局节点仅支持更改节点名称。
动作

  • 设置联动变量 - 可传递对象给该动作设置全局变量。
  • 更新所有组件数据 - 该动作将更新所有组件的数据,无需传递参数。

事件

  • 页面初始化完成 - 当页面所有组件初始化完成时触发该事件,无参数。
  • 页面数据加载完成 - 当页面上所有组件数据加载完成时触发该事件,无参数。
  • 页面全部加载完成 - 当页面上所有组件初始化、数据加载完成时触发该事件,无参数。
  • 更新所有组件数据完成 - 当更新所有组件数据动作完成时触发该事件,无参数。

分支判断

分支判断节点类似于 if-else 语句,通过对传入参数进行判断,当处理结果为 true 触发满足事件,为 false 触发不满足事件。
单击新增可添加多个判断逻辑,可通过设置判断类型决定是同时满足还是任一满足即触发满足事件。
添加的所有判断逻辑函数中的 data 参数均为判断动作连线上流事件传递的参数,触发的所有事件均无参数。

多路判断

多路判断节点类似于 switch-case 语句,可以新增多个条件事件,当第一个条件满足时将触发对应的事件。
添加的所有判断条件函数中的 data 参数均为判断动作连线上流事件传递的参数,触发的所有事件均无参数。

定时器

定时器节点支持延迟定时和定点定时。定时器节点的所有动作、所有事件均无参数。

  • 延迟定时支持指定多少秒后触发当到计时点时事件,并支持是否循环计时。
  • 定点定时支持设置在某一时、某一分、某一秒触发当到计时点时事件,其中 ***** 号表示在任一时间。
    如下图所示,表示在每个小时的第一分钟的每秒触发当到计时点时事件。

串行数据处理

串行数据处理节点是使用串行方式来执行用户添加的处理方法,当所有处理方法处理完成时,触发处理完成事件。

其中第一个处理方法的函数参数为传递给数据处理动作的参数,最后一个处理方法返回的数据为处理完成事件的参数,其他处理方法的函数参数为上一个处理方法返回的数据。

如下图所示,处理方法1的函数参数 data 的值是处理方法0返回的 '测试数据',最后触发处理完成事件的参数是 [{ value: '测试数据' }]

并行数据处理

并行数据处理节点是使用并行方式来执行用户添加的处理方法,每个处理方法同时是动作和事件,处理方法各自独立互不影响。

并行数据处理节点在数据分发场景使用较多,例如,一个组件接口返回的数据为 {name: '折线图', version: 'v1.0' },分发到2个通用标题组件中,一个取的是 name 字段,另一个取的是 version 字段。可以使用该节点新增两个处理方法,一个为return [{value: data.name}],另一个为 return [{value: data.version}],如下图所示:

序列执行

序列执行节点是使用顺序的方式执行处理方法并触发事件,保证动作从上到下依次执行完成,包含动画。
添加的所有序列函数中的 data 参数均为执行动作连线上流事件传递的参数,触发事件的参数为对应序列函数返回的数据。
例如,可以使用序列执行节点,先隐藏图表 A 等待动画完成后再显示图表 B。

键盘

键盘节点用于监听键盘按键并触发事件,触发的事件没有参数。
如下图所示,可任意设置添加快捷键。

目录