时间轴是基础交互组件的一种,支持自定义时间轴的节点标签样式、事件节点样式以及交互等,适用于在大屏中展示不同时间段的数据变化情况,比如使用时间轴组件实现数据轮播。本文档为您介绍时间轴各配置项的含义,帮助您快速准确地使用时间轴组件。

样式

  • 基础属性
    • 图表尺寸:组件的宽度和高度,单位为px。
    • 图表位置:组件在大屏中的位置,通过横纵坐标来定义,单位为px。
    • 其他:组件的旋转角度和透明度。
  • 全局样式
    • 字体:组件中所有文本的字体系列,默认为微软雅黑
    • 轮播:勾选后,事件会一直循环播放。去勾选,事件只播放一次。
    • 间隔时间:配置一个事件节点到另一个事件节点所需要的时间。
    • 停留时间:配置在一个事件节点上停留的时间。
    • 左右边距:配置开始事件节点和结束事件节点与组件边界之间的水平距离,建议距离不要超过图表宽度的一半。
  • 事件节点
    • 种类:事件节点的种类,可选:数值型类目型时间型。下图分别为数值型类目型的事件节点样式。


    • 数据格式:需要根据数据格式进行配置,例如数据为1982-02-01 17:09,则此配置项应该设置为%Y-%m-%d %H:%M。只有当事件种类时间型时,该配置项才会显示。

    • 节点形状:节点的形状。
    • 节点大小:节点的大小。
    • 默认样式:未选中时节点的样式。

      • 节点填充色:节点的填充颜色,可参考颜色选择器说明进行修改。
      • 节点边框色:节点的边框颜色。
      • 节点边框粗细:节点的边框粗细。
    • 选中样式:节点被选中后的样式。

      • 节点填充色:被选中节点的填充色。
      • 节点边框色:被选中节点的边框色。
      • 节点边框粗细:被选中节点的边框粗细。
  • 节点标签-下
    • 上下偏移:轴线下侧标签距离水平中心轴的距离。

    • 旋转角度:轴线下侧节点标签的旋转角度。
    • 默认样式
      • 字号:节点标签的默认字体大小。
      • 颜色:节点标签的默认颜色。
      • 字体粗细:节点标签的默认字体粗细。
    • 选中样式:参考上文的默认样式进行配置。
  • 节点标签-上:参考节点标签-下进行配置。
  • 背景

    • 粗细:中间轴线的粗细。
    • 默认样式:中间轴线的默认颜色。
    • 选中样式:中间轴线的选中颜色。
  • 交互:组件之间数据联动的变量,需要配置为数据中的某一个字段。
    注意 此功能已更新到 交互面板中, 配置面板的该功能将弃用,请尽快升级。新版本的交互功能支持配置多个字段。

数据



上图中的示例数据如下:
[
  {
    "name": "1982年",
    "value": 1982,
    "text": "事件1"
  },
  {
    "name": "1985年",
    "value": 1985,
    "text": "事件2"
  },
  {
    "name": "2009年",
    "value": 2009,
    "text": "事件3"
  },
  {
    "name": "2014年",
    "value": 2014,
    "text": "事件4"
  }
]
  • name:轴线下侧标签的显示文本。
  • text:(可选)轴线上侧标签的显示文本。
  • value:设置事件节点的值。如果为日期格式,需要与数据格式配置项保持一致。

  • width:(可选)标签文本的宽度,单位为px,默认不配置。
  • height:(可选)标签文本的高度,单位为px,默认不配置。

交互

勾选 启用,开启组件交互功能。当时间轴发生变化时,会触发数据请求,抛出回调值,动态加载不同事件的数据。默认抛出数据中的 value 值,具体配置请参考组件回调ID配置
说明 使用技巧:您可以使用时间轴组件实现数据轮播,使用方法如下:
  1. 在时间轴的数据面板配置轮播的参数,并在交互中配置该参数作为交互字段。
  2. 将时间轴组件移到可视化屏幕的范围外,或者把所有颜色都设置为透明,隐藏时间轴。
  3. 在轮播组件中,调用所配置的回调ID,实现数据轮播。