我用 AntV/S2 买了一套房
背景
经过一年多的摇号,我在前两天收到了某网红盘的摇中通知。还沉浸在摇中房屋喜悦中的我,很快被售房顾问告知选房的人很多,每位购房者的选房时间都很短,必须 一分钟内 快速选房。并且,排在 400 多号的我,在选房时无法得知前面选房者的实时信息。所以,我首先要从 1000 多套房源中,把不满足要求的房源都排除掉。加上现场选房时间短,需要在分分中完成这上百万的交易,怕自己过于紧张,必须得准备一个简单可靠的小抄。
刚好最近在做的一个多维表格项目就很适用于这个场景,首先它具有方便的筛选功能,能过滤掉不想要的房型(日照短,临街等)。其次,它可以对数据进行分组,快速找到钟意房源的楼栋、单元、楼层等范围。于是我快速行动,开始搭建快速选房的多维表格。
知识拓展
多维表俗称交叉表,由列和行组成的双向表。相对于普通表格,具有能够构造、汇总及显示大量数据的优势。而我们的** **AntV/S2中拥有这两种表格,满足你所有需求
交叉表 | 普通表格 |
---|---|
搭建可视化demo
数据准备
我通过开发商和万能的互联网收集到了楼栋
、单元
、房号
、楼层
、 房屋类型
、是否临街
、朝向
、面积
这几个维度的数据。
数据展示
[
{
"name": "21#", // 楼栋
"unit": "1单元", // 单元
"building": 1, // 房号
"level": 2, // 楼层
"property": "公寓", // 房屋类型
"nearStreet": false, // 是否临街
"toward": "东", // 朝向
"area": 111, // 面积
"score": 7 // 评分
},
{
"name": "21#",
"unit": "1单元",
"building": 2,
"level": 12,
"property": "住宅",
"nearStreet": true,
"toward": "东",
"area": 123,
"score": 7
},
...
]
初始化表格
使用
S2
快速搭建报表。
代码实现
import React from "react";
import ReactDOM from "react-dom";
import { SheetComponent } from "@antv/s2-react";
import '@antv/s2-react/dist/style.min.css';
// 1. 添加配置
const s2Options = {
width: 700,
height: 580,
}
// 2. 配置数据
const dataCfg = {
data: data, // 填入准备好的 houses.json
describe: '如何使用 S2 买房',
fields: {
rows: [ // 行头维度
'name',
'unit',
'building',
'level',
'nearStreet',
'toward',
'property',
],
columns: [], // 列头维度
values: ['area'], // 数值
},
meta: [
{
field: 'name',
name: '楼栋',
},
{
field: 'unit',
name: '单元号',
},
...
]
}
// 3. 渲染
ReactDOM.render(
<SheetComponent
dataCfg={dataCfg}
options={options}
/>,
document.getElementById('container')
);
展示效果
过滤房源
列举选房需求,引入
Ant Design
中的Select
组件实现筛选器, 快速过滤不理想的房源。
列举选房需求
- 房屋类型为住宅:成都的阳光灰常的珍贵,公寓(居住用地,房屋产权仍为 70年)的话冬至日照不足 3 时/天 。
- 因为对噪音敏感,所以希望房屋不临街。
- 希望购买一个不太拥挤的套三,所以面积设置到了** 100~130 平**。
- 最后是楼层,一栋楼最好的楼层是 2/3 处高度(30层的话,20层较好)。因为成都周边存在一些地震带,所以我向下兼容能力也比较强。但是,太矮了可能会被 遮挡,蚊子多,鸟叫声恼人等问题,所以,楼层最终锁定在** 6~30 层**。
查看汇总房源
使用 S2 字段的分页功能,帮助我实时查看理想房源汇总数。
代码实现
...
const s2Options = {
width: 700,
height: 580,
pagination: { // 分页配置
pageSize: 50,
current: 1,
},
}
ReactDOM.render(
<SheetComponent
dataCfg={dataCfg}
options={options}
showPagination={true} // 打开 S2 内置的分页功能
/>,
document.getElementById('container')
);
展示效果
排序让数据更清晰
利用 S2 组内排序功能,让
楼栋
、单元
、房号
、楼层
展示更加清晰有序
代码实现
...
const header = {
advancedSortCfg: { open: true }, // 打开高级功能
};
// 配置数据中添加排序
const dataCfg = {
...
sortParams: [
{
sortFieldId: 'name',
sortMethod: 'ASC', // 按首字母进行升降序
},
{
sortFieldId: 'unit',
sortMethod: 'ASC',
},
{
sortFieldId: 'level',
sortFunc: (params) => { // 自定义升降序
const {data} = params;
return data.sort((a, b) => {
const aNum = last(a.split(ID_SEPARATOR));
const bNum = last(b.split(ID_SEPARATOR));
return bNum - aNum;
});
}
}]
}
ReactDOM.render(
<SheetComponent
dataCfg={dataCfg}
options={options}
/>,
document.getElementById('container')
);
展示效果
重点标记理想户型
使用字段标记功能, 理想户型。
- 120平的 ,房型方正,得房率高。是我重点标记的对象。
- 123平的 ,南北通透,房型合理。也是我重点标记的对象。
代码实现
...
const s2Options = {
width: 700,
height: 580,
pagination: { // 分页配置
pageSize: 50,
current: 1,
},
conditions: {
// 背景 (background) 字段标记
background: [
{
field: 'area',
mapping(value) {
if (value === 123 || value === 119) {
return {
// fill 是背景字段标记下唯一必须的字段,用于指定文本颜色
fill: '#b8e1ff',
};
}
return {
fill: '#fff'
};
},
},
],
},
};
ReactDOM.render(
<SheetComponent
dataCfg={dataCfg}
options={options}
header={header} // 配置表头
/>,
document.getElementById('container')
);
展示效果
** 查看完整 **S2 官方购房demo
选房优先级:
根据以上筛选只有 149 条满足需求,而对于 400 多号的我,还是很难选到。但是,我还是首先记录下满足以上要求的第一优先级房屋。
:::info
第一优先级 (149套)
21#2-1: 26~30
22#1-2: 6~30
...
:::然后逐渐放宽要求,选出第二、三优先级的房子的范围。
:::info
第一优先级 (149套)
21#2-1: 26~30
22#1-2: 6~30
...
第二优先级 (237套)
15#1-3: 24~29
15#1-4: 22~29
...
:::
出发选房
我带着范围小抄,出发选房啦。相对于其他购房者的犹豫不决,手握“宝典”的我,胸有成竹,最终成功捡漏第二优先级中的房屋。
最后的最后
GitHub star ️ 的盆友, 赠送购房攻略一套
想体验多维表格强大的分析和看数功能吗?欢迎使用 AntV/S2
我们的 AntV/S2 已经开源啦,无论在工作还是生活都可以随意使用。如果你觉得以上文章对你还有帮助,或者有一定兴趣,还跪请读者老爷们**一键三连: **AntV/S2 - GitHub。
我用 AntV/S2 买了一套房的更多相关文章
- 【转载 来自sdnlab】 开放网络没那么简单
链接:开放网络没那么简单 本文是云杉网络工程师张攀对当前开源网络技术现状的一些思考和探索. 开放网元.释放数据的价值 从2012年开始至今,网络行业明显是O字辈的天下.所有我接触过了解过的组织和项目, ...
- 被投资人“送”入看守所 z
http://news.cnblogs.com/n/506969/ 拜读了[[畅言]读<被投资人“送”入看守所>一文有感]一文有感,很想跟作者探讨几句.虽然他的看法很有理性,但站在一个刑案 ...
- 【木德木作杯楼市达人秀NO.28】南湖买房故事
应得意版主的邀请,我也来写写我的买房故事,虽然过程没有别人那么惊心动魄,但是毕竟是自己人生中非常重要的一件事情,就像恋爱一样,情话永远没有情书好,我也借此纪念一下这段短暂的时光.其中会涉及到本人对一些 ...
- Android事件拦截机制简单分析
前一阶段,在学习的时候,遇到了我觉得的我接触安卓以来的最多的一次事件拦截出来,那个项目,用到了slidemenu側滑菜单条,然后加上tab标签,还有轮播广告,listview上下滑动.viewpage ...
- [AGC006E] Rotate 3x3 树状数组+贪心
Description XFZ在北京一环内有一套房. XFZ房子的地砖呈网格状分布,是一个3∗N3∗N的网格.XFZ在买下这套房时,每个地砖上有一个数字,位置为(i,j)(i,j)的地砖上的数 ...
- I want to be a Great Web Front-end Developer
有时觉得特别的浮躁,可能是每天春运般的挤地铁,随处可见因为一点小磕小蹭吹胡子瞪眼睛的人,可能是身边的人貌似一下子都好有钱,买房买车或者买第N套房. 很想静下来心寻找到自己inner pace,但是忽然 ...
- Oculus Rift, HTC Vive, SONY PSVR的全面对比
http://blog.csdn.net/xoyojank/article/details/50927572 这次有幸参加了GDC 2016, 终于把三大设备体验了个遍, 也试玩了很多不错的VR游戏. ...
- 北漂IT男返乡2年的三线楼市观察(宜昌夷陵篇)-原创
一直想写点什么,这段时间总算有空,好嘞,正好有兴致来写一写楼市相关的文章以饕读者和粉丝朋友. 宜昌?说宜昌您可能不知道,但是说三峡大坝您就知道了 最近这两年,因为小宝的降临,我多半时间待在老家宜昌陪伴 ...
- 90后外挂开发者:已经有许多主播在我这里在外挂,我月入50W
绝地求生上线不到一年已经火爆全球,玩家们表示再差的优化也抵挡不住我们玩游戏的热情,近日,各大平台主播糯米油条五五开等人的开挂实锤闹得沸沸扬扬,玩家之间刮起了一阵反击外挂的风暴. 俗话说得好,没有买卖就 ...
随机推荐
- java中this这个概念初学者非常难理解,请举例说明
4.this关键字(this key word) 继上一小节,(3.一个对象可能有多个参考)this是当中的一个参考!指向他自己. class MyTestDate { int year; ...
- nodeJs入门的第一节课
nodejs是什么? nodejs的架构模式以及优缺点 nodejs异步IO nodejs事件驱动 nodejs单线程 nodejs应用场景 一.nodejs是什么? 1.1nodejs是一个开源的. ...
- WIN DLL劫持提权
WIN DLL劫持提权 原理: Windows程序启动的时候需要DLL.如果这些DLL 不存在,则可以通过在应用程序要查找的位置放置恶意DLL来提权.通常,Windows应用程序有其预定义好的搜索DL ...
- 自己写一个简单的LinkedList
单链表 推荐阅读:https://www.cnblogs.com/zwtblog/tag/源码/ 哨兵节点: 哨兵节点在树和链表中被广泛用作伪头.伪尾等,通常不保存任何数据. 我们将使用伪头来简化我们 ...
- 用来创建用户docker registry认证的Secret
集群环境:1.k8s用的是二进制方式安装2.操作系统是linux (centos)3.操作系统版本为 7.4/7.94.k8s的应用管理.node管理.pod管理等用rancher.k8s令牌以及ma ...
- 【HarmonyOS学习笔记】记第一次使用IDE
哈喽大家好我是脸皮贼厚的小威 愚人节刚过先给大家拜个早年吧 最近在HarmonyOS官网下载了IDE,并抱着学(wan)习(wan)的心态试着跑出了Hello World,并安装到手机上 这是一个简单 ...
- C# 中托管内存与非托管内存之间的转换
c#有自己的内存回收机制,所以在c#中我们可以只new,不用关心怎样delete,c#使用gc来清理内存,这部分内存就是managed memory,大部分时候我们工作于c#环境中,都是在使用托管内存 ...
- vite初使用随记
vite的安装 按照官网文档来看,并不难. 先检查自己电脑node的版本与npm的版本/yarn的版本 可以直接用yarn安装,yarn create vite 这是最原始的安装,即类似于安装vue- ...
- Java指令重排序在多线程环境下的应对策略
一.序言 指令重排在单线程环境下有利于提高程序的执行效率,不会对程序产生负面影响:在多线程环境下,指令重排会给程序带来意想不到的错误. 本文对多线程指令重排问题进行复原,并针对指令重排给出相应的解决方 ...
- ONNXRuntime学习笔记(四)
接上一篇在Python端的onnx模型验证结果,上一篇在Pytorch和onnxruntime-gpu推理库上分别进行效果效率统计分析,结论要比最初设置的50ms高很多,这一篇我将在C++端写个测试代 ...