【Python+Flask+Echarts 】可视化样题二 — 绘制 北京、上海、广东三个地区 不同行业被淘汰的公司总数对比图形
数据集展示：
需求分析：
数据预处理：
导包
from flask import Flask,render_template
import pandas as
读取数据集
data = pd.read_csv("data/closed_company_utf8.csv",sep=",")
提取有效列
data = data[['com_addr','cat']]
根据题目要求，仅需要地区、行业两列数据即可。
筛选条件
addr = (data['com_addr']=='北京')|(data['com_addr']=='上海')|(data['com_addr']=='广东')
筛选条件，地区为北京、上海、广东
提取行，排序，聚合计数
clean = data.loc[addr,['com_addr','cat']] # 通过逻辑方式提取目标记录
.sort_values('com_addr') # 按照com_addr列排序
.groupby(['com_addr','cat']).agg({'cat':'count'}) # 分组聚合统计各行业的总数
由题意，在获取所需数据集后，我们要统计出三地区，各行业淘汰的公司数量。首先要将地区划分统计，就要用到分组，往往分组后就要和聚合联系在一起。此处的排序可以没有~
转化结果集形式
对列重命名、重置索引
clean.columns = ['count']
an.reset_index()
转为list
list1 = clean.values.tolist()
print(list1)
终于，在转化好之后list中已经存在了所需要的限制信息。本以为大功告成，写了web页面后，又遇到了问题。遍历获取数据时var data1 = [{% for item in sheets %}'{{ item.？ }}',{% endfor %}];依然只能够获取单个信息，由于转化的list是二维的，item就已经代表每次查找的是类似[‘上海’, ‘企业服务’, 133]单个list中的某一块，这样在获取数据时，地区之间无法分割。既然二维不可以，那就载添加条件，将数据转化为三维。
代码优化
def to_list(add):
address = (data['com_addr'] == add)
clean = data.loc[address, ['com_addr', 'cat']].sort_values('com_addr').groupby(['com_addr', 'cat']).agg({'cat': 'count'})
clean.columns = ['count']
clean = clean.reset_index()
list = clean.values.tolist()
return list
list1 = to_list('北京')
print(list1)
list2 = to_list('上海')
print(list2)
list3 = to_list('广东')
print(list3)
list = [list1,list2,list3]
print(list)
意识到获取数据时的囧境，为何不在一开始就将数据划分好呢？
在这里做了小小的改动，定义了一个含参转化方法，参数为要提取的地区信息。方法体内容没有改变，只是这次一个一个进行转化，最终放入一个总的list中。
= [{% for item in sheets.0 %}'{{ item.1 }}',{% endfor %}]; var data2 = [{% for item in sheets.0 %}{{ item.2 }},{% endfor %}];
var data3 = [{% for item in sheets.1 %}{{ item.2 }},{% endfor %}];
var data4 = [{% for item in sheets.2 %}{{ item.2 }},{% endfor %}];数据可视化：
#使用app.route装饰器会将URL和执行的视图函数的关系保存到app.url_map属性上。
#处理URL和视图函数的关系的程序就是路由，这里的视图函数就是index。
app = Flask(__name__)
@app.route('/')
def index():
sheets_list = list
return render_template("closed_company02.html",sheets=sheets_list)
if __name__ == '__main__':
app.run(debug=True)
完整案例代码：
后端：
# -*- coding: utf-8
# @Time : 2020/12/1 22:04
# @Author : ZYX
# @File : closed_company02.py
# @software: PyCharm
from flask import Flask,render_template
import pandas as pd
data = pd.read_csv("data/closed_company_utf8.csv",sep=",")
# 绘制 北京，上海，广东三个地区 不同行业被淘汰的公司总数对比图形
# # 提取有效列
# data = data[['com_addr','cat']]
# # 筛选条件
# addr = (data['com_addr']=='北京')|(data['com_addr']=='上海')|(data['com_addr']=='广东')
# # 提取行，排序，聚合计数
# clean = data.loc[addr,['com_addr','cat']].sort_values('com_addr').groupby(['com_addr','cat']).agg({'cat':'count'})
# # 对列重命名
# clean.columns = ['count']
# # 重置索引
# clean = clean.reset_index()
# # 转为list
# list1 = clean.values.tolist()
# print(list1)
def to_list(add):
address = (data['com_addr'] == add)
clean = data.loc[address, ['com_addr', 'cat']].sort_values('com_addr').groupby(['com_addr', 'cat']).agg({'cat': 'count'})
clean.columns = ['count']
clean = clean.reset_index()
list = clean.values.tolist()
return list
list1 = to_list('北京')
#print(list1)
list2 = to_list('上海')
#print(list2)
list3 = to_list('广东')
#print(list3)
list = [list1,list2,list3]
#print(list)
app = Flask(__name__)
@app.route('/')
def index():
sheets_list = list
return render_template("closed_company02.html",sheets=sheets_list)
if __name__ == '__main__':
app.run(debug=True)
前端HTML:
<!DOCTYPE html>
<html lang="en" style="height:">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="height:">
<div style="height:" id="container"></div>
<script type="text/javascript" src="../static/echarts%20(1).js"></script>
<script type="text/javascript">var dom = document.getElementById("container")
var myecharts = echarts.init(dom)
var data1 = [{% for item in sheets.0 %}'{{ item.1 }}',{% endfor %}];
var data2 = [{% for item in sheets.0 %}{{ item.2 }},{% endfor %}];
var data3 = [{% for item in sheets.1 %}{{ item.2 }},{% endfor %}];
var data4 = [{% for item in sheets.2 %}{{ item.2 }},{% endfor %}];
var option = null;
option = {
tooltip:{
trigger:'axis'
},
grid:{
top:'5%',
bottom:'5%',
right:'4%',
left:'4%',
containLabel:true
},
legend:{
show:true
},
xAxis:{
type:'category',
data:data1
},
yAxis:{
type:'value'
},
series:[
{
name:'北京',
type:'line',
data:data2
},{
name:'上海',
type:'line',
data:data3
},{
name:'广东',
type:'line',
data:data4
}
]
};
if (option && typeof option=='object'){
myecharts.setOption(option);
}</script>
</body>
</html>
效果图展示：
纠错：
今天二刷本题，发现了一个小秘密：我原来做错了，说实话有点搞心态，上一道题今天做了后发现也做错了。不过还好，及时发现了。为了不误导广大博友，为了能睡一个安心觉，我决定 ----- 纠正它。
话说回来，那么究竟错在了哪里呢？今天一看之前画的图，明明白白！说好的要一起的呢？广东那里去了？！
很明显，广东的数据在统计的时候，行业并没有农业的信息（尴尬了），所以在最后传输数据到前端展示的时候，按顺序提取数据，就会使得缺少一条数据（农业信息）。在转眼看到整合的list，确实是缺失了农业的数据。
在经过自己的比对过后，我发现只有广东这里缺失了一条农业信息，所以采用插值的形式来解决。
向list中添加元素的几种方法：
1.append(x) 将元素追加到列表尾部
2.extend(list_) 将列表list_中每个元素分别添加到另一个列表中
3.insert(i,x) 将元素x插入到列表中i位置，i从0开始
4.list3 = list1+list2 将list1与list2中的元素合并成一个新的list
在这里我们要向集合中指定的位置添加元素，所以使用inset方法。
经过插值处理后的list：
最终效果图（这里我更改使用了柱状图）：
