【Python+Flask+Echarts 】可视化样题 --- 绘制 北京、上海、广东三个地区 不同行业被淘汰的公司总数对比图形

【Python+Flask+Echarts 】可视化样题二 — 绘制 北京、上海、广东三个地区 不同行业被淘汰的公司总数对比图形


数据集展示:

在这里插入图片描述


需求分析:

在这里插入图片描述


数据预处理:

  • 导包
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')       # 按照com_addr列排序
            .groupby(['com_addr','cat']).agg({'cat':'count'}) # 分组聚合统计各行业的总数

由题意,在获取所需数据集后,我们要统计出三地区,各行业淘汰的公司数量。首先要将地区划分统计,就要用到分组,往往分组后就要和聚合联系在一起。此处的排序可以没有~

在这里插入图片描述
在这里插入图片描述


  • 转化结果集形式

这一步的操作处理可以说是关键,因为在处理好数据集后需要传入到后端,以什么样的形式呢?
在这里插入图片描述
可以清楚的看到,前端是以类似遍历数组的形式进行的,所以在后端采用转化为list的形式推送数据

那么问题又来了?转成什么样的list合适
这一点不难,一般通过所需绘图的图表信息,就是由x、y轴数据信息决定

一开始的时候我将聚合后的结果集直接转化如下图,于是发现了问题:直接转化得到的全是数值型数据,无法锁定数据是哪个地区哪个行业的,此时就需要添加更多的定位信息
在这里插入图片描述

  • 对列重命名、重置索引
clean.columns = ['count']
an.reset_index()
  • 转为list
list1 = clean.values.tolist()
print(list1)

于是根据聚合后的数据集,它是包含有索引的且为双重索引,所以可以使用reset_index()将索引还原为列,这样一来再去tolist的时候list中会添加一些信息注意:在操作reset_index()时,若有重复的列名会报错,所以之前先重新定义列名
在这里插入图片描述

在这里插入图片描述

终于,在转化好之后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中
 

list1:在这里插入图片描述
list:在这里插入图片描述
这样我们在获取数据遍历的时候,通过sheets.x来确定所在的城市信息,问题解决!

 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 %}];

数据可视化:

#使用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: 100%">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="height: 100%">
<div style="height: 100%" 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:
在这里插入图片描述

最终效果图(这里我更改使用了柱状图):

在这里插入图片描述


已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页