开关

本文介绍开关组件的使用指南。

组件概述

开关是一种控件组件,仿照物理开关,单击即可切换为开启或关闭状态。可通过交互配置,与其他组件配合使用,实现控制相关内容的显隐、不同状态的呈现等。

使用场景

常用于在可视化应用中,通过定义开关的开启或关闭状态,来控制显示或隐藏指定内容。例如,可通过开关控制启用/禁用声音,显示/隐藏侧边栏配置等。

效果展示

  • 静态开关

    image.png

  • 交互场景

    screenshot_2025-01-09_17-20-00

前提条件

添加开关

  1. 登录DataV控制台

  2. 工作台页面的数据看板区域,鼠标悬停至目标看板,单击编辑,进入看板的画布编辑页面。

  3. 在左侧导航栏的组件库 > 控件 > 按钮类列表下,单击开关组件,添加该组件至画布。

您也可使用全局搜索添加相关组件。

接入业务数据

添加组件后,您可将已准备的业务数据接入组件进行显示。单击开关,在右侧的数据源页签,即可选择该组件所要呈现的数据。image

  • 开关接收的数据字段介绍如下。

    字段

    说明

    onValue

    打开开关抛出的数值,默认为1。

    offValue

    关闭开关抛出的数值,默认为0。

    state

    开关的打开或关闭状态。该参数值仅支持配置为onValueoffValue的值,默认为01,0表示关闭开关,1表示打开开关。

    示例开关的数据结构及效果展示如下。

    //打开开关
    [
      {
        "onValue": 1,
        "offValue": 0,
        "state": 1
      }
    ]
    
    //关闭开关
    [
      {
        "onValue": 1,
        "offValue": 0,
        "state": 0
      }
    ]

    image

  • 数据源的核心配置项介绍如下。

    配置项

    描述

    选择数据源

    支持接入CSV文件、API、各类数据库等多种类型数据,详情请参见支持的数据源类型。您可使用可视化表格或代码方式编辑数据字段。

    配置过滤器(可选)

    用于自定义过滤代码,实现数据的结构转换、筛选、展示和简单的计算,详情请参见管理数据过滤器

    配置数据映射

    用于将所选数据源中的字段映射至组件对应的字段上,实现数据的实时匹配。单击image图标可配置字段样式。

    查看响应结果

    用于实时展示组件所接入的数据。当组件数据源发生变化时,此处会对应展示最新数据。

    • 单击数据响应结果,可查看编写的数据字段代码。

    • 单击查看示例,可查看数据源接收的数组类型及代码示例。您可参考示例编写相关字段。

    其他数据请求配置:

    • 禁止加载态:勾选后,在组件更新或预览数据看板时,将不呈现组件初始化时的加载内容。

    • 受控模式:勾选后,组件在初始化状态下不会请求数据。此时仅支持通过蓝图编辑器或全局变量事件发起数据请求。

    • 自动更新请求:勾选后,平台会根据您设置的轮询时间,动态轮询更新数据;不勾选,则需手动刷新页面,或通过蓝图编辑器和全局变量事件来触发请求更新数据。

配置开关

单击开关组件,即可在右侧面板配置组件的基础样式、全局变量和交互事件等高级配置,以及蓝图交互配置。

样式配置

样式面板,可配置开关的默认状态、背景颜色、边框样式,相关配置项介绍如下。

说明

您也可单击image图标,通过关键词搜索,快速定位到所需配置项,搜索支持模糊匹配。详情请参见搜索配置项

相关配置项介绍如下。

配置项

描述

图示

全局配置

定义组件在数据看板中的位置分布、透明程度、交互穿透。

  • 不透明度:数值越小,组件越透明。取值范围为0~1内的数值。

  • 交互穿透:开启后,鼠标可穿透该组件,避免看板中组件较多时,该组件会遮挡鼠标与下层组件的交互。

image

基础样式配置

