覆盖主要内容
版本: 下个版本

时间选择器

时间选择器是高级交互组件的一种，支持自定义日历的背景颜色、日历的日期时间样式以及时间格式类型等，可以根据时间查询并动态展示其他组件的数据。本文介绍时间选择器各配置项的含义。

配置​

基础属性：包含组件的基础属性​

参数说明
图表宽度组件的宽度
图表高度组件的高度
横坐标组件的横坐标，单位为px。横坐标为组件左上角距离页面左边界的像素距离
纵坐标组件的纵坐标，单位为px。横坐标为组件左上角距离页面上边界的像素距离
旋转角度以组件的中心为中心点，进行旋转，单位为度（°）
透明度取值范围为0~1。为0时，图表隐藏；为1时，图表全部显示。默认为1

全局样式​

  • 字体：文本的字体系列，默认为微软雅黑。
信息

说明 请选择您系统中已经安装的字体，如果您系统中没有选择的字体，组件文本会显示为默认的字体样式。

  • 输入框样式
    • 缩进：输入框内文字的缩进。
    • 背景色：输入框的背景颜色。
  • 普通边框样式
参数说明
边框宽度边框的宽度，单位为px。
边框颜色边框的颜色。
边框圆角边框的圆角大小，取值范围为0~360。数值为0的时候输入框为方形，数值为360时输入框为圆形。
  • 悬浮边框样式
参数说明
边框宽度鼠标悬浮在输入框时边框的宽度，单位为px。
边框颜色鼠标悬浮在输入框时边框的颜色。
边框圆角鼠标悬浮在输入框时边框的圆角大小，取值范围为0~360。数值为0的时候输入框为方形，数值为360时输入框为圆形。
  • 文本样式
参数说明
字号文本字号的大小。
字体色输入框文本的颜色。
字体粗细文本的字体粗细，默认为normal。

日历样式 ：在预览或配置页面，单击时间选择器输入框时，显示的日历框的样式。该样式配置项在PC端生效。​

  • 日历框高度：日历框的高度。
  • 顶部间距：日历顶部距离输入框的距离。
  • 圆角：日历框的圆角大小，取值范围为0~360。数值为0的时候日历框为方形，数值为360时日历框为圆形。
  • 日历框背景色：日历框的背景色。
  • 顶部样式
    • 日期文本样式
参数说明
字号日期文本字号的大小。
字体颜色日期文本的颜色。
字体粗细日期文本的字体粗细，默认为normal。
  • 时间文本样式
参数说明
字号时间文本字号的大小。
字体颜色时间文本的颜色。
字体粗细时间文本的字体粗细，默认为normal。
  • 顶部高度：日历顶部高度的值，取值范围为10~20。顶部高度值是基于日历框高度的百分比数值。
  • 上下月图标间距：日历中上下月图标之间的距离，取值范围为0~50。
  • 年月选择框间距：日历中年月选择框的间距值，取值范围为0~50。
  • 分割线样式
参数说明
颜色顶部分割线的颜色。
线宽顶部分割线宽度的大小。
  • 主体样式
    • 分割线样式
参数说明
颜色主体分割线的颜色。
线宽主体分割线宽度的大小。
  • 高度：主体部分整体的高度。
  • 日期样式
    • 日期表格样式：日期表格首行的样式。
