下拉框选择器

配置

• 搜索配置：单击配置面板右上角的搜索配置，可在搜索配置弹出框中输入您需要搜索的配置项名称，快速定位到该配置项，系统支持模糊匹配。详情请参见搜索组件配置。
• 图表尺寸：包括组件的宽度和高度，单位为px。可单击锁定组件的宽高比，等比例修改组件的宽高。再次单击进行解锁，解锁后宽高比不受限制。
• 图表位置：包括组件的横坐标和纵坐标，单位为px。横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。
• 旋转角度：以组件的中心为中心点，进行旋转，单位为度（°）。
  • 手动输入角度值，控制组件的旋转角度。
  • 拖动图标内的黑点，控制组件的旋转角度。
  • 单击图标，控制组件左右翻转样式。
  • 单击图标，控制组件上下翻转样式。
• 透明度：取值范围为[0,1]。为0时，图表隐藏；为1时，图表全部显示。默认为1。
• 全局样式
  
  
  • 字体：文本的字体系列，默认为微软雅黑。
    说明 请选择您系统中已经安装的字体，如果您系统中没有选择的字体，组件文本会显示为默认的字体样式。
  • 默认选中：下拉框初始化时默认显示的内容，需要输入选项中已经存在的内容。
    说明 如果下拉框选择器为空白，下拉框会默认显示数据中的第一个value值。
• 输入框样式
  
  
  • 背景色：下拉框选择器的背景颜色，可参考颜色选择器说明进行修改。
  • 缩进：下拉框选择器内提示文字的缩进。
  • 提示文本样式：该样式配置项在PC端生效。
    • 文本内容：提示文本的内容。
    • 颜色：提示文本的颜色。
    • 字体大小：提示文本的字体大小。
    • 字体粗细：文本的字体粗细，默认为normal。
  • 选中文字样式：选中的下拉框选项的文本样式。
    • 颜色：选中文字的颜色。
    • 字体大小：选中文字的字体大小。
    • 字体粗细：选中文字的字体粗细，默认为normal。
  • 边框样式
    • 普通样式
      • 圆角：边框的圆角大小，取值范围为0到360。数值为0的时候下拉框为方形，数值为360时下拉框为圆形。
      • 宽度：边框的宽度。
      • 颜色：边框的颜色。
    • 选中样式
      • 圆角：被选中项的边框圆角大小，取值范围为0到360。数值为0的时候下拉框为方形，数值为360时下拉框为圆形。
      • 宽度：被选中项的边框的宽度。
      • 颜色：被选中项的边框的颜色。
  • 箭头样式：下拉框箭头的样式。
    • 大小：下拉框箭头的大小。
    • 颜色：下拉框箭头的颜色。
    • 右侧偏移值：下拉框箭头与组件右边界的距离。
• 下拉框样式：该样式配置项在PC端生效，移动端保持原生样式。
  
  
  • 容器最大高度：下拉框容器的最大高度，单位为px。
  • 选项高度：下拉框中每个选项的高度，单位为px。
  • 容器顶部间距：下拉框容器顶部距离下拉框选择器的距离，单位为px。
  • 边框样式
    • 边框宽度：下拉框边框的宽度，单位为px。
    • 边框颜色：下拉框边框的颜色。
    • 边框圆角：下拉框边框的圆角大小，取值范围为0到360。数值为0的时候下拉框为方形，数值为360时下拉框为圆形。
    • 线条类型：下拉框边框的线条类型，默认为实线。
  • 悬浮样式
    • 普通样式
      • 背景色：下拉框内选项的背景颜色。
      • 边框颜色：下拉框内选项的边框颜色
      • 颜色：下拉框内选项的字体颜色。
      • 字体大小：下拉框内选项的字体大小。
      • 字体粗细：下拉框内选项的字体粗细，默认为normal。
    • 选中样式：被选中的下拉框选项的样式，可参考上文的普通样式进行配置。

数据

上图中的示例数据如下：

[
  {
    "value": "Hangzhou"
  },
  {
    "value": "Shanghai"
  },
  {
    "value": "Beijing"
  }
]

value：下拉框选择器中各选项显示的内容。

交互

勾选下拉框选择变化响应事件右侧的启用，开启组件交互功能。下拉框选择器拉菜单组件拥有交互配置，可改变下拉框选择项中的内容，触发数据请求，抛出回调值，然后在其他组件中配置使用。

默认抛出数据面板中配置的 value 值，具体配置请参考组件回调ID配置。

节点编程交互配置

在大屏编辑页面中，单击顶部菜单栏的配置节点编程图标，进入下拉框选择器的节点编程配置页面。可以看到如下图所示的下拉框选择器的节点编程配置参数。

• 事件
  • 当数据接口请求完成时

    数据接口请求返回并经过过滤器处理后抛出的事件，同时抛出处理后的JSON格式的数据。具体数据可参见上文的数据示例。

  • 当前值变化时

    当前值发生变化时抛出的事件，同时抛出选中的选项。

• 动作
  • 请求数据接口

    重新请求服务端数据，上游转换器或图层节点抛出的数据将作为参数。例如下拉框选择器配置了API数据源为http://api.test，传到请求数据接口动作的数据为{ id: '1'}，则最终请求接口为http://api.test?id=1。

  • 导入数据接口

    按组件绘制格式处理数据后，导入组件，重新绘制。不需要重新请求服务端数据。具体数据可参见上文的数据示例。

  • 获取当前下拉框值

    表示获取当前输入框中的已选择的值。

  • 设置当前单选框选中值

    表示设置当前输入框中的值。

  • 清空组件到默认值

    表示还原到默认值。

  • 更新组件配置

    动态更新组件的样式配置。需要首先在组件的配置面板中，单击复制配置到剪贴板，获取组件配置数据。再根据需要在节点编程配置页面的转换器中更改对应样式的字段值。

  • 显示

    显示组件，不需要参数。

  • 隐藏

    隐藏组件，不需要参数。