flask 和 echarts 使用柱状图折线图等可视化图表展示二手房统计数据
目录
一、实战场景
二、知识点
python 基础语法
python 文件读写
pandas 数据处理
flask web 框架
echarts 图表
jinja 模版
三、菜鸟实战
初始化 Flask 框架，设置路由
各行政区房屋均价柱状图分析
echarts 渲染柱状图
各面积区间房屋占比饼状图
echarts 渲染饼状图
运行结果
运行截图
数据示例
一、实战场景
flask 和 echarts 使用柱状图折线图等可视化图表展示二手房统计数据
二、知识点
python 基础语法
python 文件读写
pandas 数据处理
flask web 框架
echarts 图表
jinja 模版
三、菜鸟实战
初始化 Flask 框架，设置路由
'''Description: 分页读取并显示 csv 文件数据'''from math import ceilimport csvimport jsonfrom flask import Flask, render_template, request, redirect, jsonifyfrom spiders.file_manager import FileManager# 初始化框架web = Flask(__name__)@web.route('/')def index(): # 首页 return redirect('/list')@web.route('/table/')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('/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 chart001(self): # 柱状图 - 展示各行政区房屋均价 # 读取清洗后的数据文件 result_df = self.read_clean_result_file() # 从字典对象导入数据 df = pd.DataFrame(result_df) # 根据地址分组并计算每平米的平均价 mean_data = df.groupby(['地址'], as_index=False)['每平方价格'].agg({'每平方价格': 'mean'}).round() # 取出地址列数据 address = mean_data['地址'].unique() # 取出每平方价格列数据 price = mean_data['每平方价格'].unique() # 定义表格顶部title title = "各行政区房屋均价展示" # 定义表格顶部说明 text = self.top_text # 定义图表title chart_title = '各行政区房屋均价展示' # 定义图表横坐标 chart_x = '所在地区' # 定义图表纵坐标 chart_y = '房屋均价' # 定义图表单位 unit = '元' # 定义图表类型 types = 'bar' # 组装图表json数据 data_json = { 'data1': address.tolist(), 'data2': price.tolist(), 'title': title, 'text': text, 'chartTitle': chart_title, 'chartX': chart_x, 'chartY': chart_y, 'unit': unit, 'type': types } # 将json数据写入文件 with open('../data/chart001.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: '' } } }, xAxis: { type: 'category', name: data.chartX, data: data.data1 }, yAxis: { type: 'value', name: data.chartY, axisLabel: { formatter: '{value} ' + data.unit } }, series: [{ data: data.data2, type: data.type }] }; //初始化echarts实例 var myChart = echarts.init(document.getElementById('dom1')); //使用制定的配置项和数据显示图表 myChart.setOption(optionMap);}各面积区间房屋占比饼状图
def chart006(self): # 饼状图 - 南京各面积区间房屋数量占比图函数 # 读取清洗后的数据文件 result_df = self.read_clean_result_file() # 从字典对象导入数据 df = pd.DataFrame(result_df) # 定义各面积区间 area_level = [0, 50, 100, 150, 200, 250, 300, 350, 400, 1500] # 标识分后bins label_level = ['小于50', '50-100', '100-150', '150-200', '200-250', '250-300', '300-350', '350-400', '大于400'] # 数据从最大值到最小值进行等距划分 area_cut = pd.cut(df['建筑面积'], area_level, labels=label_level) # 获取等距划分后的数据 df_area = area_cut.value_counts() # 获取各区间数据 area = df_area.index.tolist() # 获取各区间房屋数量 count = df_area.values.tolist() # 拼接图表所需数据 arr = [] for k, i in enumerate(area): arr.append({'name': i, 'value': count[k]}) # 定义表格顶部title title = "面积区间房屋数量占比图" # 定义表格顶部说明 text = self.top_text # 定义图表标题 chart_title = '各面积区间房屋数量占比图' # 定义图表名称 chart_name = '各面积区间房屋数量占比图' # 组装图表json数据 data_json = { 'data1': arr, 'title': title, 'text': text, 'chartTitle': chart_title, 'chartName': chart_name, } # 将json数据写入文件 with open('../data/chart006.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: 'item' }, toolbox: { feature: { saveAsImage: { title: '' } } }, legend: { orient: 'vertical', left: 'left' }, series: [{ name: data.chartName, type: 'pie', radius: '50%', data: data.data1, itemStyle: { normal: { label: { show: true, formatter: '{b} : {d}%' }, labelLine: { show: true } } }, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }; //初始化echarts实例 var myChart = echarts.init(document.getElementById('dom1')); //使用制定的配置项和数据显示图表 myChart.setOption(optionMap);}运行结果
运行截图
* Serving Flask app 'app_tao05'
* Debug mode: on
* Running on http://127.0.0.1:5000
浏览器中打开 http://127.0.0.1:5000
数据示例
各区域房屋均价分析
各面积区间房屋数量占比图
各区域房屋均价统计
各区域二手房平均建筑面积
源码链接
https://download.csdn.net/download/qq_39816613/87374676
菜鸟实战，持续学习！