数据可视化大作业

hello！大家好，我是一名正在乱学前端技术的大学生，欢迎大家关注我，一起探讨前端技术，如有讲错的地方麻烦提出指正。

今天分享一个及格线简单的数据可视化大作业-北上广深租赁可视化（注：不适合零基础食用）

使用vite+vue3+datav构建的可视化大屏

框架搭建：四小时bilibili速成班

源码地址：https://gitee.com/qw515149/datav.git

数据查看：mysql + navicat16 + python爬虫（不会爬直接跟别人拿的数据已导出为sql文件还在审核，通过后下载导入到自己的mysql就可以了）

用navicat运行一下sql文件就会自动存到mysql里了

用express写一个简单的接口请求mysql数据库中数据,再用axios请求接口渲染到前端

这段是db.js

var mysql = require('mysql2');

var pool = mysql.createPool({
  host: '127.0.0.1',
  port: '3306',
  user: "root",
  password: "你的密码",
  database: 'fangwuzupfenxi'
});

function query (sql, callback) {
  pool.getConnection(function (err, connection) {
    if (err) {
      console.log('数据库连接失败!');
      return callback(err); // 传递连接错误  
    }
    connection.query(sql, function (err, rows) {
      connection.release(); // 连接释放应在这里  
      callback(err, rows); // 处理查询结果  
    });
  });
}

exports.query = query;  

