房地产投资分析面板

背景

近年来，地产行业进入管理红利时代，房地产行业正在加快数据化转型，房地产集团以“取数、看数、分析数、用数”为核心的数据消费者，以及以数据资产生产、供应、数据应用运营为核心的数据运营者，对数据应用范围、质量、效率、智能化程度以及数据门户通用能力支持提出了更高的要求和期待。

场景意义

“房地产投资分析面板”基于Smartbi 大屏可视化制作；结合自助仪表盘快速计算、交互等功能，将房地产投资相关数据呈现在屏幕中，让数据开口说话，帮助企业辅助决策，防范风险；同时实现业务全流程的数据化运营，实施稳健的财务策略以及降低投资风险，降本增效，赋能员工价值创造，助力决胜管理红利时代。

“房地产投资分析面板”效果如下图所示：

定制方法

总体设计

根据需求规划“房地产投资分析面板”，整体布局设计如下：

布局各设置项说明如下：

设置项	参数	说明
尺寸	1920*1080	根据需要投屏的屏幕大小，设置屏幕尺寸
缩放方式	等比缩放宽度铺满	宽度铺满全屏，高度按比列自动缩放。
图形渲染器	SVG	一种使用XML描述2D图像的语言。文本渲染能力强
主题	深色主题-大屏	选择深色主题，在仪表盘中上传自定义背景并选择拉伸和默认。（背景图片详情可参考图片资源）
配色	#041C38 #FFA500 #1E90FF	大屏选择深蓝色作为背景色，提升专业性。组件选择天蓝色、黄色、橙色、浅绿色等

示例详解

1、年度筛选器

组件名称	组件类型	数据模型	定制方法	实现效果
筛选器	无	无	1、将年字段拖拽到筛选区，生成筛选器 2、筛选器类型选择列表（单选） 3、将筛选器应用于当前所有组件 4、筛选器设置如下： 5、筛选器基础设置如下：	年度筛选器可对房地产投资数据分年度进行分析，让管理者可以更好地掌握每年投资情况，效果如下图所示：

2、集团项目投资情况

组件名称	组件类型	数据模型	定制方法	实现效果
已完成总投资	文本组件	房地产投资分析字段：正常签约	1、拖入文本组件到画布区 2、数据来源选择数据模型：房地产投资分析，标记区选择字段“正常签约” 339px3、输入文本内容，获取字段数据，调整内容样式。	“集团项目投资情况”对此年项目投资金额进行分析，通过计划投资金额、已完成总投资以及投资完成率等指标，供运营者对来年投资比例进行调整，实现利益最大化；效果如下图所示：
计划投资	标签组件文本组件	房地产投资分析字段：签约目标	1、拖入标签组件到画布区 2、输入内容，调整样式 3、拖入文本组件到画布区 4、数据来源选择数据模型：房地产投资分析，标记区选择字段“签约目标” 5、输入文本内容，获取字段数据，调整内容样式。
投资完成率	标签组件文本组件	房地产投资分析字段：投资完成率	1、拖入标签组件到画布区 2、输入内容，调整样式 3、拖入文本组件到画布区 4、数据来源选择数据模型：房地产投资分析，标记区选择字段“投资完成率” 5、输入文本内容，获取字段数据，调整内容样式。
背景图	图片组件	无	1、拖入图片组件到画布区 2、本地上传所需的gif图（详情可参考图片资源）

3、项目概览

组件名称

组件类型

数据模型

定制方法

实现效果

项目总数

文本组件

项目个数

字段：Total

1、拖入文本组件到画布区

2、数据来源选择数据模型：项目个数，标记区选择字段“total”

3、输入文本内容，获取字段数据，调整内容样式。

“项目概览”对本年度投资的项目进行分析，可了解本年度在居民住房和商业建筑的项目数量，效果如下图所示：

居民住房项目

文本组件

项目个数

字段：Home

1、拖入文本组件到画布区

2、数据来源选择数据模型：项目个数，标记区选择字段“Home”

