数据可视化及开发---基于销售数据对其进行可视化

爱被打了一巴掌 2024-03-16 15:14 56阅读 0赞

#### 文章目录 ####

*   *  一、前言：对于刚学数据可视化的新手小白来说，想要对一份数据进行可视化是不太容易的，可以说是无从下手，本篇文章就是基于本人在课上所学的一些知识对其进行巩固，技术有限就展示两三个图，话不多说开始了。
     *  数据说明：本篇文章的数据量较小，只有三个字段，分别是日期、牛奶、面包。
     *  三、实现过程：
     *   *  1.引入相关的库；
         *  pandas库：Pandas 是 Python 语言的一个扩展程序库，用于数据分析。 pychartes库：主要作用是用于生成Echarts图表的类库，这时候就会有疑问了，什么是echarts？
         *  Echarts是百度开源的一个数据可视化JS库，用Echarts生成的图可视化效果棒，pyecharts是为了与Python进行对接，方便在Python中直接使用数据生成图。使用pyecharts能够生成独立的网页，也能够在flask、django中集成使用
         *  beautifulsoup库
         *  2.导入数据表；data = pd.read\_excel(r'要导入的数据表名字'）\# 'r'是转义字符，避免路径中的'\\'被转译
         *  3.对数据进行处理，由于数据中的日期列是时间对象序列，时间对象数据无法在pyecharts的坐标轴数据中使用，所以我们需要将数据转化为字符串或者数字对象；
         *  方法一：将时间对象转换成字符串，并提取片段：x1 = data\['日期'\].agg(lambda x:str(x) \[5:10\]).tolist()
         *  方法二：提取时间对象的局部时间并重新加工成字符串 ：x1 = data\['日期'\].agg(lambda x:str(x.day) ).tolist()
         *  4.写入画图代码 5.将实现的图生成page组合图，并搭建网页
 *  正文部分

### 一、前言：对于刚学数据可视化的新手小白来说，想要对一份数据进行可视化是不太容易的，可以说是无从下手，本篇文章就是基于本人在课上所学的一些知识对其进行巩固，技术有限就展示两三个图，话不多说开始了。 ###

### 数据说明：本篇文章的数据量较小，只有三个字段，分别是日期、牛奶、面包。 ###

### 三、实现过程： ###

#### 1.引入相关的库； ####

#### pandas库：Pandas 是 Python 语言的一个扩展程序库，用于数据分析。 pychartes库：主要作用是用于生成Echarts图表的类库，这时候就会有疑问了，什么是echarts？ ####

#### Echarts是百度开源的一个数据可视化JS库，用Echarts生成的图可视化效果棒，pyecharts是为了与Python进行对接，方便在Python中直接使用数据生成图。使用pyecharts能够生成独立的网页，也能够在flask、django中集成使用 ####

#### beautifulsoup库 ####

#### 2.导入数据表；data = pd.read\_excel(r’要导入的数据表名字’）\# ‘r’是转义字符，避免路径中的’'被转译 ####

#### 3.对数据进行处理，由于数据中的日期列是时间对象序列，时间对象数据无法在pyecharts的坐标轴数据中使用，所以我们需要将数据转化为字符串或者数字对象； ####

#### 方法一：将时间对象转换成字符串，并提取片段：x1 = data\[‘日期’\].agg(lambda x:str(x) \[5:10\]).tolist() ####

#### 方法二：提取时间对象的局部时间并重新加工成字符串 ：x1 = data\[‘日期’\].agg(lambda x:str(x.day) ).tolist() ####

#### 4.写入画图代码 5.将实现的图生成page组合图，并搭建网页 ####

## 正文部分 ##

**1.引入pandas库；**

import pandas as pd

**2.导入数据；**

data = pd.read_excel(r'折线图作业数据-商品销量(1).xlsx')
    data

**运行结果**：![在这里插入图片描述][fe01ed1d3d904f63a3532d38f1461c44.png_pic_center]

**3.将时间对象转换成字符串，并提取片段，由上图的运行结果可以看到，日期列为时间对象序列所以我们对这个序列进行了一些处理，并用切片提取日期列中的月份和日**

x1 = data['日期'].agg(lambda x:str(x) [5:10]).tolist()
    x1

**运行结果**： ![在这里插入图片描述][2f9d0740c1fa45b987bbb743420f600a.png_pic_center]

**4.（1）.画折线图展示牛奶和面包的每日销量**

from pyecharts.charts import Line
    from pyecharts import options as opts
    bar=(
        Line()
        .add_xaxis(x1)
        .add_yaxis("",data['牛奶'],symbol="triangle",
            symbol_size=20, 
            linestyle_opts=opts.LineStyleOpts(color="#ff8080", width=4, type_="solid"), # 设置线条的样式
            label_opts=opts.LabelOpts(is_show=True))
        .add_yaxis("",data['面包'],symbol="triangle",
            symbol_size=20,
            linestyle_opts=opts.LineStyleOpts(color="#ff8080", width=4, type_="solid"), # 设置线条的样式
            label_opts=opts.LabelOpts(is_show=True))
    
    )
    bar.render_notebook()

**运行结果**：![在这里插入图片描述][bc282098ae204016a788ba9fedd18ba3.png_pic_center]  
（2.）**画堆积折线图展示牛奶和面包的每日销量**

from pyecharts.charts import Line
    from pyecharts import options as opts
    c=(
        Line(init_opts=opts.InitOpts(width='800px',height='400px'))
        .add_xaxis(x1)
        .add_yaxis(
            series_name="牛奶",
            stack=1,
            y_axis=data['牛奶'],
            areastyle_opts=opts.AreaStyleOpts(opacity=0.5),
            is_smooth = True,
            label_opts=opts.LabelOpts(is_show=False),
        )
        .add_yaxis(
            series_name="面包",
            stack=1,
            y_axis=data['面包'],
            areastyle_opts=opts.AreaStyleOpts(opacity=0.5),
            is_smooth = True,
             
             )
        .set_global_opts(
            xaxis_opts=opts.AxisOpts(type_="category", boundary_gap=False),
            datazoom_opts=opts.DataZoomOpts(), # 配置滑动条
           
        )
    )
    c.render_notebook()

**运行结果**：![在这里插入图片描述][9c86fb91d1064560b563c2fbe02cfd05.png_pic_center]

(3)**.画柱形图分别展示牛奶和面包的销量,通过groupby分组，计算每日牛奶的销售总额**

result = data.groupby(by=['日期'])['牛奶'].sum()  
    result

**将牛奶每日的销售额变成一个列表**

sale = data['牛奶'].tolist()  #
    sale

**代码实现：**

from pyecharts import options as opts
    from pyecharts.charts import Bar
    x = [i for i in result.index]
    y1 = result.tolist()
    bar = (
        Bar()
        .add_xaxis(x)
        .add_yaxis("牛奶", y1, stack=1,category_gap=5, color = 'pink')
        .set_series_opts(label_opts=opts.LabelOpts(is_show=True)) # 配置是否显示数据的标签
        .set_global_opts(title_opts=opts.TitleOpts(title="牛奶销量柱形图"), # 设置标题
                        xaxis_opts = opts.AxisOpts(axislabel_opts=opts.LabelOpts(rotate=90, # x轴刻度倾斜角度
                                                                                 horizontal_align = 'center', # x轴刻度文字对齐方式
                                                                                 margin = 20 # x轴刻度距离x轴的距离
                                                                                ),
                                                   axistick_opts = opts.AxisTickOpts(is_show=True, # 刻度线配置
                                                                                     length=5,
                                                                                     is_inside = True
                                                                                    ), 
                                                  ),
                        )
    )
    bar.render_notebook()

**牛奶销售额柱形图**：![在这里插入图片描述][d05380b4e94e4b60b0ef43db64c0a618.png_pic_center]  
**通过groupby对数据中的面包分组，计算每日面包的销售总额**

result1 = data.groupby(by=['日期'])['面包'].sum()
    result1

**将面包每日的销售额变成一个列表**

sale = data['面包'].tolist()
    sale

**代码实现:**

from pyecharts import options as opts
    from pyecharts.charts import Bar
    x = [i for i in result.index]
    y1 = result1.tolist()
    bar = (
        Bar()
        .add_xaxis(x)
        .add_yaxis("面包", y1, stack=1,category_gap=5, color = '#99FFFF')
        .set_series_opts(label_opts=opts.LabelOpts(is_show=True)) # 配置是否显示数据的标签
        .set_global_opts(title_opts=opts.TitleOpts(title="面包销量柱形图"), # 设置标题
                        xaxis_opts = opts.AxisOpts(axislabel_opts=opts.LabelOpts(rotate=90, # x轴刻度倾斜角度
                                                                                 horizontal_align = 'center', # x轴刻度文字对齐方式
                                                                                 margin = 20 # x轴刻度距离x轴的距离
                                                                                ),
                                                   axistick_opts = opts.AxisTickOpts(is_show=True, # 刻度线配置
                                                                                     length=5,
                                                                                     is_inside = True
                                                                                    ), 
                                                  ),
                        )
    )
    bar.render_notebook()

**面包销售额柱形图**：![在这里插入图片描述][26bee07587e7492e81cbcf43dea10ce1.png_pic_center]

**五、将实现的图生成page组合图，并搭建网页  
1.先构成大屏标题：用datatime来获取当前时间**

from pyecharts.charts import Pie
    from datetime import datetime
    now_time = datetime.now().strftime('%Y-%m-%d') # 获取当前时间
    big_title = (
        Pie() # 不画图，只显示一个标题，用来构成大屏的标题
            .set_global_opts(
            title_opts=opts.TitleOpts(title="大屏标题",
                                      title_textstyle_opts=opts.TextStyleOpts(font_size=40,
    #                                                                           color='#FFFFFF',
                                                                             ),
                                      subtitle = f'截至：{
          now_time}',
                                      pos_top=10
                                     )
            )
    )
    big_title.render_notebook()

