更新时间:2022-02-22 GMT+08:00

轮播图

本章节主要介绍视频组件各配置项的含义。

样式

图1 轮播图
  • 尺寸位置
    • 图表尺寸:设置图表的宽和高。单位为px。
    • 图表位置:设置图表在画布中的位置。单位为px。
  • 全局样式

    设置图片标题的字体和字号。

  • 动画
    • 停顿:设置图片停顿显示的时长。
    • 速度:设置图片切换的速度。
    • 特效:设置图片切换的特效,支持水平滚动、垂直滚动。
  • 图片

    设置图片使用的缩放模板,支持默认比例、按比例缩放、裁剪缩放、拉伸缩放。

  • 描述
    • 背景色:设置图片标题的背景色。
    • 字体颜色:设置图片标题的字体颜色。
    • 字体粗细:设置图片标题的字体粗细。
    • 长度(%):设置图片标题的长度。
    • 宽度(%):设置图片标题的宽度。
    • 上边距(px):设置图片标题与组件图层之间的上边距。
    • 左边距(px):设置图片标题与组件图层之间的左边距。
    • 对齐方式:设置图片标题的对齐方式,可设置为水平居中、左侧对齐、右侧对齐。
  • 圆点
    • 圆点颜色:设置图片待切换状态时,下方圆点的颜色。
    • 当前颜色:设置图片正在显示状态时,下方圆点的颜色。

数据

图中的示例数据如下:

[
  {
    "description": "第一张图片文字描述",
    "url": "images/carousel/img1.png"
  },
  {
    "description": "第二张图片文字描述",
    "url": "images/carousel/img2.png"
  },
  {
    "description": "第三张图片文字描述",
    "url": ""
  }
]
  • description:图片的描述。
  • url:图片的地址。支持OBS桶中的图片地址,OBS桶中的图片需设置为公共读策略。
  • 数据源类型:选择图表的数据源。系统提供了多种数据源供用户选择,您需要先添加数据源,具体操作请参见数据连接概述
  • 数据转换器:选择数据转换器,可以将数据转换为符合展示需求数据,数据转换器的详细介绍,请参见使用数据转换器
  • 自动更新请求:勾选自动更新请求,并设置更新间隔后,数据将根据间隔时间自动轮询。
  • 预览结果:单击“预览结果”,显示选择的数据源的数据信息。单击“更新查询”可以在数据源变更时手动更新组件数据。

交互

关于组件是否支持交互功能及交互的使用方法,请参考设置组件事件交互