这段是01.js，引入db.js请求数据库,引入cors防止同源策略导致跨域问题,其他相关依赖自己下载好，完事后用node.js 启动01.js,命令：node 01.js (先进入所在文件夹再用命令行启动，查看node版本是否大于16.0）

const express = require('express');
const cors = require('cors'); // 引入 cors  
const db = require('./db');

const app = express();
app.use(cors()); // 允许所有来源的请求  

// 如果需要支持 JSON 请求体，取消注释  
// app.use(express.json());  

app.get("/get_data", (req, res) => {
  db.query("SELECT * FROM t_zufangdetails", (err, data) => {
    console.log("查询结束");
    if (err) {
      console.log(err);
      res.status(500).send('数据库查询出错了'); // 设置状态码  
      return;
    }
    if (data.length === 0) {
      return res.send('没有数据');
    }
    res.json(data); // 使用 json 来返回数据  
  });
});

app.listen(8081, () => {
  console.log("服务器已经启动, 端口为: 8081");
});

启动后查看接口数据

这样子就是请求成功了，再把数据扔到前端再慢慢处理需要的数据

前端看到数据的样子（源码前往git仓库查看屎山代码）

项目完成流程：先到bilibili跟着4小时搭建完基本框架，然后将.sql文件的数据放到自己的数据库,然后用node.js中间件的express写一个简单的接口请求数据，用axios拿到数据后用pinia仓库存起来再进行统一处理渲染，然后就可以60分及格过线了！！

最后附上报告文档

1、需 求 分 析

• 引言

随着城市化进程的加速和人口流动的增加，北上广深等一线城市的房屋租赁市场日益活跃。本报告旨在深入分析这些城市房屋租赁的需求特征，为相关企业和政策制定者提供参考。

• 市场需求概况

1. 人口流动与租赁需求

北上广深作为全国经济、文化和科技中心，吸引了大量外来人口。这些人口流动带来了庞大的租赁需求，尤其是在就业、教育和医疗等领域。

1. 政策推动与租赁市场

近年来，政府出台了一系列鼓励租赁市场发展的政策，包括提供金融支持，规范市场秩序等。这些政策推动了租赁市场的健康发展，也增加了租赁需求。

• 需求特征分析

1. 、租客群体

高学历青年：北上广深的租客中，高学历青年占据较大比例。他们通常对居住环境、交通便利性和周边设施有较高要求。

职场人士：职场人士是租赁市场的主要消费群体，他们注重工作地点的便利性和租金性价比。

家庭用户：随着城市家庭结构的变化，越来越多的家庭选择租房居住。他们更注重房屋的面积、布局和安全性。

1. 、租金水平

北上广深的租金水平普遍较高，但不同区域和房屋类型之间存在较大差异。例如，市中心的租金通常高于郊区，集中式公寓的租金可能高于分散式公寓。租金水平也受到政策调整、市场供需等因素的影响。例如，保障性租赁住房的推出有助于平抑租金涨幅。

1. 、房屋类型

集中式公寓和分散式公寓是北上广深租赁市场的主要房屋类型。集中式公寓通常具有更好的管  理和服务，但租金也相对较高。分散式公寓则更加灵活多样，满足不同租客的需求。

青年公寓、宿舍型公寓、租赁式社区和高端公寓等不同类型的房屋也各有特色，满足不同租客的个  性化需求。

• 市场需求趋势

（1）、政策推动与租赁市场发展

未来，政府将继续出台鼓励租赁市场发展的政策，包括提供更多的金融支持、规范市场秩序等。这些政策将有助于推动租赁市场的健康发展，进一步增加租赁需求。

（2）、人口流动与租赁需求变化

随着城市化进程的加速和人口流动的增加，北上广深的租赁需求将继续保持旺盛。同时，随着城市家庭结构的变化和人口老龄化的加剧，家庭用户的租赁需求也将逐渐增加。

• 结论与建议

1. 、结论

北上广深的房屋租赁市场需求旺盛，且呈现出多元化、个性化的特点。随着政策推动和人口流动的增加，租赁市场将继续保持活跃。

1. 、建议

相关企业应关注租客群体的需求和变化，提供多样化的房屋类型和优质的服务。政府应继续出 台鼓励租赁市场发展的政策，加强市场监管和规范市场秩序。借助科技手段提升租赁服务的效率和便 捷性，满足租客的个性化需求。

2、概 要 设 计

一、项目背景

随着房地产市场整体回暖，住房租赁市场也悄然发生了变化。为了更好地理解北上广深这四个一线城市的房屋租赁市场，需要通过数据可视化的方式，展示并分析租房房源、租金、房屋类型等信息。

二、设计目标

展示北上广深四个城市的租房房源分布情况。

分析租金在不同区域、不同类型的房屋中的变化情况。

揭示房屋面积、地理位置对租金的影响。

三、数据来源

数据主要来源于安居家的租房数据，包括：

房屋类型（整租、合租）。

房屋所在区域、商圈。

租金、面积等房屋信息。

• 可视化工具与技术

数据库：使用Mysql存储数据，便于数据的查询和管理

编程语言：使用Python进行数据爬取，使用JavaScript进行数据处理和分析

数据可视化工具：利用vue3框架以及datav和echart组件库搭建可视化大屏

辅助工具：navicat用来对mysql中数据进行管理和查看，express写接口输出mysql中的数据， pinia仓库用来管理请求数据

技术栈：vue3+vite+datav+echart+mysql+pinia+axios+express

• 可视化设计

通过可视化工具与技术展示北上广深房屋租赁的租金水平对比、房屋类型分布、租金面积关系、房屋朝向位置、房屋装修以及房屋住宅类型。

六、预期效果

通过本项目的可视化设计，可以直观地展示北上广深四个城市的房屋租赁市场情况，帮助用户更好地理解市场动态，为租房决策提供有力支持。

3、数 据 处 理

一、数据收集

（1）、数据来源：通过python爬虫的方式爬取安居家部分北上广深房屋租赁数据。

（2）、数据内容：房屋位置、标签、朝向、户型、详细位置、租金、图片、楼层、面积、装修情况、类型等。

• 数据处理

数据清洗：

去除重复数据、无效数据。

统一数据格式、单位。

筛选并删除缺失值。

数据整合：

将不同来源的数据进行合并，形成完整的北上广深房屋租赁数据集。

对数据进行分类、标签化，便于后续分析和可视化。

数据分析：

计算城市租金均价、户型朝向、房屋类型、装修情况等。

三、可视化展示

工具选择：

利用vue和datav库构建可视化大屏。

可视化类型：

1. 、图1-1：房源数量分布雷达图：展示爬取的北上广深各房源的数量
2. 、图1-2：房屋价格玫瑰图：展示北上广深的房屋租赁价格
3. 、图1-3：圆环图和胶囊图：展示房屋朝向比例以及部分房屋户型数量
4. 、图1-4：轮播图：展示房源地址、面积以及价格（配置全数据详情页）
5. 、图1-5：折线柱混图：展示各地房屋价格与面积关系
6. 、图1-6：折线图：展示全房屋装修情况以及住宅类型

图1-1

图1-2

                                                                         图1-3

                                                                         图1-4

图1-5

图1-6

设计原则：

确保图表清晰、易读，避免信息过载。

使用合适的颜色、字体和标签，增强图表的可读性。

添加必要的标题、图例和注释，帮助读者理解图表内容。

4、核 心 程 序

图2-1

图2-2

图2-1、图2-2使用express将数据从mysql数据中暴露出来为可视化大屏搭建的数据做准备。

图2-3

图2-3使用pinia仓库调用axios对express接口进行数据获取与存储，为数据可视化大屏内容渲染做准备。

5、结 果 分 析

通过图3-1北上广深房屋租赁分析可视化，可以看出在北上广深的房屋租赁中，大部分的房屋朝向为南边，1室1厅1卫的户型占比较大，其中大部分属于普通住宅，以精装修为主，租房平均价格广州<深圳<北京<上海，租房平均面积北京<上海<广州<深圳，单位面积租金广州最低,所以广州是属于北上广深房屋租赁中较具性价比的城市。

图3-1

6、结 语

经过对北上广深房屋租赁市场的深入探索与可视化呈现，我们得以窥见这一庞大而复杂的市场背后的诸多细节与趋势。从租金均价的地理分布到房屋类型朝向装修的比例，每一个可视化图表都像是市场动态的缩影，为我们提供了宝贵的洞察。通过对比各城市不同行政区的租金均价，我们发现一线城市内部的租金差异显著，这既反映了城市发展的不均衡性，也揭示了租客在选择居住区域时面临的多样化考量。综上所述，北上广深房屋租赁市场的可视化分析，不仅为我们提供了丰富的市场信息和数据支持，更为我们理解市场动态、把握市场趋势提供了有力的工具。未来，随着数据的不断积累和可视化技术的不断进步，我们有理由相信，这一领域的分析将更加深入、全面，为租赁市场的发展贡献更多的智慧和力量。