一、多重柱形图（使用pyecharts画图）

db_yxy_2036

已于 2023-06-08 23:40:01 修改

阅读量850

点赞数

文章标签： pandas 数据分析 python

于 2023-06-08 23:36:42 首次发布

本文链接：https://blog.csdn.net/db_yxy_2036/article/details/131117154

版权

1.导入python的相关库

2.用pandas库read_excel 方法读取数据（数据有两个表）

3.进行数据合并（主键拼接）

4.数据预处理

5.画图

二、使用Flask+echarts数据可视化（折线图）

1.使用python解析器切换到能运行的状态

2.第二部把flask框架的文件夹位置层级处理好

（1）在html文件里面用阿贾克斯来访问对应的列（取X轴与y轴的数据封装到函数里面，前提是先导入到js文件里面注意：里面有一个文件），flask的层级不能放错位置否则阿贾克斯读取不到你的数据

（2）在主函数里面写入导入你需要的数据源数据（这里要用绝对路径避免错误）

（3）数据预处理，表格中里面有一个列是付款人数的列，我们要把他先变为字符串，之后字符串转换整数，方便后面分组聚合，这里我们想得到的数据是店铺名称与总销售，所以构建一个新的序列价格乘数量得到总销售

（4）把得到的数据转为列表对象封装成一个字典对象

3.用路由函数填写的是你的网站路径这里用的是JSON的路径

访问后得到的是字典

4.最后是视图函数写入路径

5.最后用min函数运行测试

6.测试效果

前言：

数据可视化，这个是将自己想分析的数据来呈现到更直观的人眼前，传统的数据一般通过Excel表格记录，一眼看上去枯燥乏味，而数据可视化则是通过酷炫的图表和动效让单调的数据焕发出新的活力，用“数据可视化”将历年数据经过统计、提取、整合、提炼，最后通过可视化方式展示出来，改变以往以纯文字、数字方式进行项目汇报方式，利用图形化报表，加强数据的对比，使决策者更高效的掌握重要信息和了解重要细节，这关系到企业重大决策的制定和发展方向的研判。

一、多重柱形图

1.导入python的相关库

import pandas as pd
import matplotlib.pyplot as bar

2.用pandas库read_excel 方法读取数据（数据有两个表）

shangping2=pd.read_excel('商品订单明细表.xlsx')
shangping2

shangping2=pd.read_excel('商品订单明细表.xlsx')
shangping2

3.进行数据合并（主键拼接）

这里使用到外连接，他们的共同主键是商品id

w=pd.merge(shangping,shangping2,how='outer',on='商品ID')
print(w)

4.数据预处理

（1）进行数据空值统计

w.isnull().sum()

（2）用dropna方法进行处理数据去除空值，第一个参数（subset这个是对某一列进行删除，第二个参数how=any这个意思是只要有空的就去除）

w2=w.dropna(subset=['产品名称'],how='any')
w3=w2.dropna(subset=['记录ID'],how='any')

（3）最后再用同样的方法查看数据是否还有缺少可以发现空的已被去除

（4）分组聚合根据，我们想要的是每个省份的产品类型有多少，这里是ab两种类型，用sum函数来求和，这里sum函数是有整数的数据才会相加，count函数是统计字符串中的每个各有多少数量

result = w3.groupby(by=['产品类型','省份'])['计数'].sum()
result_a = result['A'].sort_values(ascending=False)
result_b = result['B'].sort_values(ascending=False)
result_as=result_a.head(15)
result_bs=result_b.head(15)
result_bs

（5）我们想构建的X轴数据是字符串的省份，这里使用了for循环把每一个的省份index取索引的方法取出来

x=[i for i in result_as.index]
x

5.画图

（1）导入bar的库我们需要的是条形图的

（2）设置配置项

init_opts这个是设置整个图形的属性（宽度，高度）

barl.add_xaxis(x)这个是添加X轴的数据

barl.add_yaxis('A商品',result_as.values.tolist(),stack=1,category_gap=5)添加y轴的数据

这里使用了stack这个是使图形堆积默认是1

barl.reversal_axis()这个是设置图形是否水平

set_global_opts这个是设置全局配置项（比如标题，还有他的距离）

xaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(rotate=45,color='blue'))这个是设置标签的颜色还有倾斜角度

barl.render_notebook()最后画图

from pyecharts.charts import Bar,Line,Map,Page,Pie
from pyecharts import options as opts
from pyecharts.globals import SymbolType
barl =Bar(init_opts=opts.InitOpts(width='2500px',height='1500px'))
barl=Bar()
barl.add_xaxis(x)
barl.add_yaxis('A商品',result_as.values.tolist(),stack=1,category_gap=5)
barl.add_yaxis('B商品',result_bs.values.tolist(),stack=1,category_gap=5)
barl.reversal_axis()
barl.set_global_opts(title_opts=opts.TitleOpts(title='各个商品的数据对比销量'))
xaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(rotate=45,color='blue'))
barl.render_notebook()

二、使用Flask+echarts数据可视化（折线图）

1.使用python解析器切换到能运行的状态（选择base的解析器）

2.第二部把flask框架的文件夹位置层级处理好（这里注意要使用固定的命名）

1）在html文件里面用阿贾克斯来访问对应的列（取X轴与y轴的数据封装到函数里面，前提是先导入到js文件里面

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>bar</title>
    <script type="text/javascript" src="../static/js/jquery-3.6.4.min.js"></script>
    <script type="text/javascript" src="../static/js/echarts.min.js"></script>
</head>

<body>
    <h2>ajax异步请求实现echarts画图</h2>
    <div id="chart" style="width:900; height:500px;"></div>
    <script type='text/javascript'>
        var myChart = echarts.init(document.getElementById('chart'));
        var option;
        option = {
            xAxis: {
                type: 'category',
                data: [],
            },
            yAxis: {
                type: 'value'
            },
            series: 
                {
                    data: [],
                    type: 'line'
                },
                series: [
                {
                    data: [],
                    type: 'line'
                },
            ]
        };
        // 将ajax封装到函数中执行
        function get_json() {
            $.ajax({
                url: "/json",
                success: function (e) {
                    option.xAxis.data = e.name;
                    option.series[0].data = e.price;
                    //option.series[1].data = e.bread;
                    myChart.setOption(option);
                }
            })
        }
        get_json();