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

前提条件

准备好您的交互需求。

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

操作步骤

  1. 参考添加组件,在可视化大屏编辑器页面搭建所需要的两个基本柱图组件。
    添加组件
  2. 单击大屏编辑页面右上角的配置节点编程图标。
    配置节点编程图标
  3. 节点编程配置页面,将左侧的基本柱图-1基本柱图-2节点拖至画布中。
  4. 基本柱图-1当点击数据项时事件与基本柱图-2高亮动作连线。
  5. 在连线中添加一个转换器,并命名为目标高亮
    具体操作方法请参见配置节点编程
  6. 将转换器的右侧圆点与基本柱图-1高亮动作连线。
    最终连线的结果如下图所示。
    连线样式

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

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

  7. 配置转换器。
    1. 右键单击名称为目标高亮的转换器,选择编辑
    2. 转换器设置对话框的转换器脚本编辑区域,输入转换条件,完成后单击保存
      当前转换器的示例代码如下。
      return {
        data: {
          "x": data.x//柱图2关联柱体高亮条件
        },  options: {
          style: {
            fill: "3DE7C9"//填充色
          },
          cancelHighlightFirst: true//是否先取消之前高亮
        }
      };
  8. 转换器配置完成后,单击节点编程配置页面右上角的应用图标,将交互效果应用到大屏项目中。
  9. 单击页面左上角的返回图标,返回大屏编辑器页面。单击预览,查看基本柱图-1控制基本柱图-2高亮的交互效果。
    高亮效果展示