参数说明
背景色日期表格的背景颜色。
边框样式日期表格边框的宽度、颜色和圆角大小，取值范围为0~360。数值为0的时候边框为方形，数值为360时边框为圆形。
字号日期表格字号的大小。

  • 日期表格行列样式：日期表格具体选择行列的样式。

    • 普通样式
    参数说明
    背景色日期表格行列的背景颜色。
    边框样式日期表格行列中边框的宽度、颜色和圆角大小，取值范围为0~360。数值为0的时候边框为方形，数值为360时边框为圆形。
    字体粗细日期表格行列的字体粗细样式，默认为normal。
    字体颜色日期表格行列的字体颜色。
    • 悬停样式：鼠标悬停在日期表格行列上的样式。
    参数说明
    背景色鼠标悬停在日期表格行列上时的背景颜色。
    边框样式鼠标悬停在日期表格行列上时边框的宽度、颜色和圆角大小，取值范围为0~360。数值为0的时候边框为方形，数值为360时边框为圆形。
    字体粗细鼠标悬停在日期表格行列上时字体粗细，默认为normal。
    字体颜色鼠标悬停在日期表格行列上时的字体颜色。
    • 选中样式：鼠标选中某个日期表格行列时的样式。
    参数说明
    背景色鼠标选中时日期表格行列的背景颜色。
    边框样式鼠标选中时日期表格行列的边框的宽度、颜色和圆角大小，取值范围为0~360。数值为0的时候边框为方形，数值为360时边框为圆形。
    字体粗细鼠标选中时日期表格行列字体粗细样式，默认为normal。
    字体颜色鼠标选中时日期表格行列的字体颜色。
    • 今日样式：日期表格行列中当天的样式。
    参数说明
    背景色当日日期在表格行列的背景颜色。
    边框样式当日在日期表格行列的边框的宽度、颜色和圆角大小，取值范围为0~360。数值为0的时候边框为方形，数值为360时边框为圆形。
    字体粗细当日在日期表格行列字体粗细样式，默认为normal。
    字体颜色当日在日期表格行列的字体颜色。
    • 上下月样式：日期表格行列中除了当月之外上下月部分的显示样式。
    参数说明
    背景色上下月日期表格行列的背景颜色。
    边框样式上下月日期表格行列的边框的宽度、颜色和圆角大小，取值范围为0~360。数值为0的时候边框为方形，数值为360时边框为圆形。
    字体粗细上下月日期表格行列字体粗细样式，默认为normal。
    字体颜色上下月日期表格行列的字体颜色。
    • 星期字体样式：日期表格首行星期字体的样式。
    参数说明
    字体颜色日期表格首行星期字体颜色。
    字体粗细日期表格首行星期字体粗细样式，默认为normal。

  • 时间样式

    • 时间容器样式
    参数说明
    边框样式时间容器的边框宽度和颜色。
    字号时间容器的字体大小。

    • 时间行样式

      • 普通样式
      参数说明
      背景色时间行的背景颜色。
      字体粗细时间行字体粗细样式，默认为normal。
      字体颜色时间行字体颜色。
      • 悬停样式：鼠标悬停在时间行时候的样式。
      参数说明
      背景色悬停时候时间行的背景颜色。
      字体粗细悬停时候时间行字体粗细样式，默认为normal。
      字体颜色悬停时候时间行字体颜色。
      • 选中样式：选中特定时间行时候的样式。
      参数说明
      背景色选中某一时间行时的背景颜色。
      字体粗细选中某一时间行时字体粗细样式，默认为normal。
      字体颜色选中某一时间行时字体颜色。

  • 底部样式

    • 高度：最底部样式中高度的大小数值。
    • 底部偏移值：底部内容距离最底端的偏移距离值的大小。
    • 此刻按键样式
    参数说明
    字号此刻按键字号的大小。
    字体颜色此刻按键的字体颜色。
    字体粗细此刻按键字体粗细样式，默认为normal。
    左侧偏移值此刻按键距离最左侧偏移的数值大小。
    顶部偏移值此刻按键距离底部最顶端偏移的数值大小。
    • 切换按键样式：切换按键包括选择时间和选择时刻两种切换模式。
    参数说明
    字号切换按键字号的大小。
    字体颜色切换按键的字体颜色。
    字体粗细切换按键字体粗细样式，默认为normal。
    右侧偏移值切换按键距离最右侧偏移的数值大小。
    顶部偏移值切换按键距离底部最顶端偏移的数值大小。
    • 确定按键样式
    参数说明
    字号确定按键字号的大小。
    字体颜色确定按键的字体颜色。
    字体粗细确定按键字体粗细样式，默认为normal。
    右侧偏移值确定按键距离最右侧偏移的数值大小。
    顶部偏移值确定按键距离底部最顶端偏移的数值大小。
    背景颜色确定按键的背景颜色。
    圆角确定按键的圆角大小，取值范围为0~360。数值为0的时候按键边框为方形，数值为360时按键边框为圆形。

  • 年份跨度：设置日历年份前后年度跨数，取值范围为1~50年。

