银行信用卡业务分析平台

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、在组件设置中设置如下：基础：【风格】无边框；【样式】自定义；【列头】颜色设置透明，字号16，字体为微软雅黑，加粗，颜色为“#FFFFFF”；【数据】颜色设置透明；字号16；字体排列方式为居中；字体颜色为“#5DECEC”；行高18。组件：设置组件标题名为：办卡数量排行，隐藏标题。

详情请参考表格组件。

2.2.3. 国内信用卡用户分布图

数据	定制方法	效果
将维度-地理维-“省份”、度量-“数量” 拖拽到该地图组件上	1、点击左上角的组件 > 图表 > 地图。 2、选择地图的类型为“散点地图”，拖拽“散点地图”图形组件到画布区，拖拽边框大小到合适尺寸；【颜色】起始颜色为#F9E835，终点颜色为#F9E835；大小为1.6；点击字段“数量”，选择 TopN设置：TopN个数为3，渲染样式为fill。 3、在组件设置中设置如下：基础：【区域边界色】和【高亮边界色】为“#93CAEA”；【缩放】否；【缩放比例】为1.12 组件：设置组件标题名为：地图，隐藏标题图例：图例位置为左上；文本字号为16，字体颜色为“#ECD623” 高级：允许左键下钻 4、自定义属性将下列代码覆盖掉自定义属性内的代码。展开源码 { "geo": { "map": "CHINA", "itemStyle": { "normal": { "areaColor": "transparent", "borderColor": "#93caea", "borderWidth": 2, "shadowColor": "#fff" }, "emphasis": { "areaColor": "transparent", "borderColor": "#93caea", "borderWidth": 1 } }, "roam": false, "zoom": 1.12 }, "textStyle": { "fontFamily": "Microsoft YaHei", "fontWeight": "normal", "fontSize": 12, "color": "", "fontStyle": "normal", "textDecoration": "none" }, "visualMap": { "itemWidth": 10, "itemHeight": 100, "pieceItemWidth": 14, "pieceItemHeight": 14, "textStyle": { "fontFamily": "Microsoft YaHei", "fontWeight": "normal", "fontSize": 16, "color": "rgba(236,214,35,1)", "fontStyle": "normal", "textDecoration": "none" }, "show": true, "left": 4, "top": 4, "right": "auto", "bottom": "auto", "align": "left", "orient": "vertical" }, "toolbox": { "show": false } }

详情请参考图形组件-地图。

2.2.4. 各卡种占比分析

数据

定制方法

效果

标记区

颜色：维度-卡种分析-“卡种”

角度：度量-“数量”

1、点击左上角的 组件 > 图表 > 饼图。

2、选择饼图的类型为“半径玫瑰图”，拖拽“半径玫瑰图”图形组件到画布区，拖拽边框大小到合适尺寸，设置卡种的排序方式为自定义，排序依次为白金卡、金普卡、心e金卡、智商卡、采购卡、乐惠金卡、旅游卡、主题卡、碳金卡、联名卡，颜色为“#C23531”、“#2F4554”、“#61A0A8”、“#D48265”、“#91C7AE”、“#749F83”、“#CA8622”、“#BDA29A”、“#6E7074”、“#546570”。

3、在组件设置中设置如下：

基础：【半径】内 20%，外 50%；【圆心位置】x 30%，y 50%；【选中模式】单选。
组件：设置组件标题名为“半径玫瑰图”，隐藏标题和浏览工具栏。
图例：【内容】勾选分类、指标、占比；隐藏分页；【大小】宽高为8；【文本】字号为8，字体颜色为“#FFFFFF”。

4、自定义属性

将下列代码覆盖掉自定义属性内的代码。