2\*\*. 生成page组合图\*\*

from pyecharts.charts import Page
    
    page = Page()
    page.add(
        big_title,
        liquid,
        line,
        bar,
    )
    # page.render_notebook()
    page.render('page.html')

3. **导入beautifulsoup库，修改html文件**

from bs4 import BeautifulSoup

with open("page.html", "r+", encoding='utf-8') as html:
        html_bf = BeautifulSoup(html, 'lxml')
        divs = html_bf.select('.chart-container') # 根据css定位标签，选中图像的父节点标签
        divs[0]["style"] = "width:420px;height:55px;position:absolute;top:20px;left:730px;border-style:dashed;border-color:#444444;border-width:0px;"
        divs[1]["style"] = "width:420px;height:274px;position:absolute;top:500px;left:300px;border-style:solid;border-color:#444444;border-width:2px;"
        divs[2]["style"] = "width:420px;height:274px;position:absolute;top:100px;left:300px;border-style:solid;border-color:#444444;border-width:2px;"
        divs[3]["style"] = "width:420px;height:274px;position:absolute;top:100px;left:910px;border-style:solid;border-color:#444444;border-width:2px;"
        body = html_bf.find("body") # 根据标签名称定位到body标签
        body["style"] = "background-color:white;" # 修改背景颜色
        html_new = str(html_bf) # 将BeautifulSoup对象转换为字符
        html.seek(0, 0) # 光标移动至
        html.truncate() # 删除光标后的所有字符内容
        html.write(html_new) # 将由BeautifulSoup对象转换得到的字符重新写入html文件
        html.close()

