上篇文章《基于Pyecharts可视化大屏案例一(1)》已经为大家详细展示了大屏中间第一张图形的制作过程以及可视化大屏的布局，我们先来回顾下完整的精美大屏：

请看下本文在上文基础上制作左上图形的最终效果：

视频显示：

接下来，请开始你的表演......

1.  加载一箩筐的库

from pyecharts.charts import Page,Bar,Line,Grid,Pieimport pyecharts.options as optsfrom pyecharts.globals import ThemeTypefrom pyecharts.faker import Fakerfrom pyecharts.commons.utils import JsCodeimport pandas as pdimport numpy as npimport randomfrom bs4 import BeautifulSoup

2.  生成随机数据

names = ['门店_'+str(i) for i in range(1,31)] #生成30个门店的名字sales = [random.randint(1000,10000) for _ in range(30)] #随机生成30个数字，代表门店销售额df = pd.DataFrame() #生成一个空DataFrame()df['店名'] = names df['销售额'] = salesdf.sort_values(by='销售额',ascending=True,inplace=True) #按销售额从小到大排序# 修改店名(加上排名显示)new_names = [] for name,i in zip(df['店名'],[i for i in range(30,0,-1)]):     new_names.append(name+'(第'+str(i)+'名)')df['店名'] = new_names

3. 不加任何参数绘制柱形图

bar = (    Bar()    .add_xaxis(df['店名'].tolist())    .add_yaxis("门店销售额(万元)", df['销售额'].tolist())).render('test.html')

4. 设置主题背景(以DARK为例)

