1. 概述编辑
适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。
1.1 版本
| 报表服务器版本 | 插件版本 | 功能变动 |
|---|---|---|
| 11.0.9 | V1.14.0 | 跑马灯功能产品化，可参考文档：FVS跑马灯特效 跑马灯接口参数更新，与现有功能配置项保持一致 |
1.2 预期效果
FVS 可视化看板 V1.14.0 及之后版本中，可通过 跑马灯特效 功能直接实现跑马灯效果，且标题/富文本/表格组件均支持。
同时表格组件还支持通过 JS 实现跑马灯效果。预期效果如下图所示：
1.3 实现思路
接口详细介绍请参见文档：跑马灯接口 。
表格组件添加跑马灯事件有三种方式：
表格组件添加「初始化后事件」。详情请参见「示例一 2.4.1 节」。
通过其他组件设置「点击事件」实现点击开启滚动和停止滚动。详情请参见「示例一 2.4.3 节」。
在看板编辑界面添加「模板>页面加载结束事件」。详情请参见「第 3 章示例二」。
1.4 注意事项
startMarquee() 接口在 V1.14.0 版本中，为了对齐跑马灯特效功能配置项，对接口参数做了相应的优化。具体如下表所示：
注：旧接口在新版本插件中可以兼容，新接口不支持在旧版本插件中使用。旧接口示例文档可参考：FVS跑马灯旧接口版本。
| 版本 | 接口参数 | 参数说明 |
|---|---|---|
| V1.14.0 之前版本 | startMarquee( { offset: number, interval: number, stopOnHover: boolean, to: string } ) | 滚动效果属性，json 格式 offset：每次滚动的距离，默认为 5px，单位为 px interval：间隔时长，默认为 0.1s，单位为 s stopOnHover：鼠标悬停时是否暂停，默认为 true
to：滚动的方向，支持向上和向左，默认向上
|
| V1.14.0 及之后版本 | startMarquee( { mode:string, speed:number,to:string, stay:number, stopOnHover:boolean, joinable:boolean, } ) | 滚动效果属性，json 格式 mode：滚动内容，默认为整屏
speed：滚动速度，默认为 50px/s，单位为 px/s to：滚动的方向，支持向上和向左，默认向上
stay：滚动间隔，默认为 0s ，单位为 s stopOnHover：鼠标悬停时是否暂停，默认为 true
joinable：滚动方式是否为首尾相接，默认为 false
|
2. 示例一编辑
2.1 新建模板
点击设计器左上角「文件>新建可视化看板」，创建一张空白看板，可自定义名称和尺寸。如下图所示：
2.2 准备数据
新建数据库查询 ds1 ，SQL 查询语句为：SELECT * FROM 销量 。
2.3 设计表格
2.3.1 添加组件
在左侧组件区选择「其他>表格」，点击即可添加到页面中。
点击右侧配置区「组件」，将组件名称修改为「表格」，该名称会在跑马灯事件中用到。
然后点击「表格」组件右上角的编辑按钮 
，或点击配置区「内容>编辑组件」，即可进入表格编辑界面。
2.3.2 设计表格内容
手动输入标题行后，将对应的字段拖入到单元格中，将 A2 单元格的「单元格元素>数据设置」修改为「列表」，使表格内容较长，能更好的看到滚动效果。
设置好数据后，可自行修改单元格填充背景、字体大小等，最终表格样式如下图所示：
2.3.3 重复冻结标题行
表格滚动时，若希望标题行冻结，只有内容滚动，就需要设置重复冻结标题行了。
点击上方工具栏中的冻结按钮 
，弹出重复与冻结设置框，勾选重复标题行后，再勾选冻结行，然后点击「确定」。
完成所有设置后，点击「保存」按钮，再点击「返回可视化看板」即可返回画布编辑界面。
2.4 添加跑马灯事件
2.4.1 向上滚动示例
回到画布后，选中表格组件，点击右侧配置区「交互>事件」，添加「初始化后事件」。输入 JavaScript 代码：
注：代码中的「表格」是该表格组件的名称，需根据实际情况自行修改。
setTimeout(() => {
duchamp.getWidgetByName("表格").startMarquee(
{
mode:'item', //滚动内容为逐条滚动
speed:30, //滚动速度为 30px/s
to:'top', //滚动方向为向上滚动
stopOnHover:true, //鼠标悬浮时停止滚动
joinable:true, //滚动方式为首尾相接
}
); }, 500)
步骤如下图所示：
到这一步我们已经完成一个表格组件的向上滚动效果的设置了，我们点击模板右上角的「预览」按钮，预览效果如下图所示：
2.4.2 向左滚动示例
1）再添加一个表格组件，将其组件名称设置为「表格2」。
表格内容，我们只需将标题纵向排布，数据字段单元格的扩展属性修改为「横向扩展」即可。如下图所示：
2）对于标题纵向排布的表格，设置重复冻结时需要选择「标题列」。如下图所示：
3）同样给表格组件添加一个「初始化后事件」，输入向左滚动的 JavaScript 代码：
setTimeout(() => {
duchamp.getWidgetByName("表格2").startMarquee(
{
mode:'item', //滚动内容为逐条滚动
speed:30, //滚动速度为 30px/s
to:'left', //滚动方向为向左滚动
stopOnHover:true, //鼠标悬浮时停止滚动
joinable:true, //滚动方式为首尾相接
}
); }, 500)
4）效果预览
2.4.3 点击停止滚动
除了表格自身的加载结束事件，我们还可以通过给 标题组件 添加「点击事件」，实现跑马灯的开始与停止。这里我们以停止滚动为例，进行操作演示。
1）选择组件区「其他>标题」，点击添加到页面中，在配置区「内容」中修改标题显示文本内容为「点击停止滚动」。如下图所示：
2）在选中标题组件的情况下，点击配置区「交互>点击事件」，添加一个 JavaScript 事件，JavaScript 代码如下：
setTimeout(() => {
duchamp.getWidgetByName("表格").stopMarquee();
duchamp.getWidgetByName("表格2").stopMarquee()
}, 500)
步骤如下图所示：
2.5 效果预览
预览后滚动，点击标题停止滚动，预览效果如下图所示：
注：不支持移动端。
3. 示例二编辑
本例讲解的是表格组件使用模板的「页面加载结束事件」实现多个分页多个表格的跑马灯效果。预期效果如下图所示：
3.1 模板准备
新建模板、添加表格组件等操作，均可参考示例一，这里不再赘述，只简单讲解下模板的内容。
1）模板中包含两个分页，分别为「页面1」和「页面2」。
2）两个分页上各有一个表格，表格名称均为「表格」。
注：不同分页的组件名称可以相同，同一分页的组件名称不能相同。
如下图所示：
3.2 添加跑马灯事件
在菜单栏顶部的模板中选择「页面加载结束事件」，输入 JavaScript 代码：
duchamp.on("storychange", (current) => {
setTimeout(() => {
if (current === "页面1") {
duchamp.getWidgetByName("表格").startMarquee({
mode:'item',
speed:30,
to:'top',
stopOnHover:true,
joinable:true,
});
};
if (current === "页面2") {
duchamp.getWidgetByName("表格").startMarquee()
}
}, 500);
});
注：因为「页面加载结束事件」只在初次加载的时候运行一次，所以上述代码中加上了分页切换的 JS，可实现多个分页的表格开启跑马灯效果，且页面切换时表格依然保持跑马灯效果。
步骤如下图所示：
完成后点击保存预览即可。
注：不支持移动端。