4.**创建flask对象**

app = Flask(__name__)
    # 设置路由及其内容
    @app.route('/page')
    def hello():
        return render_template('page.html') # html文件一定要放在templates文件夹中
        
    if __name__ == '__main__':
        app.run(host='0.0.0.0', port=80) # 局域网电脑通过访问本机的ip地址即可访问网页

**实现效果：一个简易版的数据可视化大屏就生成了**  
![在这里插入图片描述][010a4f6e6def4b9394140e9ca4ece4fb.png_pic_center]  
每日一语：  
纸上得来终觉浅，绝知此事要躬行；  
如果这篇博客对您有帮助，就赶快去试一试吧，说不定会有意想不到的收获呦~

[fe01ed1d3d904f63a3532d38f1461c44.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/7dda84e773e94e528c3f7b2bdac7cccf.png
[2f9d0740c1fa45b987bbb743420f600a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/7e1580ed26dd449ca573edca9513633e.png
[bc282098ae204016a788ba9fedd18ba3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/ef8870eda6f94a688da8f64edd2ef825.png
[9c86fb91d1064560b563c2fbe02cfd05.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/719d239ea940415ca86e1aec33fc24ea.png
[d05380b4e94e4b60b0ef43db64c0a618.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/accd1a7f5a8048039e43106d940b0dc0.png
[26bee07587e7492e81cbcf43dea10ce1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/9f8a4d1b2dc7404bb715d162f00be770.png
[010a4f6e6def4b9394140e9ca4ece4fb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/bd87791447f345328b78c92acd92ce2c.png