页面树结构
转至元数据结尾
转至元数据起始


该宏示例在 V10.5上 验证通过

本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配(如使用功能不一致,或多个宏代码冲突等),需根据实际需求开发代码。

1. 示例效果

仪表盘根据文本类型的筛选器备选值(备选值需在宏代码中设置)进行轮播,可以通过菜单工具栏中的“开始轮播”、“暂停轮播”以及“停止轮播”按钮控制轮播。

该宏示例需注意的事项如下:

  1. 暂停轮播后点击开始轮播:继续当前值进行轮播;
  2. 停止轮播后点击开始轮播:从头开始轮播。
  3. 多选的筛选器,每次也只轮播一个参数值。
  4. 筛选器类型为“列表单选/多选”、“下拉单选/多选”时无需配置参数值;筛选器类型为日期与文本时,则需要在宏代码中配置轮播的参数值。
  5. 宏中可以修改轮播速度以及是否循环播放。
  6. 设置的轮播间隔时间不包含数据刷新时间。比如:假设轮播间隔时间设置为1s,数据切换刷新的时间1s,则实际间隔时间为2s。
  7. “开始轮播”、“暂停轮播”以及“停止轮播”的按钮图标可以自定义。

2. 操作步骤

  • 步骤一新建一个空白的仪表盘。选择数据模型或业务主题,拖入所需组件。

  • 步骤二拖拽字段生成如下示例图表,效果如下:

  • 步骤三添加一个文本类型的筛选器“年份”,并应用到所需组件上

  • 步骤四:实现筛选器轮播以及在菜单工具栏中自定义轮播按钮。

① 在仪表盘中任意位置右键进入“宏管理”界面

② 进入宏管理界面,新建宏,在弹出的新建模块对话框中输入名称,勾选对象为“仪表盘”,事件为“onRender(每次渲染完成后)”。

③  宏示例“筛选器备选值轮播”主要使用的是

把下面宏代码复制到代码区域:

筛选器备选值轮播
function main(page: IPage) {
    const portlet: IFilterPortlet = page.getPortletsByTitle('年份')[0] as IFilterPortlet;
    
    let pageMenu = page.getPageToolbar()
    setTimeout(() => {
        pageMenu.addButton({
            icon: 'sx-icon-liked icon-16',
            tooltip: '开启轮播',
            color: '#0f0',
            handler: function () {
                launchCarousel(portlet);
            }
        }, 1)
        pageMenu.addButton({
            icon: 'sx-icon-liked icon-16',
            tooltip: '暂停轮播',
            color: 'yellow',
            handler: function () {
                portlet.pauseCarousel();
            }
        }, 1)
        pageMenu.addButton({
            icon: 'sx-icon-liked icon-16',
            tooltip: '停止轮播',
            color: 'red',
            handler: function () {
                portlet.turnOffCarousel();
            }
        }, 1)
    }, 1000)
    //launchCarousel(portlet)
}

function launchCarousel(portlet: IFilterPortlet) {
	// 筛选器类型为日期与文本时,则需要在宏代码中配置轮播的参数值。
    const standByValues: Array<IStandByValue> = [
        { value: '2016年' },
        { value: '2017年' },
        { value: '2018年' },
        { value: '2019年' }
    ]
    let options: ICarouselOptions = {
        timeout: 1.5,
        infinite: true,
        standByValues
    };
    portlet.turnOnCarousel(options);
}

  • 步骤五:点击 保存。重新访问报表,清空浏览器缓存,可看到效果已实现

3. 下载资源

根据筛选器(文本)备选值轮播.xml

  • 无标签