一、实战场景

flask + Pandas + echarts 使用饼状图等将二手房数据进行分析+可视化

二、知识点

python 基础语法

python 文件读写

pandas 数据处理

flask web 框架

echarts 图表

bootstrap

jinja 模版

三、菜鸟实战

初始化 Flask 框架，设置路由

'''
Description: 分页读取并显示 csv 文件数据
'''
from math import ceil
import csv
import json

from flask import Flask, render_template, request, redirect, jsonify
from spiders.file_manager import FileManager

# 初始化框架
web = Flask(__name__)


@web.route('/')
def index():
    # 首页
    return redirect('/list')


@web.route('/table/<int:page_num>')
def table(page_num):
    # 分页读取并显示 csv 文件数据
    file_manager = FileManager()
    file = file_manager.get_data_file_path("tao365_detail.csv")

    # 若不指定limits默认为 5
    limits = request.args.get('limits', 5, type=int)

    def show_csv(reader, page=page_num, limits=limits):
        # 内部函数，根据limits和所在页数生成数据
        df = []
        for row in reader:
            if page_num * limits >= (reader.line_num - 1) > (page_num - 1) * limits:
                df.append(row)

        return df

    with open(file, 'r+', encoding='utf-8') as f:
        # 计算页面数
        row_length = len(f.readlines()) - 1
        pages = int(ceil(row_length / limits))

    with open(file, 'r+', encoding='utf-8') as f:
        # 计算数据
        reader = csv.reader(f)
        next(reader)
        df = show_csv(reader, page_num, limits)

    # 加载模版和模版数据
    return render_template('table.html', df=df, pages=pages, page_num=page_num, limits=limits)


@web.route('/table_detail')
def table_detail():
    # 二手房详情
    row = request.args.get('row').split(',')
    return render_template('table_detail.html', row=row)

@web.route('/list')
def list_house():
    # 二手房列表
    return render_template('list.html')

@web.route('/chart1')
def chart1():
    # 柱状图
    return render_template('chart1.html')

@web.route('/chart2')
def chart2():
    # 横向柱状图
    return render_template('chart2.html')

@web.route('/chartBie')
def chartBie():
    # 饼图
    return render_template('chartBie.html')

@web.route('/chart_data')
def chart_data():
    # 获取图标数据

    # 图标类型
    type = request.args.get("type")

    # 二手房数据
    file_name = 'chart00' + type+'.json'
    file_manager = FileManager()
    file = file_manager.get_data_file_path(file_name)
    # file = os.path.join(config.DATA_DIR,'chart00'+ type+'.json' )
    with open(file, encoding='utf8') as fp:
        data_list = json.load(fp)

    return jsonify(data_list)


# 启动 flask web 框架
web.run(debug=True)

各行政区房屋数量柱状图分析

def chart002(self):
    # 柱状图 - 展示各行政区房屋数量

    # 读取清洗后的数据文件
    result_df = self.read_clean_result_file()

    # 从字典对象导入数据
    df = pd.DataFrame(result_df)

    # 将数据根据地址分组
    g = df.groupby('地址')

    # 统计分组后的数量
    df_region = g.count()['小区']

    # 获取分组后的地址数据
    address = df_region.index.tolist()

    # 获取分组后的数量
    count = df_region.values.tolist()

    # 定义表格顶部title
    title = "各行政区房屋数量"

    # 定义表格顶部说明
    text = self.top_text

    # 定义图表title
    chart_title = '各行政区房屋数量'

    # 图表横坐标
    chart_x = '所在地区'

    # 图表纵坐标
    chart_y = '房源数量/套'

    # 图表单位
    unit = '套'

    # 图表类型
    types = 'bar'

    # 组装图表json数据
    data_json = {
        'data1': address,
        'data2': count,
        'title': title,
        'text': text,
        'chartTitle': chart_title,
        'chartX': chart_x,
        'chartY': chart_y,
        'unit': unit,
        'type': types
    }

    #  将json数据写入文件
    with open('../data/chart002.json', 'w', encoding='utf-8') as write_f:  # 打开本地文件

        json.dump(data_json, write_f, indent=4, ensure_ascii=False)  # python对象转换成json对象

区域二手房房源朝向分布情况

def chart005(self):
    # 柱状图 - 南京各区域二手房房源朝向
    
    # 读取清洗后的数据文件
    result_df = self.read_clean_result_file()

    # 从字典对象导入数据
    df = pd.DataFrame(result_df)

    # 将数据根据房屋朝向分组
    g = df.groupby('房屋朝向')

    # 统计分组后的数量
    df_region = g.count()['小区']

    # 获取分组后的房屋朝向分组数据
    address = df_region.index.tolist()

    # 获取分组后的房屋朝向数量
    count = df_region.values.tolist()

    # 定义表格顶部title
    title = "区域二手房房源朝向分布情况"

    # 定义表格顶部说明
    text = self.top_text

    # 定义图表说明
    chart_title = '各区域二手房房源朝向分布情况'

    # 定义图表横坐标
    chart_x = ''

    # 定义图表纵坐标
    chart_y = '建筑面积（㎡）'

    # 定义单位
    unit = ''

    # 定义图表类型
    types = 'bar'

    # 组装图表json数据
    data_json = {
        'data1': address,
        'data2': count,
        'title': title,
        'text': text,
        'chartTitle': chart_title,
        'chartX': chart_x,
        'chartY': chart_y,
        'unit': unit,
        'type': types
    }

    #  将json数据写入文件
    with open('../data/chart005.json', 'w', encoding='utf-8') as write_f:  # 打开本地文件

        json.dump(data_json, write_f, indent=4, ensure_ascii=False)  # python对象转换成json对象

二手房单价最高Top10 图

def chart008(self):
    # 横向柱状图 - 各面积区间房屋数量占比图
    
    # 读取清洗后的数据文件
    result_df = self.read_clean_result_file()

    # 从字典对象导入数据
    df = pd.DataFrame(result_df)

    # 取出每平方价格列前10的数据
    top_price = df.sort_values(by="每平方价格", ascending=False)[:10]
   
    # 取出每平方价格列前10的小区数据
    area0 = top_price['小区'].values.tolist()

    # 取出每平方价格列前10的价格数据
    count = top_price['每平方价格'].values.tolist()

    arr = []

    color_arr = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22",
                 "#17becf"
                 ]
    for k, i in enumerate(count):
        arr.append({'value': i, 'itemStyle': {'color': color_arr[k]}})
    # 定义表格顶部title
    title = "二手房单价最高Top10"

    # 定义表格顶部说明
    text = self.top_text

    # 图表title
    chart_title = '二手房单价最高Top10'

    # 组装图表json数据
    data_json = {
        'data1': area0,
        'data2': arr,
        'title': title,
        'text': text,
        'chartTitle': chart_title,
    }

    #  将json数据写入文件
    with open('../data/chart008.json', 'w', encoding='utf-8') as write_f:  # 打开本地文件

        json.dump(data_json, write_f, indent=4, ensure_ascii=False)  # python对象转换成json对象

echarts 渲染房屋数量柱状图

function drawCharts(data) {
    var optionMap = {
        title: {
            text: data.chartTitle,
            left: 'center',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
        },
        toolbox: {
            feature: {
                saveAsImage: {
                    title: ''
                }
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: data.data1
        },
        series: [{
            type: 'bar',
            data: data.data2
        }, ]
    };
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('dom1'));

    //使用制定的配置项和数据显示图表
    myChart.setOption(optionMap);

}