定义开关的默认选中状态、背景颜色及边框的线条、颜色、粗细、圆角等样式。相关说明如下:

  • 默认选中状态:开启后,添加的开关组件默认为打开状态。

    说明

    此处的配置优先级低于数据源中state字段的取值,优先以state的配置状态为准。

  • 背景颜色:需分别配置开关打开状态及关闭状态的背景颜色。

image

开关把手配置

定义开关把手的颜色、边框样式、宽度、高度,以及垂直方向的位置偏移。通常使用开关把手控制开关的打开及关闭。image

image

高级配置

可定义开关与其他组件间的交互。相关配置项介绍如下。

配置项

描述

图示

交互事件

定义与其他组件间的交互行为,实现组件联动。单击image图标,即可定义相关交互事件及交互动作。

image

关联全局变量

可在组件中关联全局参数,实现组件间的参数传递,进行组件交互。单击image图标,即可开启相应指令,并为该指令关联所需全局变量

当开关的状态变化时(即打开或关闭开关),触发数据请求,抛出数据源面板中的配置值。打开开关,抛出onValue值;关闭开关,抛出offValue值。配置详情请参见组件交互配置

蓝图交互

可通过蓝图编辑器使用可视化连线方式,定义组件间的交互关系及行为逻辑。

操作步骤

  1. 在画布编辑页面,单击顶部菜单栏左侧的image图标,进入蓝图编辑器。

  2. 在图层节点列表,鼠标悬停至开关组件,单击image图标,添加该组件至主画布。

  3. 通过连线方式,按需配置相关组件的蓝图交互效果。

    示例如下。image

配置项介绍

相关交互事件及动作的介绍如下。

说明

您也可在蓝图配置界面右侧,单击相应事件或动作后的image图标,查看相关参数详细介绍。

类别

子类别

描述

事件

当数据更新时

当组件数据更新时抛出该事件。

当数据请求状态变化时

当数据请求状态变化时抛出该事件。状态值包括Void、Loading、Success、Error。

当状态变化时

当开关状态发生变化时抛出的事件,同时抛出该状态下对应的数据项,数据示例如下。

{
  "value": 1  //当前状态值
}

动作

导入数据

按组件绘制格式处理数据后,导入组件,重新绘制。无需重新请求服务端数据,数据示例如下。

[
  {
    "onValue": "1",
    "offValue": "0",
    "state": 1
  }
]

请求数据

重新请求服务端数据,上游数据处理节点或图层节点抛出的数据将作为参数。例如,开关配置的API数据源为https://api.test,传到请求数据动作的数据为{ id: '1'},则最终请求为https://api.test?id=1

获取当前开关状态

获取当前开关的状态。

设置当前开关状态

设置当前开关的状态,数据示例如下。

{
  "value": 1  //当前状态值。1表示打开开关,0表示关闭开关。
}

清空组件到默认值

还原到组件的默认值。

移动

将组件移动到指定位置,数据示例如下。

    {
      // 移动方式。绝对定位:to,相对定位:by。默认值:to。
      "positionType": "to",
      // 指定位置。x坐标,y坐标。
      "attr": {
        "x": 0,
        "y": 0
      },
      // 动画方式。
      "animation": {
        "enable": false,
        // 动画延时。
        "animationDuration": 1000,
        // 动画曲线。可选值为:linear|easeInOutQuad|easeInOutExpo。
        "animationEasing": "linear"
      }
    }

切换显隐

切换组件为显示或隐藏,数据示例如下。

{
  "animationType": "fade",
  "animationDuration": 1000,
  "animationEasing": "linear"
}
  • animationType:动画方式。可配置为appear(出现/消失)、fade(渐隐渐现)、slideToUp(飞入/飞出),不配置表示无动画。

  • animationDuration:动画延时,默认为1000ms。

  • animationEasing:动画曲线。可配置为linear(匀速)、easeInOutQuad(平滑)、easeInOutExpo(慢快慢)。

显示

隐藏

更新组件配置

动态更新组件的样式配置。

  1. 先在组件的样式面板中,单击复制配置到剪贴板,获取组件的配置数据。

  2. 根据需要,在蓝图编辑器配置页面的数据处理节点,更改对应样式的字段值。