Redian新闻
>
我用 AntV/S2 买了一套房

我用 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 = {
  width700,
  height580,
}

// 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 = {
  width700,
  height580,
  pagination: { // 分页配置
    pageSize50,
    current1,
  },
}

ReactDOM.render(
  <SheetComponent
    dataCfg={dataCfg}
    options={options}
    showPagination={true} // 打开 S2 内置的分页功能
  />
,
  document.getElementById('container')
);

展示效果

排序让数据更清晰

利用 S2 组内排序功能,让楼栋单元房号楼层 展示更加清晰有序

代码实现

...

const header = {
  advancedSortCfg: { opentrue }, // 打开高级功能
};

// 配置数据中添加排序
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 = {
  width700,
  height580,
  pagination: { // 分页配置
    pageSize50,
    current1,
  },
  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(https://s2.antv.vision/zh/examples/case/data-preview/#house)

📝选房优先级:

根据以上筛选只有 149 条满足需求,而对于 400 多号的我,还是很难选到。但是,我还是首先记录下满足以上要求的第一优先级房屋。

  • 第一优先级 (149)
    21#2-1:26~30
    22#1-2:6~30
    ... 

然后逐渐放宽要求,选出第二、三优先级的房子的范围。

  • 第一优先级 (149套)
    21#2-1:26~30
    22#1-2:6~30
    ...

  • 第二优先级 (237套)
    15#1-3: 24~29
    15#1-4:  22~29
    ... 

出发选房

我带着范围小抄,出发选房啦。相对于其他购房者的犹豫不决,手握“宝典”的我,胸有成竹,最终成功捡漏第二优先级中的房屋💃。



最后的最后


GitHub star ⭐️🌟 (https://github.com/antvis/S2) 的盆友, 赠送购房攻略(https://codesandbox.io/s/s2-house-template-4jgz7q?file=/config.ts)一套

想体验多维表格强大的分析和看数功能吗?欢迎使用 AntV/S2  
我们的
AntV/S2  已经开源啦
,无论在工作还是生活都可以随意使用。如果你觉得以上文章对你还有帮助,或者有一定兴趣,欢迎一键三连:AntV/S2 - GitHub(https://github.com/antvis/S2)





🌾 芒种日,图新物

这一天,是辛苦收获之日,G6 发布 4 周年
这一天,新种子已被埋下,图方向新物问世


AntV 新品发布会


6 月 6 日 14:00

期待与你相见

预祝大家收获硕果,种下希望!

👇🏾 预约视频号直播 👇🏾



微信扫码关注该文公众号作者

戳这里提交新闻线索和高质量文章给我们。
相关阅读
24岁女孩省钱省出一套房!每月餐费44元,4年存下52万可乐能换一套房?上海隔离期「以物换物」,给孩子们上了一堂最好的心理 + 财商课!“我不是炒房客,一辈子也就买得起一套房了”龙卷风健康快递 161西藏航空TV9833撤离乘客:「用了一辈子的运气」US News2022年美国高中排名公布,Redmond顶级公立学校排名全美第12![家居] 宁波133平装修 人生的第一套房毕业照老板买了一款名为“合理冲撞”的酒,把我们冲撞了!46岁的我卖掉上海一套房去留学,如今的我从全美Top10毕业了!46岁的她从国企辞职,卖掉上海一套房去留学,谁说人到中年必须混退休?为了收藏保时捷,特意建了一套房,现代风的豪宅太酷了刚刚!澳多所八大官宣S2授课决定!要强制线下了?一网课被曝学生直播羞羞行为,全场愕然…我也赶了一回时髦,买了“数字藏品”我用手机喇叭吹灭了一根蜡烛十字军北约军是侵略别国的源头奥兰多高品质楼盘Enclaves at Festival又一套房子过户啦,3房联排别墅售36万美金最新骗术:我用正规的京东APP,自己把自己给“骗”了!微信还助了一把力!朋友玩了3年梦幻西游,在深圳买了两套房澳知名八大官宣发钱!留学生一人2000刀!RMIT官宣S2授课模式模仿深圳盐田区中考语文,我们出了一套题英国园丁夫夫买不起房,干脆跑法国乡下14000欧买了一整座村!!然而这画风…Hiring | Real Estate Senior Accountant / Accounting Manager“总政歌舞团”征服巴黎人间四月天,看电影《爱情限时恋未尽》最近“超火”的视频,我用PPT做了一个!重振PointNet++雄风!PointNeXt:通过改进的模型训练和缩放策略重新审视PointNet++US News2022年美国高中排名公布,麻州近一半学校名列前茅!波士顿拉丁排26位现实版“宫崎骏动画”!她卖掉深圳一套房,去大理开农场,网友:太羡慕了!从TVB与ViuTV收视之争,看香港流行文化的世代交替又一澳知名八大官宣S2授课!澳洲大学太缺人,突然扩招员工!买了一堆银行的山东首富,连利息都还不上了厦门万丽酒店海景套房体验 (Renaissance Xiamen, Oceanfront Suite)神级抠门干货:12元解决了两个月晚餐,省出一套房【庭院种菜】迷你西红柿,你迷我迷万人迷!卖了一套房,正式抄底它 !
logo
联系我们隐私协议©2024 redian.news
Redian新闻
Redian.news刊载任何文章,不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。文章信息的合法性及真实性由其作者负责,与Redian.news及其运营公司无关。欢迎投稿,如发现稿件侵权,或作者不愿在本网发表文章,请版权拥有者通知本网处理。