3、输入文本内容，获取字段数据，调整内容样式。

商业建筑项目

文本组件

项目个数

字段：Building

1、拖入文本组件到画布区

2、数据来源选择数据模型：项目个数，标记区选择字段“Building”

3、输入文本内容，获取字段数据，调整内容样式。

4、IRR/净利润率

组件名称

组件类型

数据模型

定制方法

实现效果

IRR/净利润率

图表：趋势线-堆积曲线图组件

IRR净利润率

字段：城市、irr、净利润率

1、拖入堆积曲线图组件到画布区

2、数据模型选择IRR净利润率，列选择字段城市，行选择字段irr、净利润率

3、改变曲线颜色如下：

4、基础设置如下：

5、坐标轴设置如下：

6、图例设置如下：

7、自定义属性如下：

{
	"dataZoom": [
		{
			"type": "slider",
			"height": 10,
			"show": true,
			"backgroundColor": "rgb(100,149,237)",
			"fillerColor": "rgb(\t30,144,255)",
			"xAxisIndex": [
				0
			],
			"start": 1,
			"end": 35,
			"zoomLock": true
		}
	],
	"grid": {
		"bottom": 70
	}

“IRR/净利润率”通过线图对本年度投资的irr和净利润率进行分析，可查看各城市下的盈利情况，为下年度各城市的投入提供参考，效果如下图所示：

5、项目投资收益达成率

组件名称

组件类型

数据模型

定制方法

实现效果

项目投资收益达成率

图表：柱图-堆积横条图组件

项目投资收益达成率

字段：达成率、按期达成率、area_name

1、拖入堆积横条图组件到画布区

2、数据模型选择项目投资收益达成率，列选择字段达成率、按期达成率，行选择字段area_name

3、基础设置如下：

4、坐标轴设置如下：

5、图例设置如下：

6、自定义属性如下：

{
	"series": [
		{
			"itemStyle": {
				"normal": {
					"color": {
						"x": 0,
						"y": 1,
						"x2": 0,
						"y2": 0,
						"type": "linear",
						"global": false,
						"colorStops": [
							{
								"offset": 0,
								"color": "#0C3151"
							},
							{
								"offset": 0.5,
								"color": "#2D8AC8"
							},
							{
								"offset": 1,
								"color": "#4095F7"
							}
						]
					}
				}
			}
		},
		{
			"markLine": {
				"lineStyle": {
					"normal": {
						"color": "rgba(51,141,214,1)"
					}
				},
				"symbol": [
					"none",
					"arrow"
				],
				"label": {
					"show": true,
					"normal": {
						"color": "inherit",
						"textBorderColor": "",
						"textBorderWidth": 0,
						"formatter": "{c}"
					}
				}
			},
			"itemStyle": {
				"normal": {
					"color": {
						"x": 0,
						"y": 1,
						"x2": 0,
						"y2": 0,
						"type": "linear",
						"global": false,
						"colorStops": [
							{
								"offset": 0,
								"color": "#373433"
							},
							{
								"offset": 0.5,
								"color": "#AE8442"
							},
							{
								"offset": 1,
								"color": "#EBA73D"
							}
						]
					}
				}
			}
		}
	]
}

“项目投资收益达成率”通过堆积横条图分析展示了本年度各区域的达成率以及按期达成率，方便管理者统计各区域的绩效以及项目完成情况，效果如下图所示：

6、新增重资产分析

组件名称

组件类型

数据模型

定制方法

实现效果

新增重资产分析

图表：柱图-对比柱图组件

房地产投资分析

字段：城市、土地面积、上年土地面积

1、拖入对比柱图组件到画布区

2、数据模型选择项目房地产投资分析，列选择字段城市，行选择字段土地面积、上年土地面积

3、图例设置如下：

4、坐标轴设置如下：

“新增重资产分析”通过对比柱图能够清晰的分析出本年度土地面积较上年各省份增长情况，效果如下图所示：

7、各区域收益分析

组件名称	组件类型	数据模型	定制方法	实现效果
已达成收益	标签组件文本组件	房地产投资分析字段：正常签约	1、拖入标签组件到画布区 2、输入内容，调整样式 3、拖入文本组件到画布区 4、数据来源选择数据模型：房地产投资分析，标记区选择字段“正常签约” 5、输入文本内容，获取字段数据，调整内容样式。	“各区域收益分析”通过环形图以及其他组件组合分析本年度达成收益详情、目标差额以及达成率，效果如下图所示：
达成率	文本组件	房地产投资分析字段：达成率	1、拖入文本组件到画布区 2、数据来源选择数据模型：房地产投资分析，标记区选择字段“达成率” 3、输入文本内容，获取字段数据，调整内容样式。
货值分析	图表：饼图-环形图组件	房地产投资分析字段：货值分析、货值分析指	1、拖入环形图组件到画布区 2、数据来源选择房地产投资分析，标记区字段选择“货值分析、货值分析值” 3、基础设置如下： 4、图例设置如下： 5、自定义属性如下：展开源码 { "series": [ { "color": [ "#6eeeff", "#0394dd", "#1064b7" ] } ], "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" } }
目标差额	标签组件文本组件	房地产投资分析字段：签约目标	1、拖入标签组件到画布区 2、输入内容，调整样式 3、拖入文本组件到画布区 4、数据来源选择数据模型：房地产投资分析，标记区选择字段“签约目标” 5、输入文本内容，获取字段数据，调整内容样式。
背景图	图片组件	无	1、拖入图片组件至画布区 2、上传所需gif（详情可参考图片资源）