{
	"textStyle": {
		"fontFamily": "Microsoft YaHei",
		"fontWeight": "normal",
		"fontSize": "12",
		"color": "",
		"fontStyle": "normal",
		"textDecoration": "none"
	},
	"legend": {
		"left": "60%",
		"top": "center",
		"orient": "vertical",
		"show": true,
		"content": {
			"_types": {
				"classify": true,
				"metric": true,
				"percent": true
			}
		},
		"type": "plain",
		"itemWidth": 8,
		"itemHeight": 8,
		"icon": "roundRect",
		"textStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 8,
			"color": "#ffffff",
			"fontStyle": "normal",
			"textDecoration": "none"
		},
		"right": "5%"
	},
	"visualMap": {
		"left": "center",
		"top": "top",
		"orient": "horizontal",
		"show": true,
		"itemWidth": 10,
		"itemHeight": 100,
		"textStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 12,
			"color": "#515c68",
			"fontStyle": "normal",
			"textDecoration": "none"
		}
	},
	"series": [
		{
			"labelLine": {
				"normal": {
					"length": 5,
					"length2": 5
				}
			}
		}
	],
	"roseType": "radius"
}

详情请参考图表组件-饼图。

2.2.5. 电子纸质账单比例

1、点击左上角的 组件 > 其他，从组件栏内拖拽TAB组件到画布上相应区域，拖拽边框大小到合适尺寸。在【表格】列表选择“表“组件拖拽到TAB组件的页签1上。

2、点击页签2，在左上角的 组件 > 图表 > 高级选择“圆环面积雷达图“，拖拽到TAB组件的页签2上。

3、定制方法

组件

定制方法

效果

清单表

1、数据：将维度-各卡种的账单统计-“卡种”、度量-“纸质账单数量”和“电子账单数量”拖拽到TAB组件的页签1上。

2、在组件设置中设置如下：

一级设置项	二级设置项	参数
基础	风格	无边框
	样式	自定义
	列头	透明；字体为微软雅黑加粗，字号为18
	数据	字体为微软雅黑，字号为16；奇数行和偶数行：透明
组件	标题	隐藏标题

雷达图

1、数据：将维度-各卡种的账单统计-“卡种”、度量-“纸质账单数量”和“电子账单数量”拖拽到TAB组件的页签2上。

2、在组件设置中设置如下：

一级设置项	二级设置项	参数
基础	半径	75%
组件	标题	隐藏

3、自定义属性

{
	"radar": {
		"radius": "75%",
		"splitNumber": 5,
		"axisLine": {
			"show": true,
			"lineStyle": {
				"type": "solid",
				"width": 1,
				"color": "#2C507B",
				"opacity": 0.4
			}
		},
		"splitLine": {
			"show": true,
			"lineStyle": {
				"type": "solid",
				"width": 1,
				"color": "#2C507B",
				"opacity": 0.4
			}
		},
		"splitArea": {
			"show": true,
			"areaStyle": {
				"color": [
					"#282E4A",
					"#242840"
				],
				"shadowBlur": 6,
				"opacity": 0
			},
			"shadowColor": "rgba(30,144,255, 0.1)"
		},
		"shape": "circle",
		"name": {
			"textStyle": {
				"color": "#FFFFFF"
			},
			"fontSize": 14
		}
	},
	"textStyle": {
		"fontFamily": "Microsoft YaHei",
		"fontWeight": "normal",
		"fontSize": 12,
		"color": "",
		"fontStyle": "normal",
		"textDecoration": "none"
	},
	"legend": {
		"left": "center",
		"top": "top",
		"orient": "horizontal",
		"show": true,
		"type": "scroll",
		"itemWidth": 10,
		"itemHeight": 10,
		"icon": "roundRect",
		"textStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 10,
			"color": "#999999",
			"fontStyle": "normal",
			"textDecoration": "none"
		}
	},
	"visualMap": {
		"left": "center",
		"top": "top",
		"orient": "horizontal",
		"show": true,
		"itemWidth": 10,
		"itemHeight": 100,
		"textStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 12,
			"color": "#515c68",
			"fontStyle": "normal",
			"textDecoration": "none"
		}
	},
	"series": [
		{
			"areaStyle": {
				"normal": {
					"opacity": 0.5
				}
			}
		}
	]
}

详情请参考表组件、雷达图、TAB页组件。

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	图片素材
参考视频

关注我们

服务支持

页面树结构