格式设置​

时间格式类型：请参考%Y-%m-%d %H:%M:%S的样式自定义配置时间格式类型。

数据​

上图中的示例数据如下。

[
    {
        "time": "2018-08-08 08:08:08"
    }
]

time：默认时间值，字符串类型，具体内容样式请参考%Y-%m-%d %H:%M:%S。

信息

说明 如果您的数据源类型为MySQL或其他类型的数据库，并且需要使用时间选择器组件展示时间类型（DateTime、Date等）的字段，可在数据配置中使用SQL语句，将时间类型转换为字符串类型。

表 1. 字段说明

配置项说明
受控模式打开开关，组件初始化状态下不请求数据，仅通过回调ID或蓝图编辑器配置的方法发起请求数据；关闭开关，可以使用自动更新请求数据
自动更新请求选中后可以设置动态轮询，还可以手动输入轮询的时间频次。清除后则不会自动更新，需要手动刷新页面，或通过蓝图编辑器和回调ID事件来触发请求更新数据
数据模型
静态数据

交互​

选中当前时间变化时右侧的启用，开启组件交互功能。时间选择器组件拥有交互配置，可改变选择器中的时间数据内容，触发数据请求，抛出回调值，然后在其他组件中配置使用。 默认抛出数据面板中配置的time值，具体配置请参见回调ID实现图表联动功能。

蓝图编辑器交互配置​

  1. 在画布编辑器页面，右键单击组件，选择导出到蓝图编辑器。
  2. 单击页面左上角的 图标。
  3. 在蓝图编辑器配置页面，单击导入节点栏内的时间选择器组件，在画布中可以看到如下图所示的时间选择器的蓝图编辑器配置参数。

  • 事件
事件说明
当数据接口请求完成时数据接口请求返回并经过过滤器处理后抛出的事件，同时抛出处理后的JSON格式的数据。具体数据请参见上文的数据系列。
当前时间变化时当前时间发生变化时抛出的事件，同时抛出该时间下对应的数据项。
  • 动作
动作
说明
请求数据接口重新请求服务端数据，上游数据处理节点或图层节点抛出的数据将作为参数。例如时间选择器配置了API数据源为[http://api.test](http://api.test)，传到请求时间选择器接口动作的数据为{ id: '1'}，则最终请求接口为[http://api.test?id=1](http://api.test?id=1)。
导入数据接口按组件绘制格式处理数据后，导入组件，重新绘制。不需要重新请求服务端数据。具体数据请参见上文的数据系列。
获取当前时间器值获取当前时间选择器的值。
清空组件到默认值表示还原到默认值。
更新组件配置动态更新组件的样式配置。需要先在组件的配置面板中，单击复制配置到剪贴板，获取组件配置数据。再根据需要在蓝图编辑器配置页面的数据处理节点中更改对应样式的字段值。
显示显示组件，不需要参数。
隐藏隐藏组件，不需要参数。
切换显隐状态切换组件显示或者隐藏。
移动将组件移动到指定位置。{// 移动方式。绝对定位：to，相对定位：by。默认值：to。"positionType": "to",// 指定位置。x坐标，y坐标。"attr": {"x": 0,"y": 0},// 动画方式。"animation": {"enable": false,// 动画延时。"animationDuration": 1000,// 动画曲线。可选值为：linear|easeInOutQuad|easeInOutExpo。"animationEasing": "linear"}}
最后一次更新 更新于