交互配置

选中组件后,右侧的设置面板,第三个Tab就是“交互”设置,可以在这里设置组件要实现的交互效果。
POPO-screenshot-20231017-102621.png

比如,通过Tab控件来控制不同组件的展示状态。
POPO-screenshot-20231017-103043.png

交互参数


上方举的例子,Tab控件控制柱图/饼图的展示切换。是借助“交互参数”功能实现的。大致的逻辑关系如下图所示:

  • Tab控件是控制端,柱图、饼图是影响端,交互参数则是控制端向影响端传递信息的媒介
  • 控制端的Tab控件发生切换时,会触发交互参数的值发生变化
  • 影响端的柱图、饼图,依据交互参数值的变化去执行响应的动作(比如显示、隐藏)

详细的操作步骤如下(以“Tab控件控制柱图/饼图的展示切换”举例)

(1)添加选项卡控件跟柱图、饼图

添加一个“选项卡”控件。
POPO-screenshot-20231017-103229.png

将“选项卡”的数据设置为柱图、饼图。

[
  {
    "tabName": "柱图"
  },
  {
    "tabName": "饼图"
  }
]

POPO-screenshot-20231017-103335.png

添加柱图、饼图组件。
POPO-screenshot-20231017-103504.png

(2)创建一个交互参数
POPO-screenshot-20231017-103746.png

设置参数的信息。

  • 参数名称:SwitchTab
  • 类型:字符串
  • 默认值:柱图

POPO-screenshot-20231017-104007.png

(3)将Tab控件跟参数绑定

在Tab控件的交互面板,添加一个写入参数。使得Tab的切换触发参数值的同步变化。

  • 交互操作:切换选项
  • 字段值:tabName
  • 指定参数:SwitchTab(上一步创建的交互参数)

POPO-screenshot-20231017-104356.png

(4)设置柱图、饼图的响应事件

选中柱图组件,在交互面板中,开启响应事件。设置显示动画、消失动画。
POPO-screenshot-20231017-104602.png

设置事件响应的函数条件。
POPO-screenshot-20231017-104730.png

条件设置成参数“SwitchTab”等于“柱图”时展示。
POPO-screenshot-20231017-104821.png

同理,选中饼图,在交互面板中,开启响应事件。设置显示动画、消失动画。设置事件响应的条件设置,设置参数“SwitchTab”为“饼图”时展示。
POPO-screenshot-20231017-105005.png

(5)完成设置,预览效果

如上,即完成了交互配置。点击右上角的“预览”可查看效果。
POPO-screenshot-20231017-105119.png

组件显隐

组件入场,以及响应事件切换显隐时,都能配置进场、出场动画。

参数时间轴

数据大屏Pro可以通过设置“参数时间轴”实现高自由度轮播,下面是使用柱形图和饼图,通过设置“参数时间轴”实现的自定义轮播。
111.gif

具体操作

(1)添加柱形图,饼图组件
POPO-screenshot-20231017-135200.png

(2)创建一个交互参数
POPO-screenshot-20231017-103746.png

设置参数的信息。

  • 参数名称:SwitchTab
  • 类型:字符串
  • 默认值:柱图

POPO-screenshot-20231017-104007.png

(3)绑定交互参数,选中柱形图,在交互面板中设置“响应事件”,设置参数“SwitchTab”为“柱形图”时展示。
POPO-screenshot-20231017-140406.png
同理,选中饼图,在交互面板中,开启响应事件。设置显示动画、消失动画。设置事件响应的条件设置,设置参数“SwitchTab”为“饼图”时展示。
POPO-screenshot-20231017-140523.png

(4)添加“参数时间轴”。
POPO-screenshot-20231017-140734.png

(5)设置轮播时间范围,时间节点。
POPO-screenshot-20231017-141358.png

(6)设置时间节点参数的对应值。
POPO-screenshot-20231017-142719.png

(7)应用该时间轴,开启循环设置,开启默认执行。
POPO-screenshot-20231017-143924.png

(8)完成设置,预览效果

如上,即完成了交互配置。点击右上角的“预览”可查看效果。
POPO-screenshot-20231017-144047.png

使用技巧

如果不需要执行时机判断勾选默认开启,每次进入页面就会直接执行。
111.gif

在使用”参数时间轴“进行多个轮播时,建议放入动态图层中,即一个动态图层一个时间轴,可以提高编辑流畅性。
POPO-screenshot-20231017-150104.png

参数血缘

参数是血缘图的核心,所有与[参数]有关的[组件]和[时间轴]都会展示在参数血缘图中,方便用户快捷定位参数关联的组件和时间轴,方便修改。

(1)入口
通过[交互参数]-[血缘]中打开,即可显示参数血缘图。
参数血缘图.png

(2)界面介绍
在参数血缘图界面,从左到右依次为参数上游、交互参数、参数下游。

若组件存在于某个动态图层内,则动态图层框将其下的所有组件框在一起作展示。

界面介绍.png

(3)功能

  • 点击参数:高亮该参数的上下游链路。
    点击参数.png

  • 点击组件:右侧配置面板显示该组件的交互配置,即可快速修改。
    点击组件.png
    注:当组件位于动态图层中,选中该组件后会新标签页跳转至动态图层页面。
    动态图层.png

  • 点击时间轴:新建新标签页打开一个大屏并展开时间轴列表,并定位至对应时间轴,即可快速修改。
    点击时间轴.png

图表联动

有一类常见的图表联动场景,比如下图,饼图选中某个地区,联动柱图展示对应地区的数据。

针对此类场景,数据大屏Pro提供了图表联动功能,下面我们举一个例子来依次说明此功能。

筛选

1.在大屏中选中“选项卡”和“饼图”组件。

2.让选项卡和饼图组件的显示字段都为“地区”(支持跨模型选择)。

3.点击选项卡,在“交互”Tab下选择筛选,并将筛选组件选定为“饼图组件”。

4.此时,我们在大屏中点击选项卡中某一地区,饼图会同时触发此地区的筛选。

下钻

5.显然,这种程度的筛选并不能达到很好的可视化效果,依此我们可以再在选项卡组件中加入“下钻”交互,查看某地区中各省/自治区的数据。


6.再次预览大屏,点击选项卡中某一地区,饼图中通下钻的省/自治区的信息便显示出来了,由此一个简单的图表联动就完成了。

高亮

7.为了突出选定区域,我们可以再在交互中添加高亮。

多屏交互能力


支持跨大屏绑定交互参数,实现主屏控制其他展示屏的场景(如使用PC或手机,控制大屏幕上展示大屏的切换)。

  • 如下图所示,组件的“交互”模块里增加了“绑定跨屏参数”设置,可选择将字段值传递至其他大屏的交互参数;

  • 选择其他大屏时,您只能选择同一项目中有编辑权限的其他大屏。