flask +echarts 二手房数据可视化

项目介绍

        欢迎来到我的新项目，其中我使用了Flask框架和ECharts库，将二手房数据转化为令人印象深刻的可视化效果。通过这个项目，我旨在探索房地产市场的动态，并提供一个直观而有趣的方式来理解二手房交易数据。

技术选择和设置 

Flask框架的轻量级和灵活性使其成为我构建Web应用的理想选择。它简化了开发流程，同时提供了足够的灵活性，以满足项目的特定需求。而ECharts作为一款强大的数据可视化库，能够轻松创建各种吸引人的图表，使数据变得更加生动和易于理解。

在开始项目之前，我进行了详细的技术选择和设置。我的开发环境包括[列举您使用的工具和技术]，并且我组织了项目结构以确保清晰性和可维护性。

在接下来的博客中，我将详细介绍我的开发过程，包括数据获取、处理、可视化实现以及用户交互的关键步骤。让我们一同探索如何通过这个项目深入了解二手房市场的趋势和变化。

数据获取和处理

# -*- coding: utf-8 -*-
import pandas as pd
from sqlalchemy import create_engine

# 使用检测到的编码读取文件
df = pd.read_csv('csv/11.second_hand_ house.csv')

# 2. 缺值处理
# 假设需要处理的列为['小区', '朝向', '房屋单价', '参考首付', '经度', '纬度']
df[['小区', '朝向']] = df[['小区', '朝向']].fillna('未知')  # 填充缺失值为'未知'
df[['房屋单价', '参考首付', '经度', '纬度']] = df[['房屋单价', '参考首付', '经度', '纬度']].fillna(0)  # 填充缺失值为0

# 3. 分类汇总
grouped_df = df.groupby('小区')['房屋单价'].mean().reset_index(name='平均房屋单价')

# 4. 排序
sorted_df = grouped_df.sort_values(by='平均房屋单价', ascending=False)

# 5. 切分或合并
# 这里假设根据平均房屋单价将小区分为两类
high_price_df = sorted_df.head(len(sorted_df) // 2)
low_price_df = sorted_df.tail(len(sorted_df) // 2)

# 6. 生成透视表
pivot_table = pd.pivot_table(df, values='房屋单价', index='小区', columns='朝向', aggfunc='mean', fill_value=0)

# 7. 保存到MySQL数据库
engine = create_engine('mysql+pymysql://root:786120564@127.0.0.1:3306/qmks2023')
#总数据
df.to_sql('wxy2541-1', con=engine, if_exists='replace', index=False)

数据可视化

HTML 或 JavaScript 文件中引用 ECharts

<script type="text/javascript" src="../static/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../static/js/echarts.min.js"></script>

创建基本图表

function echart1() {
            var mychart = echarts.init(document.getElementById("echart1"), "white");
            $.get('https://geo.datav.aliyun.com/areas_v3/bound/440303.json', function (cZjson) {
                mychart.hideLoading();
                echarts.registerMap('深圳', cZjson);
                 $.ajax({
                    url: '/echart1',
                    success: function (data) {

                        var option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                        return params.name + '/房数量' +params.data.value[2] ;
                            },
                        },
                        title: {
                            text: '二手房分布',
                            textStyle: {
                                color: '#fff',
                                fontSize: 18,
                                lineHeight: 10,
                            },
                        },
                        grid: {
                            left: '3%',
                            right: '10%',
                            bottom: '3%',
                            containLabel: true
                        },
                        geo: {
                            map: '深圳', // 这里使用深圳市地图的名称
                            roam: false,
                            zoom: 1.2,
                            label: {
                                emphasis: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                normal: {
                                    areaColor: '#323c48',
                                    borderColor: '#404a59'
                                },
                                emphasis: {
                                    areaColor: '#2a333d'
                                }
                            }
                        },

                        series: [
                            {
                                type: 'effectScatter',
                                coordinateSystem: 'geo',
                                data: data.data.map(function (item) {
                                    return {
                                        name: item.name,
                                        value: [item.value[0], item.value[1], item.value[2]] // 最后一个数字控制涟漪特效的大小
                                    };
                                }),

                                symbolSize: function(val) {
                                        return val[2] *6;
                                    },
                                label: {
                                    show: true,
                                    formatter: function (params) {
                                        return params.name ;
                                    },
                                    position: 'right'
                                },
                                itemStyle: {
                                    color: '#ddb926'
                                }
                            }
                        ]
                    }
                            option.series[0].data = data.data
                            mychart.setOption(option, true);
                        }
                 })
            });


            //窗口变化更改Chart大小
            window.addEventListener('resize', function () {
                mychart.resize()

            })

        }

Flask 应用开发

        Flask基础

# 示例：Flask 应用基础结构
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

在后端准备数据，并在前端使用 JavaScript 脚本初始化和配置 ECharts 图表

@app.route("/echart1")
def echart1():
    engine = create_engine(con)
    connection = engine.connect()
    sql_query = """
       SELECT 小区, 经度, 纬度, COUNT(*) AS 房数量
       FROM `wxy2541-1`
       GROUP BY 小区, 经度, 纬度;
       """
    # 从数据库中读取数据
    df = pd.read_sql(sql=text(sql_query), con=connection)

    # 将数据格式转换为指定格式
    formatted_data = []
    for index, row in df.iterrows():
        name = row['小区']
        longitude = row['经度']
        latitude = row['纬度']
        house_count = row['房数量']

        formatted_item = {"name": name, "value": [longitude, latitude, house_count]}
        formatted_data.append(formatted_item)

    # 输出格式化后的数据
    print(formatted_data)
    return jsonify({'data':formatted_data})

项目效果

项目地址

flask+echarts二手房数据可视化资源-CSDN文库