bar = (    Bar(        init_opts=opts.InitOpts(            theme =  ThemeType.DARK #设置主题        )    )    .add_xaxis(df['店名'].tolist())    .add_yaxis("门店销售额(万元)", df['销售额'].tolist())).render('test.html')

5. 旋转X、Y轴

bar = (    Bar(        init_opts=opts.InitOpts(            theme =  ThemeType.DARK #设置主题        )    )    .add_xaxis(df['店名'].tolist())    .add_yaxis("门店销售额(万元)", df['销售额'].tolist())    .reversal_axis() #旋转XY轴).render('test.html')

6.  设置提示框、拖拉框，以及设置拖拉框按Y轴拖拉

bar = (    Bar(        init_opts=opts.InitOpts(            theme =  ThemeType.DARK #设置主题        )    )    .add_xaxis(df['店名'].tolist())    .add_yaxis("门店销售额(万元)", df['销售额'].tolist())    .reversal_axis() #旋转XY轴    .set_global_opts(        tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),        datazoom_opts=opts.DataZoomOpts(            orient='vertical', #将拖拉框垂直放置，即按Y轴拖拉            range_start = 60, #拖拉起始位置(百分比)            range_end = 100, #拖拉结束位置(百分比)        ),    )).render('test.html')

7. 将拖拉框隐藏

bar = (    Bar(        init_opts=opts.InitOpts(            theme =  ThemeType.DARK #设置主题        )    )    .add_xaxis(df['店名'].tolist())    .add_yaxis("门店销售额(万元)", df['销售额'].tolist())    .reversal_axis() #旋转XY轴    .set_global_opts(        tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),        datazoom_opts=opts.DataZoomOpts(            type_='inside',  #将拖拉框隐藏            orient='vertical', #将拖拉框垂直放置，即按Y轴拖拉            range_start = 60, #拖拉起始位置(百分比)            range_end = 100, #拖拉结束位置(百分比)        ),    )).render('test.html')

8.   设置X、Y轴、legend的刻度范围、字体大小、字体颜色

bar = (    Bar(        init_opts=opts.InitOpts(            theme =  ThemeType.DARK #设置主题        )    )    .add_xaxis(df['店名'].tolist())    .add_yaxis("门店销售额(万元)", df['销售额'].tolist())    .reversal_axis() #旋转XY轴    .set_global_opts(        xaxis_opts=opts.AxisOpts(            max_ = 11000,            axislabel_opts  = opts.LabelOpts(                color = '#BFBFBF' # 设置X轴标签颜色            ),        ),        yaxis_opts=opts.AxisOpts(            axislabel_opts  = opts.LabelOpts(                font_size = 15,                color = '#BFBFBF' # 设置Y轴标签颜色            ),        ),        legend_opts=opts.LegendOpts(            is_show=True,             pos_left="center",             orient="vertical",            textstyle_opts = opts.TextStyleOpts(                  color  = '#FFDA85',                # 文字的字体大小                font_size = 20,                                               )        ),        tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),        datazoom_opts=opts.DataZoomOpts(            type_='inside',  #将拖拉框隐藏            orient='vertical', #将拖拉框垂直放置，即按Y轴拖拉            range_start = 60, #拖拉起始位置(百分比)            range_end = 100, #拖拉结束位置(百分比)        ),    )).render('test.html')

9.  设置标签值的位置以及添加均值线

bar = (    Bar(        init_opts=opts.InitOpts(            theme =  ThemeType.DARK #设置主题        )    )    .add_xaxis(df['店名'].tolist())    .add_yaxis("门店销售额(万元)", df['销售额'].tolist())    .reversal_axis() #旋转XY轴    .set_global_opts(        xaxis_opts=opts.AxisOpts(            max_ = 11000,            axislabel_opts  = opts.LabelOpts(                color = '#BFBFBF' # 设置X轴标签颜色            ),        ),        yaxis_opts=opts.AxisOpts(            axislabel_opts  = opts.LabelOpts(                font_size = 15,                color = '#BFBFBF' # 设置Y轴标签颜色            ),        ),        legend_opts=opts.LegendOpts(            is_show=True,             pos_left="center",             orient="vertical",            textstyle_opts = opts.TextStyleOpts(                  color  = '#FFDA85',                # 文字的字体大小                font_size = 20,                                               )        ),        tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),        datazoom_opts=opts.DataZoomOpts(            type_='inside',  #将拖拉框隐藏            orient='vertical', #将拖拉框垂直放置，即按Y轴拖拉            range_start = 60, #拖拉起始位置(百分比)            range_end = 100, #拖拉结束位置(百分比)        ),    )    .set_series_opts(        label_opts=opts.LabelOpts(position="right"), #设置标签值的位置        markline_opts=opts.MarkLineOpts(            data=[opts.MarkLineItem(x=df['销售额'].mean(), name="均值")], #添加均值线            linestyle_opts=opts.LineStyleOpts(color="#00CC99")         ),    )).render('test.html')

10.  将其添加到可视化大屏上

此时需要将上一篇文章的图形与本文的图形绘制过程封装成两个函数，然后通过Page()这个对象将两者拼接起来，再通过修改两个图形在html的位置即可(注意文件名已经更改为my_first_pycharts.html)。完整代码如下：

def get_grid_1():    year = list(range(2004,2021)) #年份    random_data_1 = [random.randint(1000,10000) for _ in range(17) ] #生成17个随机整数    random_data_2 = [random.randint(100,1000) for _ in range(17) ] #生成17个随机整数    r1 = [round((random_data_1[i]-random_data_1[i-1])/random_data_1[i],2) for i in range(len(random_data_1))[1:]] #计算增长率，并取2位小数点    r2 = [round((random_data_2[i]-random_data_2[i-1])/random_data_2[i],2) for i in range(len(random_data_2))[1:]] #计算增长率，并取2位小数点    # 柱图    bar = (        Bar()        .add_xaxis(year)        .add_yaxis('销售额',random_data_1,yaxis_index=0,gap='10%')        .add_yaxis('订单量',random_data_2,yaxis_index=1,gap='10%')        .extend_axis(              #添加一个描绘订单量的坐标轴            yaxis=opts.AxisOpts(                name = '订单量\n(万件)',                position = 'right', #设置坐标轴在画布右侧                min_ = 0, #设置y刻度的最小值                max_ = 1300, #设置y刻度的最小值                offset = 60, #设置Y轴偏移                axisline_opts=opts.AxisLineOpts(                    linestyle_opts=opts.LineStyleOpts(color="#FFB8B8")                ),            )        )        .extend_axis(               #添加一个描绘增长率的坐标轴            yaxis=opts.AxisOpts(                name = '增长率',                position="left",   #设置坐标轴在画布左侧                min_ = -5, #设置y刻度的最小值                max_ = 5,#设置y刻度的最大值                axisline_opts=opts.AxisLineOpts(                    linestyle_opts=opts.LineStyleOpts(color="#CCCC00")                ),            )        )        .set_global_opts(            yaxis_opts=opts.AxisOpts(                name = '销售额\n(万元)',                position="right", #设置描绘销售额的坐标轴在画布右侧                axisline_opts=opts.AxisLineOpts(                    linestyle_opts=opts.LineStyleOpts(color="#EEAEEE")                ),            ),             title_opts=opts.TitleOpts(                title="历年订货额/订单量增长情况",                pos_left = 'center',                pos_top = '0px',                # 设置主标题字体、颜色、大小等                title_textstyle_opts = opts.TextStyleOpts(                     #文字颜色                     color='#66FFB3',                      #文字风格，可选：normal(正常)、italic(斜体)、oblique(斜体)                     font_style='normal',                      #主标题文字字体的粗细，可选：'normal'，'bold'，'bolder'，'lighter'                     font_weight='bold',                     #文字的字体系列,还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...                     font_family='Arial',                     # 文字的字体大小                     font_size = 25,                )            ),            legend_opts=opts.LegendOpts( #将标签设置在左边居中，并纵向排列                is_show=True,                 pos_left="left",                 orient="vertical",                pos_top = 'center',                textstyle_opts = opts.TextStyleOpts(                                          font_size = 10,  # 标签字体大小                                                 )            ),            tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"), #设置提示框            datazoom_opts=opts.DataZoomOpts(                range_start = 70,                range_end = 100,            ),        )    )    #线图    line = (        Line()        .add_xaxis(['2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020'])        .add_yaxis('销增长率',r1,yaxis_index=2,itemstyle_opts=opts.ItemStyleOpts(color='green'))        .add_yaxis('订增长率',r2,yaxis_index=2,itemstyle_opts=opts.ItemStyleOpts(color='#FF4D4D'))    )    # 合并两个图    overlap_ = bar.overlap(line)    grid = (        Grid(            init_opts=opts.InitOpts(                width = '1500px', # 设置画布宽                height = '800px', #设置画布高        #             bg_color = '#004B66', # 背景颜色设置                theme =  ThemeType.WONDERLAND #设置主题            )        )        .add(overlap_,              opts.GridOpts(                 pos_left="10%", #调整左边轴线与画布的距离                 pos_right="13%" #调整右边边轴线与画布的距离             ),              is_control_axis_index=True,        )    )        return griddef get_grid_2():    names = ['门店_'+str(i) for i in range(1,31)] #生成30个门店的名字    sales = [random.randint(1000,10000) for _ in range(30)] #随机生成30个数字，代表门店销售额    df = pd.DataFrame() #生成一个空DataFrame()    df['店名'] = names     df['销售额'] = sales    df.sort_values(by='销售额',ascending=True,inplace=True) #按销售额从小到大排序    # 修改店名(加上排名显示)    new_names = []     for name,i in zip(df['店名'],[i for i in range(30,0,-1)]):         new_names.append(name+'(第'+str(i)+'名)')    df['店名'] = new_names        # 画图    bar = (        Bar(            init_opts=opts.InitOpts(                theme =  ThemeType.DARK #设置主题            )        )        .add_xaxis(df['店名'].tolist())        .add_yaxis("门店销售额(万元)", df['销售额'].tolist())        .reversal_axis() #旋转XY轴        .set_global_opts(            xaxis_opts=opts.AxisOpts(                max_ = 11000,                axislabel_opts  = opts.LabelOpts(                    color = '#BFBFBF' # 设置X轴标签颜色                ),            ),            yaxis_opts=opts.AxisOpts(                axislabel_opts  = opts.LabelOpts(                    font_size = 15,                    color = '#BFBFBF' # 设置Y轴标签颜色                ),            ),            legend_opts=opts.LegendOpts(                is_show=True,                 pos_left="center",                 orient="vertical",                textstyle_opts = opts.TextStyleOpts(                      color  = '#FFDA85',                    # 文字的字体大小                    font_size = 20,                                                   )            ),            tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),            datazoom_opts=opts.DataZoomOpts(                type_='inside',  #将拖拉框隐藏                orient='vertical', #将拖拉框垂直放置，即按Y轴拖拉                range_start = 60, #拖拉起始位置(百分比)                range_end = 100, #拖拉结束位置(百分比)            ),        )        .set_series_opts(            label_opts=opts.LabelOpts(position="right"), #设置标签值的位置            markline_opts=opts.MarkLineOpts(                data=[opts.MarkLineItem(x=df['销售额'].mean(), name="均值")], #添加均值线                linestyle_opts=opts.LineStyleOpts(color="#00CC99")             ),        )    )        return bardef get_page():    grid1 = get_grid_1()    grid2 = get_grid_2()        page = (        Page()        .add(grid1)        .add(grid2)    )    return pagewith open("my_first_pycharts.html", "r+", encoding='utf-8') as html:    page = get_page()    page.render('my_first_pycharts.html')        html_bf = BeautifulSoup(html, 'lxml')    divs = html_bf.select('.chart-container')    divs[0]['style'] = "width:750px;height:400px;top:120px;left:550px;border-style:solid;border-color:#444444;border-width:0px;"    divs[1]['style'] = "width:550px;height:400px;top:120px;left:30px;border-style:solid;border-color:#444444;border-width:0px;"                body = html_bf.find("body")    body["style"] = "background-color:#07645D;" #设置网页背景颜色    div_title="

\n 2020年销售数据分析 " #修改页面背景色、追加标题 body.insert(0,BeautifulSoup(div_title,"lxml").div) html_new = str(html_bf) html.seek(0, 0) html.truncate() html.write(html_new) html.close()

11.  修改主题背景以及Y轴与左边框的间距

从上图中可以看出，主题背景还得得改成WONDERLAND。对于店名显示不全的问题，需要在get_grid_2()里创建一个grid()进行修改，完整代码如下：

def get_grid_1():    year = list(range(2004,2021)) #年份    random_data_1 = [random.randint(1000,10000) for _ in range(17) ] #生成17个随机整数    random_data_2 = [random.randint(100,1000) for _ in range(17) ] #生成17个随机整数    r1 = [round((random_data_1[i]-random_data_1[i-1])/random_data_1[i],2) for i in range(len(random_data_1))[1:]] #计算增长率，并取2位小数点    r2 = [round((random_data_2[i]-random_data_2[i-1])/random_data_2[i],2) for i in range(len(random_data_2))[1:]] #计算增长率，并取2位小数点    # 柱图    bar = (        Bar()        .add_xaxis(year)        .add_yaxis('销售额',random_data_1,yaxis_index=0,gap='10%')        .add_yaxis('订单量',random_data_2,yaxis_index=1,gap='10%')        .extend_axis(              #添加一个描绘订单量的坐标轴            yaxis=opts.AxisOpts(                name = '订单量\n(万件)',                position = 'right', #设置坐标轴在画布右侧                min_ = 0, #设置y刻度的最小值                max_ = 1300, #设置y刻度的最小值                offset = 60, #设置Y轴偏移                axisline_opts=opts.AxisLineOpts(                    linestyle_opts=opts.LineStyleOpts(color="#FFB8B8")                ),            )        )        .extend_axis(               #添加一个描绘增长率的坐标轴            yaxis=opts.AxisOpts(                name = '增长率',                position="left",   #设置坐标轴在画布左侧                min_ = -5, #设置y刻度的最小值                max_ = 5,#设置y刻度的最大值                axisline_opts=opts.AxisLineOpts(                    linestyle_opts=opts.LineStyleOpts(color="#CCCC00")                ),            )        )        .set_global_opts(            yaxis_opts=opts.AxisOpts(                name = '销售额\n(万元)',                position="right", #设置描绘销售额的坐标轴在画布右侧                axisline_opts=opts.AxisLineOpts(                    linestyle_opts=opts.LineStyleOpts(color="#EEAEEE")                ),            ),             title_opts=opts.TitleOpts(                title="历年订货额/订单量增长情况",                pos_left = 'center',                pos_top = '0px',                # 设置主标题字体、颜色、大小等                title_textstyle_opts = opts.TextStyleOpts(                     #文字颜色                     color='#66FFB3',                      #文字风格，可选：normal(正常)、italic(斜体)、oblique(斜体)                     font_style='normal',                      #主标题文字字体的粗细，可选：'normal'，'bold'，'bolder'，'lighter'                     font_weight='bold',                     #文字的字体系列,还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...                     font_family='Arial',                     # 文字的字体大小                     font_size = 25,                )            ),            legend_opts=opts.LegendOpts( #将标签设置在左边居中，并纵向排列                is_show=True,                 pos_left="left",                 orient="vertical",                pos_top = 'center',                textstyle_opts = opts.TextStyleOpts(                                          font_size = 10,  # 标签字体大小                                                 )            ),            tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"), #设置提示框            datazoom_opts=opts.DataZoomOpts(                range_start = 70,                range_end = 100,            ),        )    )    #线图    line = (        Line()        .add_xaxis(['2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020'])        .add_yaxis('销增长率',r1,yaxis_index=2,itemstyle_opts=opts.ItemStyleOpts(color='green'))        .add_yaxis('订增长率',r2,yaxis_index=2,itemstyle_opts=opts.ItemStyleOpts(color='#FF4D4D'))    )    # 合并两个图    overlap_ = bar.overlap(line)    grid = (        Grid(            init_opts=opts.InitOpts(                width = '1500px', # 设置画布宽                height = '800px', #设置画布高        #             bg_color = '#004B66', # 背景颜色设置                theme =  ThemeType.WONDERLAND #设置主题            )        )        .add(overlap_,              opts.GridOpts(                 pos_left="10%", #调整左边轴线与画布的距离                 pos_right="13%" #调整右边边轴线与画布的距离             ),              is_control_axis_index=True,        )    )        return griddef get_grid_2():    names = ['门店_'+str(i) for i in range(1,31)] #生成30个门店的名字    sales = [random.randint(1000,10000) for _ in range(30)] #随机生成30个数字，代表门店销售额    df = pd.DataFrame() #生成一个空DataFrame()    df['店名'] = names     df['销售额'] = sales    df.sort_values(by='销售额',ascending=True,inplace=True) #按销售额从小到大排序    # 修改店名(加上排名显示)    new_names = []     for name,i in zip(df['店名'],[i for i in range(30,0,-1)]):         new_names.append(name+'(第'+str(i)+'名)')    df['店名'] = new_names        # 画图    bar = (        Bar()        .add_xaxis(df['店名'].tolist())        .add_yaxis("门店销售额(万元)", df['销售额'].tolist())        .reversal_axis() #旋转XY轴        .set_global_opts(            xaxis_opts=opts.AxisOpts(                max_ = 11000,                axislabel_opts  = opts.LabelOpts(                    color = '#BFBFBF' # 设置X轴标签颜色                ),            ),            yaxis_opts=opts.AxisOpts(                axislabel_opts  = opts.LabelOpts(                    font_size = 15,                    color = '#BFBFBF' # 设置Y轴标签颜色                ),            ),            legend_opts=opts.LegendOpts(                is_show=True,                 pos_left="center",                 orient="vertical",                textstyle_opts = opts.TextStyleOpts(                      color  = '#FFDA85',                    # 文字的字体大小                    font_size = 20,                                                   )            ),            tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),            datazoom_opts=opts.DataZoomOpts(                type_='inside',  #将拖拉框隐藏                orient='vertical', #将拖拉框垂直放置，即按Y轴拖拉                range_start = 60, #拖拉起始位置(百分比)                range_end = 100, #拖拉结束位置(百分比)            ),        )        .set_series_opts(            label_opts=opts.LabelOpts(position="right"), #设置标签值的位置            markline_opts=opts.MarkLineOpts(                data=[opts.MarkLineItem(x=df['销售额'].mean(), name="均值")], #添加均值线                linestyle_opts=opts.LineStyleOpts(color="#00CC99")             ),        )    )        # 创建一个grid    grid = (        Grid(            init_opts=opts.InitOpts(                theme =  ThemeType.WONDERLAND #设置主题            )        )        .add(bar, grid_opts=opts.GridOpts(pos_left='20%',)) #调整位置，将店名都显示出来    )       return griddef get_page():    grid1 = get_grid_1()    grid2 = get_grid_2()        page = (        Page()        .add(grid1)        .add(grid2)    )    return pagewith open("my_first_pycharts.html", "r+", encoding='utf-8') as html:    page = get_page()    page.render('my_first_pycharts.html')        html_bf = BeautifulSoup(html, 'lxml')    divs = html_bf.select('.chart-container')    divs[0]['style'] = "width:750px;height:400px;top:120px;left:550px;border-style:solid;border-color:#444444;border-width:0px;"    divs[1]['style'] = "width:550px;height:400px;top:120px;left:30px;border-style:solid;border-color:#444444;border-width:0px;"                body = html_bf.find("body")    body["style"] = "background-color:#07645D;" #设置网页背景颜色    div_title="

\n 2020年销售数据分析 " #修改页面背景色、追加标题 body.insert(0,BeautifulSoup(div_title,"lxml").div) html_new = str(html_bf) html.seek(0, 0) html.truncate() html.write(html_new) html.close()

有问题欢迎联系我vx：HCP19970120

上篇文章《基于Pyecharts可视化大屏案例一(1)》已经为大家详细展示了大屏中间第一张图形的制作过程以及可视化大屏的布局，我们先来回顾下完整的精美大屏：请看下本文在上文基础上制作左上图形的最终效果：视频显示：接下来，请开始你的表演......1. 加载一箩筐的库from pyecharts.charts import ...