双击此处添加文字
图片跑马灯
来源: | 作者:佚名 | 发布时间: 2024-05-09 | 79 次浏览 | 分享到:

1. 概述

1.1  应用场景

      图片展现控件通常用于在一个固定区域内,通过自动或手动切换图片来轮流展示多张图片。例如展示某连锁超市收入前十的商品,可以通过图片展示控件进行商品展示。通过图片展示,能够快速吸引人们的注意力,达到加深印象的效果,从而传达出有效的信息。

 

2. 章节简介

2.1 章节目录图

 

3. 操作流程

3.1 图片来源

3.1.1 手动上传

    打开报表,点击新增控件,从中找到高级文件夹,点击图片跑马灯

    

    点击控件->专有->上传图片

    

    可以选择上传本地图片,也可以输入在线图片链接

    

    ①   上传本地图片,点击中间的上传区域

    

进入本地文件夹中选择需要上传的图片后点击确定

上方弹出上传成功提示

点击OK后完成手动上传图片

   手动输入链接

进入上传自定义图片中,点击手动输入链接

弹出的输入框中输入图片的在线链接地址,例如输入熊猫图片的在线链接,点击确定

新增成功

 

3.1.2 数据集图片

    新增图片跑马灯控件

    

    点击新增的控件,点击专有,图片来源选择数据集

    

    需要后台表存储图片的来源路径,如本示例的数据集后台表

    

    数据集汇总中添加图片来源字段,并且聚合方式选择无,最后点击确定

    

    行维度添加图片名称

    

    数据集设置完毕后,需要在控件-专有中绑定图片来源和图片名称

    

    

    完成上述操作后即成功采用数据集展示图片

    

 

3.2 自定义图片属性
3.2.1 手工上传图片可自定义图片的名称和展现顺序。本地上传图片默认使用图片名称,在线链接图片默认截取一段链接做为名称。

    点击控件->专有->上传图片

    

    进入上传页面中找到切换开关,注意:上传图片指的是目前的状态为上传图片,点击切换开关后会变成拖拽排序图片

    

    

    点击图片下方的文本框即可自定义图片名称

    

    拖动图片到对应位置,即可改变展示图片的顺序

    

    打开专有->文本样式->显示文本开关,即可显示手工上传图片自定义的图片名称

    

    

3.2.2 数据集展示的图片显示名称或标识可以设置多个,如行维度中添加名称和数量

    

    随后在专有->绑定图片名称中绑定名称和数量

    

    最后打开显示文本开关,可显示多个名称或标识

    

    


3.3 专有-图片展现类型

    点击控件->专有->展现类型,可以选择展现的形式,包含三种展现类型:平铺展现、列表展现、放大展现

    

3.3.1平铺

    一张图片就是一组轮播,有三种不同的切换效果,默认为普通位移

    

    可在专有->平铺展现切换效果中选择普通位移、方块、3d翻转

    

3.3.2列表

    多张图片为一组轮播,有两种切换效果,可设置图片间隔及展现数目,默认为普通位移,图片间隔10,图片展现数目为3

    

    可在专有->平铺展现切换效果中选择普通位移、3d流

    

3.3.3放大

    两边轮播的图片呈平面缩小状态,轮播到中间的图片以原图大小显示,给人一种放大的感觉,可设置图片的缩放倍数

    

    


3.4 预警设置

    图片的预警,只能在图片名称显示,即显示在文本上,预警类型固定为分段、固定关闭“所有序列”,图片的序列值固定为图片来源,且只能预警当前所选择的预警序列值。

点击控件->专有->预警序列

    

    本次示例设置预警数量大于500名称为绿色,小于500名称为红色

    选择预警序列number,随后点击预警序列右侧的【…】进入预警设置

    

    

    进入预警设置弹窗,可设置选择色板和设置具体预警条件,具体如图所示

    

    设置number大于500显示绿色

    

    点击红色的修改按钮,进行格式设置,这里把颜色设置为绿色

    

    同理,新增条件设置小于500的预警条件

    

    点击红色编辑按钮进入格式编辑

    

    最后点击确定后查看效果,当数量大于等于500为绿色文本,小于500为红色文本

    

    

3.5 注意事项

1、当添加列维度时,图片展现控件显示空白,场景无实际意义;

2、当图片来源选择为数据集时,图片路径和图片名称一定要绑定正确。

3、图片跑马灯可设置联动、自定义提示和钻取等交互功能,当图片展现控件设置联动或钻取功能时,只有点击图片名称才可触发,单击图片名称实现联动效果,双击图片名称则是实现钻取效果