页面历史

...

目前自助仪表盘没有只显示部分图例的设置，因此我们可以通过自助仪表盘宏来实现。

自助仪表盘中原始图效果

自定义一个自助仪表盘，通过图形组件定义一个饼图：

Image Removed

通过宏实现效果

下图显示了图例只显示前8个的效果。

Image Removed

宏设置详情

实现以上效果的设置方法如下：

1、在“分析展现”，界面找到饼图所在的自助仪表盘，在更多菜单中选择 宏管理：

Image Removed

2、进入到“宏管理”界面：单击 新建客户端宏 按钮，在弹出的”新建模块“窗口中输入”名称“，选择对象为”组件“，选择组件和事件，如下图所示。

Image Removed

3、在”新建模块“窗口设置选项后，单击 确定 按钮，进入到宏编辑界面，输入如下宏代码：

Image Removed

1. 示例效果

下图显示了图例只显示前8个的效果。

Image Added

2.操作步骤

• 步骤一：新建一个空白的自助仪表盘

Image Added

• 步骤二：拖入图形组件，选择饼图，选择数据集或业务主题

Image Added

效果如下：

Image Added

• 步骤三：选中饼图，鼠标右键进入宏管理页

Image Added

• 步骤四：在界面新建客户端宏，弹出的新建模块对话框中输入名称，勾选对象为组件、事件为onBeforeRender

Image Added

• 步骤五：编写宏代码实现效果

Image Added

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

function main(page: IPage, portlet: IEChartsPortlet) {
    let options = portlet.getChartOptions()
    let datas = options.series[0].data
    options.legend.data = []
    for (let i = 0; i < 8; i++) { 
        let item = datas[i]
        options.legend.data.push(item.name)
    }
    portlet.setChartOptions(options)
}

• 步骤六：点击 保存，查看效果，需重新打开报表，可看到效果已实现

3.资源下载

代码资源：migrate.xml