8、新增轻资产占比

组件名称

组件类型

数据模型

定制方法

实现效果

新增轻资产占比

图表：柱图-横条图组件

房地产投资分析

字段：货值分析值、货值分析

1、拖入横条图组件到画布区

2、数据来源选择房地产投资分析，列选择字段“货值分析值”，行选择字段“货值分析”

3、对货值分析值进行快速计算-全局占比计算

4、基础设置如下：

5、坐标轴设置如下：

6、自定义属性如下：

{
	"yAxis": {
		"position": "top",
		"axisLabel": {
			"align": "right"
		}
	},
	"series": [
		{
			"showBackground": true,
			"backgroundStyle": {
				"color": "rgba(180, 180, 180, 0.05)"
			},
			"itemStyle": {
				"normal": {
					"color": {
						"x": 0,
						"y": 0,
						"x2": 1,
						"y2": 0,
						"type": "linear",
						"global": false,
						"colorStops": [
							{
								"offset": 0,
								"color": "#093252"
							},
							{
								"offset": 0.5,
								"color": "#185795"
							},
							{
								"offset": 1,
								"color": "#2f8df9"
							}
						]
					}
				}
			}
		}
	]
}

“新增轻资产占比”通过横条图以及自助仪表盘快速计算功能，分析各类型项目的资产占比，效果如下图所示：

9、项目投资节点预警

组件名称

组件类型

数据模型

定制方法

实现效果

项目投资节点预警

表格：表组件

房地产投资分析

字段：项目名称、交付日期、已逾期天数、项目负责人

1、拖入表组件到画布区

2、数据来源选择数据模型，列选择字段“项目名称、交付日期、已逾期天数、项目负责人”

3、基础设置如下：

4、实现滚动，可在“组件设置-基础”中开启滚动，如需设计其滚动效果可以通过宏代码实现，滚动宏如下：

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)
}

“项目投资节点预警"通过清单表滚动，对本年度存在风险的项目进行预警，效果如下图所示：

资源下载

报表资源	migrate .xml
图片资源	图片资源.zip

关注我们

服务支持

页面树结构

房地产投资分析面板

背景

场景意义

定制方法

总体设计

示例详解

1、年度筛选器

2、集团项目投资情况

3、项目概览

4、IRR/净利润率

5、项目投资收益达成率

6、新增重资产分析

7、各区域收益分析

8、新增轻资产占比

9、项目投资节点预警

资源下载