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

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

1. 示例效果

仪表盘根据列表（单选）类型的筛选器备选值进行轮播，可以通过菜单工具栏中的“开始轮播”、“暂停轮播”以及“停止轮播”按钮控制轮播。

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

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

2. 操作步骤

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

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

  • 步骤三：添加一个列表（单选）类型的筛选器“年份”，并应用到所需组件上。

  • 步骤四：重新绘制筛选器样式

① 选中筛选器组件“年份”，右键进入“宏管理”界面

② 新建宏，在弹出的新建模块对话框中输入名称，勾选对象为组件，组件为“年份”，事件为“onBeforeRender（组件渲染前）”

③ 该宏示例主要使用的是 IFilterPortlet 接口下的appendCss方法，把下面宏代码复制到代码区域：

function main(page: IPage, portlet: IFilterPortlet) {

    renderOptions(portlet)
}


function renderOptions(portlet: IFilterPortlet) { 
    // 去掉产品内置的单选框背景颜色，设为透明
    portlet.appendCss('.theme__filter-color .el-radio__inner::after', `{
        background-color: transparent;
    }`)
    portlet.appendCss('.el-radio', `{
        display: flex;
        flex-direction: column;
        height: 32px;
    }`)
    portlet.appendCss('.el-radio__inner', `{
        background-color: #fff !important;
        z-index: 2;
    }`)
    portlet.appendCss('.el-radio__label', `{
        padding-left: 0;
    }`)
    portlet.appendCss('.el-radio__input.is-checked .el-radio__inner', `{
        border-color: red;
        width: 16px;
        height: 16px;
    }`)
    portlet.appendCss('.el-radio__input.is-checked .el-radio__inner::after', `{
        background-color: red;
        width: 11px;
        height: 11px;
    }`)
    portlet.appendCss('.el-radio__input .el-radio__inner::after', `{
        transition: 0;
    }`)
    portlet.appendCss('.filter-list__td', `{
        padding: 0;
    }`)
    portlet.appendCss('.filter-list__td .el-radio::after', `{
        content: " ";
        display: block;
        width: 100%;
        height: 2px;
        background-color: blue;
        position: relative;
        top: -24px;
        right: -50%;
        z-index: 1
    }`)

    portlet.appendCss('.filter-list__td:last-child .el-radio::after', `{
        display: none;
    }`)

    portlet.appendCss('.el-radio__input', `{
        flex: 1
    }`)
}

④ 保存宏代码，刷新仪表盘，可看到筛选器样式已进行重绘。

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

① 进入宏管理界面，新建宏，在弹出的新建模块对话框中输入名称，勾选对象为“仪表盘”，事件为“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)
        launchCarousel(portlet)
    }, 1000)
    
}

/**
 * 启动筛选器轮播
 */
function launchCarousel(portlet: IFilterPortlet) {
    // 轮播配置项
    let options: ICarouselOptions = {
        timeout: 1.5, // 时间间隔1.5秒
        infinite: true // 无限循环
    };
    portlet.turnOnCarousel(options);
}

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

3. 下载资源

根据筛选器（列表、下拉）备选值轮播.xml