本文档以基本柱状图组件之间控制柱体高亮为例,为您介绍使用蓝图编辑器功能动态控制组件高亮的方法。

前提条件

准备好您的交互需求。

本案例的交互需求为:单击基本柱状图1的柱子时,控制自身以及基本柱状图2相关联的柱子高亮显示。

背景信息

本案例的适用场景:当有多个数据关联组件时,选择某项数据,通过此功能可以让相关组件的对应数据项高亮,可以直观地看到数据情况。

理解案例交互

当前案例实现需要用户将交互转成节点和边的关联关系,需要使用的组件有满足需求的事件和动作才能进行配置,否则就无法实现。
  • 组件:组件包含两种能力,事件抛出能力和动作执行能力。本案例使用了基本柱状图组件之间的联动。
    • 基本柱状图1:这个组件具备抛出点击事件的能力。
    • 基本柱状图2:属于被联动组件,具有接收数据并执行动作的能力。
  • 蓝图编辑器:通过运用逻辑节点编排的方式,将上游组件的交互/事件下游组件的执行动作绑定,从而实现页面内组件间的交互联动。
    说明 蓝图编辑器配置完成后需要在预览页查看配置效果。

配置案例交互

  1. 参考添加组件,在可视化画布编辑器页面搭建所需要的两个基本柱状图组件。添加组件
  2. 单击画布编辑器图层栏内两个基本柱状图组件,右键选择导出到蓝图编辑器导出到蓝图编辑器
  3. 单击画布编辑器页面左上角,单击蓝图编辑器图标,切换到蓝图编辑器配置页面。蓝图编辑器界面入口
  4. 蓝图编辑器配置页面,将左侧导入节点栏内的基本柱状图1基本柱状图2节点拖至画布中。
  5. 基本柱状图1当点击数据项时事件与基本柱状图2高亮动作连线。
  6. 连线后,线段内会自动添加一个串行数据处理逻辑节点,将配置面板中的处理方法重命名为目标高亮
    具体操作方法请参见串行数据处理
  7. 串行数据处理逻辑节点的右侧圆点与基本柱状1高亮动作连线。
    最终连线的结果如下图所示。连线样式

    连线1:实现关联柱图高亮的效果。

    连线2:实现自身柱图高亮的效果。

  8. 单击串行数据处理进入逻辑节点的配置界面,在选中上下游组建的事件和动作,单击查看data参数字段提示处,在左侧弹窗中查看上下游组件内的数据定义和数据示例内容。查看并根据需求选中实现柱体高亮所需要的字段。数据实例展示
    数据示例:
    {
      "data": {},
      "options": {
        "style": {
          "stroke": "#f00",
          "fill": ""
        },
        "selectMode": "single",
        "cancelHighlightFirst": false
      }
    }
    说明 我们要完成的高亮操作是需要填充高亮,因此将数据示例中的stroke改为fill
  9. 配置画布中串行数据处理目标高亮这个处理方法。
    1. 单击串行数据处理逻辑节点,进入右侧配置面板,选择面板内其他配置栏下方的目标高亮处理方法,单击右侧下拉框打开脚本编辑区域。
    2. 在脚本编辑区域,输入代码,完成后单击完成
      当前处理方法的示例代码如下。
      return {
        data: {
          "x": data.x//需要填充的数据选项
        },  options: {
          style: {
            fill: "3DE7C9"//填充方式及颜色
          },
          "selectMode": "single",
          "cancelHighlightFirst": true//是否先取消之前高亮
        }
      }
  10. 处理方法配置完成后,单击蓝图编辑器配置页面右上角的预览图标,预览交互效果。高亮效果展示