1. 报表总览
1.1. 背景描述
在信息化高速发展的时代背景下，各银行积累的客户数据、交易记录、管理数据等呈爆炸性增长，海量数据席卷而来。数据是信息的基础，海量数据意味着海量机遇和风险，通过Smartbi可以为银行提供变革性的价值创造潜力，利用好这份重要的资产来开展有效的数据分析和挖掘，用数据帮助决策，从而促进管理并提升企业价值。因此通过多角度分析业务办理情况，评价各区域分行的业绩成果，从中获取到能够提高效益的方案，是很有必要的。
1.2. 需求分析
根据银行信用卡业务数据可实现以下目标：
- 查看各个城市分行办卡情况的数据和排名占比；
- 了解国内区域销售情况和总体基本业务办理情况；
- 了解信用卡卡种、账单类型等因素对业务情况的影响。
2. 定制方法
2.1. 总体设计
根据需求规划整个大屏所展现的内容，以及具体通过哪些组件实现最终效果。
该大屏需要展示办卡数量城市排行、国内信用卡用户分布、各卡种占比分析、账单类型比例分析等内容，整体布局设计如下：
总体设计详情可参考 如何规划自助仪表盘。
设置项说明如下：
2.1.1. 布局
进入“大屏可视化”界面，设置“页面工具”区域内的 设置
| 设置项 | 参数 | 说明 |
|---|---|---|
| 仪表盘尺寸 | 1920*1080 | 仪表盘尺寸通常由需要投屏的屏幕大小来决定。 |
| 缩放方式 | 等比缩放宽度铺满 | 宽度铺满全屏，高度按比列自动缩放。 |
| 图形渲染器 | Canvas | 适用于图像密集型编程，如高性能图形、复杂场景的实时动画等。 |
详情请参考 自助仪表盘-布局 。
2.1.2. 主题
| 一级设置项 | 二级设置项 | 参数 |
|---|---|---|
| 仪表盘 | 背景 | 上传自定义背景图片，将“默认”改为“滚动” |
| 组件 | 背景 | 颜色选择透明 |
详情请参考自助仪表盘-主题区 。
2.2. 组件详解
本示例使用【数据模型】银行信用卡业务数据。
2.2.1. 标题
- 标题已采用大屏底图实现，可通过ps设计更酷炫的标题，自由度更高。
- 也可采用文字组件来实现，详情请参考 文本组件。
2.2.2. 办卡数量Top城市榜
| 数据 | 定制方法 | 效果 |
|---|---|---|
列：从 维度-办卡数量排行 内，依次拖拽“排名、城市名称、数量、占比”字段到列上 | 1、拖拽 表 组件到画布区，拖拽边框大小到合适尺寸。 2、在组件设置中设置如下：
|
|
详情请参考 图标组件-表组件。
2.2.3. 国内信用卡用户分布图
| 数据 | 定制方法 | 效果 | |
|---|---|---|---|
将 维度-地理维-“省份”、度量-“数量” 拖拽到该地图组件上 | 1、拖拽图形组件到画布区，拖拽边框大小到合适尺寸，点击右上角的智能配图将图形类型转化为地图。 2、在标记区中选择地图的子图类型为“散点地图”；【颜色】起始颜色为#F9E835，终点颜色为#F9E835；大小为1.6；点击字段“数量”，选择 TopN设置：TopN个数为3，渲染样式为fill。
3、在组件设置中设置如下：
4、自定义属性 将下列代码覆盖掉自定义属性内的代码。
|
|
详情请参考 图形组件-地图 。
2.2.4. 各卡种占比分析
| 数据 | 定制方法 | 效果 | |
|---|---|---|---|
标记区 颜色： 维度-卡种分析-“卡种” 角度：度量-“数量” | 1、从组件栏内拖拽图形组件到画布区，拖拽边框大小到合适尺寸，点击右上角的智能配图将图形类型转化为饼图。 2、在标记区中选择饼图的子图类型为“南丁格尔玫瑰图（半径模式）”，设置卡种的排序方式为自定义，排序依次为白金卡、金普卡、心e金卡、智商卡、采购卡、乐惠金卡、旅游卡、主题卡、碳金卡、联名卡，颜色为“#C23531”、“#2F4554”、“#61A0A8”、“#D48265”、“#91C7AE”、“#749F83”、“#CA8622”、“#BDA29A”、“#6E7074”、“#546570” 3、在组件设置中设置如下：
4、自定义属性 将下列代码覆盖掉自定义属性内的代码。
|
|
详情请参考 图形组件-饼图 。
2.2.5. 电子纸质账单比例
1、从组件栏内拖拽TAB页组件到相应区域，拖拽边框大小到合适尺寸，点击右上角的智能配图将图形类型转化为饼图。
2、点击页签1旁边的“+”号新建页签，点击右上角的智能配图将新建页签的图形类型转化为雷达图。
3、定制方法
组件 | 定制方法 | 效果 | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
清单表 | 1、数据：将 维度-各卡种的账单统计-“卡种”、度量-“纸质账单数量”和“电子账单数量”拖拽到该组件上。
2、在组件设置中设置如下：
|
| |||||||||||||||
雷达图 | 1、数据：将 维度-各卡种的账单统计-“卡种”、度量-“纸质账单数量”和“电子账单数量”拖拽到该组件上。
2、标记区：子图类型为圆环面积。 3、在组件设置中设置如下：
4、自定义属性
|
|
2.3. 设置动态效果（可选）
2.3.1. 添加动态图片
可以通过添加动态图片实现动态效果，目前仪表盘支持apng、gif格式的动态图片。下载动态素材，将素材插入到合适的位置上。
2.3.2. 宏代码实现
目前仪表盘无法实现的效果都可以通过宏管理实现，现为表格组件办卡数量Top城市榜添加滚动效果：
- 右键点击 表格组件“办卡数量Top城市榜” ，选择宏管理，跳转到组件对应的宏管理页面下，新建客户端宏
- 填写宏模块名称，选择onAfterRender(组件渲染后)
根据实际需求编写宏代码，以下宏代码为仪表盘表格滚动效果：
function main(page: IPage, portlet: ITablePortlet) {
const fps = 10 // 每秒帧率，帧率越大，越流畅
const step = 5 // 每帧步长，步长越大，滚动速度越快
// 每秒滚动距离 = fps * step
// 非正式接口
const portletEl = (portlet as any).__portletVue__.$el;
// 找到表格
const tableBody = portletEl.querySelector('.tableContainer .el-table__body-wrapper')
// 隐藏滚动条
portlet.appendCss('.ps__thumb-y', {
display: 'none'
})
// 清理定时器
if ((portlet as any).scrollInterval) {
clearInterval((portlet as any).scrollInterval)
}
// 轮播
(portlet as any).scrollInterval = setInterval(() => {
// 超过最大长度重置
if (tableBody.scrollTop + tableBody.offsetHeight >= tableBody.scrollHeight) {
tableBody.scrollTo({
top: 0,
})
} else {
tableBody.scrollTo({
top: tableBody.scrollTop + step,
})
}
// console.log('scrollTop: ', bodyWrapper.scrollTop)
// console.log('scrollHeight: ', bodyWrapper.scrollHeight)
// console.log('offsetHeight: ', bodyWrapper.offsetHeight)
}, 1000 / fps)
}
|
更多宏示例以及详情请参考自助仪表盘宏
3.资源下载
| 资源名 | 说明 |
|---|---|
| demodata.rar | 数据库资源文件 |
| 银行信用卡业务分析平台.xml | 报表资源文件 |
| 图片素材.zip | 图片素材 |