精华内容
下载资源
问答
  • 上篇文章《基于Pyecharts可视化大屏案例一(1)》已经为大家详细展示了大屏中间第一张图形的制作过程以及可视化大屏的布局,我们先来回顾下完整的精美大屏:请看下本文在上文基础上制作左上图形的最终效果:视频显示:...

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

    41774d9ee66d435a456cc5edce4a7f20.png

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

    34e54a5e4f9530147a9d0c5a0eb39b5b.png

            视频显示:

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

    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')

    72c65bad42e083971d1790fb9d1df848.png

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

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

    464f736749edc3295c6b64d2a8657e96.png

    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')

    4a280f8b37dc88305ecc75295fcecd39.png

    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')

    da49c80df3eafc61120df4f7b025bb6f.png

    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')

    5d12a93c0205ab834a4a713400a73b6f.png

    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')

    94a3051e5bd18e8f1a9ad8b5e69d4066.png

    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')

    6758a747d83218e969f6579f0e2761a7.png

    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;position:absolute;top:120px;left:550px;border-style:solid;border-color:#444444;border-width:0px;"    divs[1]['style'] = "width:550px;height:400px;position:absolute;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="
    \n2020年销售数据分析
    " #修改页面背景色、追加标题 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()

    225b1e8aedfc55f2d53648f1d893beb0.png

    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;position:absolute;top:120px;left:550px;border-style:solid;border-color:#444444;border-width:0px;"    divs[1]['style'] = "width:550px;height:400px;position:absolute;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="
    \n2020年销售数据分析
    " #修改页面背景色、追加标题 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()

    81dbe929a1ffb533defd3217ea7f756d.png

    有问题欢迎联系我vx:HCP19970120

    展开全文
  • 前 言 Pyecharts是一个用于生成Echarts图表的类库,可以通过python import方法加载使用,没有安装的需要pip install pyecharts安装一下;Pyecharts的图表非常精美,功能较为强大,且对于有一定python基础来说很容易...

    前  言

          Pyecharts是一个用于生成Echarts图表的类库,可以通过python import方法加载使用,没有安装的需要pip install pyecharts安装一下;Pyecharts的图表非常精美,功能较为强大,且对于有一定python基础来说很容易上手.

    目  录

    第一部分:效果图展示

            1.1 最终效果图展示

            1.2 本文效果图展示

    第二部分:绘制精美图形

    实  操

    第一部分:效果图展示

            1.1 最终效果图展示

            本案例是基于pyecharts制作了一块常见的销售数据分析可视化大屏,大致的效果图如下(因数据来源的问题,最终效果会有一丝偏差,但是基本不影响):

    e6d9c65c764aa9d2944ffbb762d8bbb2.png

            1.2 本文效果图展示

            由于图形有六个,故分成六篇文章来呈现。本文是第一篇,描绘的是中间第一张图表,最后的静态效果如下:

    6f88bc17025b5e27d479ff42fc9b55bf.png

            动态渲染效果也非常不错:

    第二部分:绘图

            接下来,开始我们的表演......

    2.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.2 生成本文所需要的随机数据,都是list形式

    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位小数点

    2.3 不加任何参数绘制柱形图

            因为销售额与订单量数值有差别,且共用一个y轴,所以会绘制的柱子高度相差较大。

    bar = (    Bar()    .add_xaxis(year)     .add_yaxis('销售额',random_data_1)     .add_yaxis('订单量',random_data_2)).render('my_first_pycharts.html')

    3030b3b320f72aa31758addedf7f6354.png

    2.4 将坐标轴右移,并设置Y轴刻度范围,此处是在全局变量下设置。

    bar = (    Bar()    .add_xaxis(year)    .add_yaxis('销售额',random_data_1)    .add_yaxis('订单量',random_data_2)    .set_global_opts(        yaxis_opts=opts.AxisOpts(            position="right", #设置坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 13000, #设置y刻度的最小值        )    )).render('my_first_pycharts.html')

    acc092cbd8cd5c6f0ace67de3cb0adaf.png

    2.5 添加一个描绘订单量的坐标轴

            为了解决销售额与订单量共用一个坐标轴的问题,本文利用yaxis_index将其与销售额坐标轴分开来,再利用offset设置Y 轴相对于默认位置的偏移(一般在多Y轴上使用),并设置在右侧、刻度范围(注意代码添加的位置)

    bar = (    Bar()    .add_xaxis(year)    .add_yaxis('销售额',random_data_1,yaxis_index=0,)    .add_yaxis('订单量',random_data_2,yaxis_index=1,)    .extend_axis(              #添加一个描绘订单量的坐标轴        yaxis=opts.AxisOpts(            position = 'right', #设置坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 1300, #设置y刻度的最小值            offset = 60, #设置Y轴偏移        )    )    .set_global_opts(        yaxis_opts=opts.AxisOpts(            position="right", #设置描绘销售额的坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 13000, #设置y刻度的最小值        )    )).render('my_first_pycharts.html')

    4650927d196508f3d1db19e3cd0723b3.png

    2.6 引入描绘增长率的坐标轴,并设置在左侧、刻度范围

    bar = (    Bar()    .add_xaxis(year)    .add_yaxis('销售额',random_data_1,yaxis_index=0,)    .add_yaxis('订单量',random_data_2,yaxis_index=1,)    .extend_axis(              #添加一个描绘订单量的坐标轴        yaxis=opts.AxisOpts(            position = 'right', #设置坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 1300, #设置y刻度的最小值            offset = 60, #设置Y轴偏移        )    )     .extend_axis(               #添加一个描绘增长率的坐标轴        yaxis=opts.AxisOpts(            position="left",   #设置坐标轴在画布左侧            min_ = -5, #设置y刻度的最小值            max_ = 5 #设置y刻度的最大值        )    )    .set_global_opts(        yaxis_opts=opts.AxisOpts(            position="right", #设置描绘销售额的坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 13000, #设置y刻度的最小值        )    )).render('my_first_pycharts.html')

    1edf5c7be7af405e09d85592cc807cb4.png

    2.7 绘制折线图,并利用overlap将线图与柱图拼接起来,以及调整y轴线距离画布边的距离,要不然y轴线显示不全。(注意线图的yaxis_index=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(            position = 'right', #设置坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 1300, #设置y刻度的最小值            offset = 60, #设置Y轴偏移        )    )    .extend_axis(               #添加一个描绘增长率的坐标轴        yaxis=opts.AxisOpts(            position="left",   #设置坐标轴在画布左侧            min_ = -5, #设置y刻度的最小值            max_ = 5,#设置y刻度的最大值        )    )    .set_global_opts(        yaxis_opts=opts.AxisOpts(            position="right", #设置描绘销售额的坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 13000, #设置y刻度的最小值        )    ))#线图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,)    .add_yaxis('订增长率',r2,yaxis_index=2,))# 合并两个图overlap_ = bar.overlap(line)grid = (    Grid()    .add(overlap_,          opts.GridOpts(             pos_left="5%", #调整左边轴线与画布的距离             pos_right="13%" #调整右边边轴线与画布的距离         ),          is_control_axis_index=True,    )).render('my_first_pycharts.html')

    bfd0d99def53fd7547d7724bfd30b336.png

    2.8 利用legend_opts=opts.LegendOpts()将标签设置在画布左侧居中,并纵向排列,这里需要调整左Y轴与画布边上的距离

    # 柱图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(            position = 'right', #设置坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 1300, #设置y刻度的最小值            offset = 60, #设置Y轴偏移        )    )    .extend_axis(               #添加一个描绘增长率的坐标轴        yaxis=opts.AxisOpts(            position="left",   #设置坐标轴在画布左侧            min_ = -5, #设置y刻度的最小值            max_ = 5,#设置y刻度的最大值        )    )    .set_global_opts(        yaxis_opts=opts.AxisOpts(            position="right", #设置描绘销售额的坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 13000, #设置y刻度的最小值        ),        legend_opts=opts.LegendOpts( #将标签设置在左边居中,并纵向排列            is_show=True,             pos_left="left",             orient="vertical",            pos_top = 'center',            textstyle_opts = opts.TextStyleOpts(                                      font_size = 10,  # 标签字体大小                                             )        ),    ))#线图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,)    .add_yaxis('订增长率',r2,yaxis_index=2,))# 合并两个图overlap_ = bar.overlap(line)grid = (    Grid()    .add(overlap_,          opts.GridOpts(             pos_left="10%", #调整左边轴线与画布的距离             pos_right="13%" #调整右边边轴线与画布的距离         ),          is_control_axis_index=True,    )).render('my_first_pycharts.html')

    3b3d78992dfeae8a7f8d3993ca5ba54d.png

    2.9 利用初始化配置项init_opts=opts.InitOpts()设置主题背景(以DARK为例)以及画布的宽、高。官方主题背景参考:https://pyecharts.org/#/zh-cn/themes上面的定制主题。

    # 柱图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(            position = 'right', #设置坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 1300, #设置y刻度的最小值            offset = 60, #设置Y轴偏移        )    )    .extend_axis(               #添加一个描绘增长率的坐标轴        yaxis=opts.AxisOpts(            position="left",   #设置坐标轴在画布左侧            min_ = -5, #设置y刻度的最小值            max_ = 5,#设置y刻度的最大值        )    )    .set_global_opts(        yaxis_opts=opts.AxisOpts(            position="right", #设置描绘销售额的坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 13000, #设置y刻度的最小值        ),        legend_opts=opts.LegendOpts( #将标签设置在左边居中,并纵向排列            is_show=True,             pos_left="left",             orient="vertical",            pos_top = 'center',            textstyle_opts = opts.TextStyleOpts(                                      font_size = 10,  # 标签字体大小                                             )        ),    ))#线图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,)    .add_yaxis('订增长率',r2,yaxis_index=2,))# 合并两个图overlap_ = bar.overlap(line)grid = (    Grid(        init_opts=opts.InitOpts(            width = '1500px', # 设置画布宽            height = '800px', #设置画布高    #             bg_color = '#004B66', # 背景颜色设置            theme =  ThemeType.DARK #设置主题        )    )    .add(overlap_,          opts.GridOpts(             pos_left="10%", #调整左边轴线与画布的距离             pos_right="13%" #调整右边边轴线与画布的距离         ),          is_control_axis_index=True,    )).render('my_first_pycharts.html')

    0e66ef8a3c1c2e1acc69a05b180273c5.png

    2.10 设置主标题和三条y轴的标题、颜色、字体大小等,以及两条折线的颜色

    # 柱图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")            ),            name_textstyle_opts = opts.TextStyleOpts(                #文字颜色                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")            ),            name_textstyle_opts = opts.TextStyleOpts(                #文字颜色                color='#CCCC00',             ),        )    )    .set_global_opts(        yaxis_opts=opts.AxisOpts(            name = '销售额\n(万元)',            position="right", #设置描绘销售额的坐标轴在画布右侧            min_ = 0, #设置y刻度的最小值            max_ = 13000, #设置y刻度的最小值            axisline_opts=opts.AxisLineOpts(                linestyle_opts=opts.LineStyleOpts(color="#EEAEEE")            ),            name_textstyle_opts = opts.TextStyleOpts(                #文字颜色                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,  # 标签字体大小                                             )        ),    ))#线图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.DARK #设置主题        )    )    .add(overlap_,          opts.GridOpts(             pos_left="10%", #调整左边轴线与画布的距离             pos_right="13%" #调整右边边轴线与画布的距离         ),          is_control_axis_index=True,    )).render('my_first_pycharts.html')

    27e6e8593aec5788d52b8fc638896841.png

    2.11 设置提示框、拖拉框(这个功能非常优秀!)

            如果x轴数据量太多怎么办?比如本文的x轴是代表年份,从2004-2020共17年,图形柱子太多,显得不够美观,这时候拖拉框功能就派上用场拉。提示框的功能是,当你鼠标停留在图形上时,会提示对应的数据出来,详情请继续往下浏览。

    # 柱图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.DARK #设置主题        )    )    .add(overlap_,          opts.GridOpts(             pos_left="10%", #调整左边轴线与画布的距离             pos_right="13%" #调整右边边轴线与画布的距离         ),          is_control_axis_index=True,    )).render('my_first_pycharts.html')

    906211d539ff2a063a7f5263a89855bd.png

    2.12 画入大屏

            由于本人没有接触过前端知识,下面这些代码都是从网上找的,直接复制粘贴来用,只需要修改网页背景、标题和图形的位置以及标题文字的大小、颜色即可。

    with open("my_first_pycharts.html", "r+", encoding='utf-8') as html:    html_bf = BeautifulSoup(html, 'lxml')    divs = html_bf.select('.chart-container')    divs[0]['style'] = "width:750px;height:400px;position:absolute;top:120px;left:550px;border-style:solid;border-color:#444444;border-width:0px;"    body = html_bf.find("body")    body["style"] = "background-color:#07645D;" #设置网页背景颜色    div_title="
    \n2020年销售数据分析
    " #修改页面背景色、追加标题 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()

    e67a6e40976f4218be022810e4f2b421.png

    2.13 最后,将背景DARK改为WONDERLAND,就得到最终的效果图:

    20ae326531de45ab26010b14e664f0de.png

    有问题欢迎联系我vx:HCP19970120

    展开全文
  • 进行数据可视化pyecharts,matplotlib……) 我们进入该网址使用快捷键F12浏览源代码 经过漫长的寻找我们找到了所需要的数据: 经过整理,我们发现它的数据是这样的: [{{“provinceName”:“黑龙江省”,...
  • pyecharts 大屏可视化学习

    千次阅读 2021-03-27 15:45:37
    @pyecharts 大屏可视化学习,记录,总结 先看看效果 图表代码都是官网直接复制的,主要是为了学习方法,学习到底如何大屏布局。 参考学习 1.https://blog.csdn.net/bo_gu/article/details/104990907 2....

    @pyecharts 大屏可视化学习,记录,总结
    先看看效果
    在这里插入图片描述
    图表代码都是官网直接复制的,主要是为了学习方法,学习到底如何大屏布局。

    参考学习

    1.https://blog.csdn.net/bo_gu/article/details/104990907
    2.https://blog.csdn.net/bo_gu/article/details/104990907
    3.https://blog.csdn.net/qq_43613793/article/details/104268536

    三个网站学习

    以上3篇博客分别使用了三种方法进行大屏可视化的布局,都写得挺详细。

    第一个和第二个都使用的是chart_config.json进行布局,只不过,第一个在初始化图表的时候指定了chart_id,而第二个没有指定所以是随机生成的。

    第三个使用的是直接修改html(一开始挺抵触,就像0基础)。

    因为知识不够广的缘故,才看第一篇的时候没太明白chart_config.json是个什么。因此看第二篇博客的时间长一些。

    第二篇博客在初始化page时使用

    page = Page(layout=Page.DraggablePageLayout)
    

    这样在生成网页时,有如下图左上角标识-------Save Config
    图标也是一个挨着一个的排排队,并且可以直接拖动,进行布局。
    在这里插入图片描述
    当布局好了之后,点击在这里插入图片描述
    就会自动生成并下载chart_config.json文件
    接着再执行

    page.save_resize_html("test.html",
                           cfg_file="chart_config .json",
                           dest="my_test.html")
    
    

    不过一定要记得将上一步的page.render("test.html")注释掉。
    学习的时候使用是用Pycharm编写的,就给忘记了
    啊啊啊,我的心
    在这里插入图片描述

    这个看起来是挺不错,直接拖动就能布局,似乎不太了解html也能上手!!!
    在这里插入图片描述

    不过不过,万事万物总有缺点。

    我添加的图表顺序如下

    page.add(draw_bar("北向资金.csv"),#26
             draw_pe(df_pe), #pe 27
             draw_map(df_map),#28
             draw_pie(df_bar),#行业流入饼图 29
             draw_line(df_line),#MACD和均线 30
             )
    
    

    当生成html文件时,自然也会按着这个顺序添加
    所以所以
    当拖动图片的时候,有两个缺点

    缺点一:
    图1总是在图2下面,有时候因为图的类型这些就不是很美观,当然不排除,你就是按着图片的大小依次排版,不需要叠加情况。如下图所示:
    在这里插入图片描述
    所以建议是,当page.add()添加图片时,适当考虑一下添加图表的顺序。

    缺点二:
    假设我的图2已经放在应该放的位置,如下图所示:
    在这里插入图片描述
    当我要改变图1大小时,便会有如下情况
    在这里插入图片描述
    我的图2跟着往上跑了

    所以排版时,要按着图片顺序进行排版。
    我当时总共有六个图表,也不算是很多,就按着心情进行排版,可真的是一言难尽。

    接着我便结合着第一个网址和第二个网址,先进行排版,再保存下来的
    chart_config .json修改id 接着使用第一博客的办法,
    稍微好了一点,至少不会出现忘记注释就都没了的情况。

    还是比较推荐第三个博客的方法,直接修改html
    这个时候layout=Page.DraggablePageLayout就需要去掉了,直接使用page = Page()
    不然不使用page.save_resize_html()好像那个图片的虚线就会一直在着。

    或许,有的同学会说,没接触html,完全看不懂,怎么办呢,
    别担心,使用此方法不需要完全懂html
    根据上面的经验我们只需要知道2点
    其一,如下我们需要一一对应。
    在这里插入图片描述

    其二,left,指的是图片左边到左边的距离,top,指的是图片头到最上边的距离。

    有了这两点,我们现在开始来布局,假设我们有6个图表,一个标题,首先想想该怎么放

    我是这样放的,
    想好布局比较容易知道图表占多少(把这个图长和宽都看作1,便是百分比了)。大概布局弄好后,就算有不满意的地方,也仅仅只是微调,不是那么大费周章。
    在这里插入图片描述
    接上代码

    首先,图表部分

    from pyecharts import options as opts
    from pyecharts.charts import Bar,Boxplot,Gauge,Map,Pie,HeatMap,Page
    from pyecharts.faker import Faker
    import random
    
    def bar(): #柱状图
        c = (
            Bar()
                .add_xaxis(Faker.choose())
                .add_yaxis("商家A", Faker.values(), stack="stack1")
                .add_yaxis("商家B", Faker.values(), stack="stack1")
                .set_series_opts(label_opts=opts.LabelOpts(is_show=False))
                .set_global_opts(title_opts=opts.TitleOpts(title="Bar"))
                #.render("bar_stack0.html")
        )
        return c
    def box():#箱状图
        v1 = [
            [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980],
            [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790],
        ]
        v2 = [
            [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920],
            [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870],
        ]
        c = Boxplot()
        c.add_xaxis(["expr1", "expr2"])
        c.add_yaxis("A", c.prepare_data(v1))
        c.add_yaxis("B", c.prepare_data(v2))
        c.set_global_opts(title_opts=opts.TitleOpts(title="BoxPlot-基本示例"))
        #c.render("boxplot_base.html")
        return c
    
    def gau():#仪表图
        c = (
            Gauge(init_opts=opts.InitOpts(width="1600px", height="800px"))
                .add(series_name="业务指标", data_pair=[["完成率", 55.5]])
                .set_global_opts(
                legend_opts=opts.LegendOpts(is_show=False),
                tooltip_opts=opts.TooltipOpts(is_show=True, formatter="{a} <br/>{b} : {c}%"),
            )
                #.render("gauge.html")
        )
        return c
    
    def maps():#地图
        c = (
            Map()
                .add("商家A", [list(z) for z in zip(Faker.provinces, Faker.values())], "china")
                .set_global_opts(title_opts=opts.TitleOpts(title="Map-基本示例"))
                #.render("map_base.html")
        )
        return c
    
    def pie():#饼图
        c = (
            Pie()
                .add("", [list(z) for z in zip(Faker.choose(), Faker.values())])
                .set_colors(["blue", "green", "yellow", "red", "pink", "orange", "purple"])
                .set_global_opts(title_opts=opts.TitleOpts(title=""))
                .set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {c}"))
                #.render("pie_set_color.html")
        )
        return c
    
    def heat():#热力图
        value = [[i, j, random.randint(0, 50)] for i in range(24) for j in range(7)]
        c = (
            HeatMap()
                .add_xaxis(Faker.clock)
                .add_yaxis("series0", Faker.week, value)
                .set_global_opts(
                title_opts=opts.TitleOpts(title="HeatMap-基本示例"),
                visualmap_opts=opts.VisualMapOpts(),
            )
                #.render("heatmap_base.html")
        )
        return c
    
    def tab1(name,color): #作为标题吧
        c = (Pie().
            set_global_opts(
            title_opts=opts.TitleOpts(title=name,pos_left='center',pos_top='center',
                                    title_textstyle_opts=opts.TextStyleOpts(color=color,font_size=35))))
        return c
    
    page = Page()
    page.add(tab1("pyecharts可视化大屏","#FF00FF"),
             gau(),
             heat(),
             maps(),
             bar(),
             box(),
             pie())
    page.render("mytest.html")
    

    效果如下(后面还有几个图,太长了,就大概这样)
    在这里插入图片描述
    重点部分

    from bs4 import BeautifulSoup
    with open("mytest.html", "r+", encoding='utf-8') as html:
        html_bf = BeautifulSoup(html, 'lxml')
        divs = html_bf.select('.chart-container')
        divs[0]["style"] = "width:40%;height:10%;position:absolute;top:0;left:30%;"
        divs[1]["style"] = "width:40%;height:40%;position:absolute;top:10%;left:30%;"
        divs[2]["style"] = "width:40%;height:50%;position:absolute;top:50%;left:30%;"
        divs[3]["style"] = "width:30%;height:50%;position:absolute;top:0;left:0;"
        divs[4][ "style"] = "width:30%;height:50%;position:absolute;top:50%;left:0;"
        divs[5]["style"] = "width:30%;height:50%;position:absolute;top:0;left:70%;"
        divs[6]['style'] = "width:30%;height:50%;position:absolute;top:50%;left:70%;"
        body = html_bf.find("body")
        body["style"] = "background-color:#FFFFFF;"  # 背景颜色
        html_new = str(html_bf)
        html.seek(0, 0)
        html.truncate()
        html.write(html_new)
        html.close()
    
    

    来解析一句

     divs[0]["style"] = "width:40%;height:10%;position:absolute;top:0;left:30%;"
    

    这一句变对应我们的标题,top,和left在上面已经解释过,
    那也就是还有width,height,图表宽高
    以及position,位置。

    到此结束在这里插入图片描述

    展开全文
  • 今天主要详细讲一下Pyecharts制作可视化大屏。 注意,本文由于篇幅问题不会放置全部代码,会在提供文末全部代码的下载。 ECharts是由百度开源的基于JS的商业级数据图表库,有很多现成的图表类型和实例,而...

    经常有小伙伴问,如何制作数据可视化大屏?

    今天主要详细讲一下Pyecharts制作可视化大屏。

    图片

    注意,本文由于篇幅问题不会放置全部代码,会在提供文末全部代码的下载。 

    图片

    ECharts是由百度开源的基于JS的商业级数据图表库,有很多现成的图表类型和实例,而Pyecharts则是为了方便我们使用Python实现ECharts的绘图。使用Pyecharts制作可视化大屏,可以分为两步:

    1、使用分别Pyecharts分别制作各类图形;

    2、使用Pyecharts中的组合图表功能,将所有图片拼接在一张html文件中进行展示。

    小五认为影响大屏美观最重要的两个因素就是:配色布局!在本文中,会特意强调这两点。

    Pyecharts可视化

    本文缩减了图表,只选用2020东京奥运会各国金牌分布图、2020东京奥运会奖牌榜详情、2020东京奥运会中国各项目获奖详情。

    这类图表都很简单,参照官方文档直接复制示例就可以学习。图表配色都使用的Pyecharts默认颜色,大家实际使用时尽量形成自己的风格。

    Map世界地图

    Pyecharts绘制世界地图时,名称必须是英文。所以我们在前文中引入了国家名称中英文对照表,左连接形成了df4

    图片

    单独提取英文名称和奖牌总数两列数据,用来可视化。

    data_list=[[i,j] for i,j in zip(df4['英文名称'],df4['奖牌总数'])]
    data_list[:5]
    

    图片

    数据准备好了,开始利用pyecharts绘制世界地图。

    from pyecharts import options as opts
    from pyecharts.charts import Map
    
    c = (
        Map()
        .add("", data_list, "world",
              is_map_symbol_show=False,
        )
        .set_series_opts(label_opts=opts.LabelOpts(is_show=False))
        .set_global_opts(
            title_opts=opts.TitleOpts(title="2020东京奥运会各国金牌分布图"),
            visualmap_opts=opts.VisualMapOpts(max_=100)
        )
    )
    
    c.render_notebook()
    

    非常简单

    图片

    同理,依次绘制其他两类图形。

    柱状图、饼图

    柱状图(Bar)

    from pyecharts import options as opts
    from pyecharts.charts import Bar
    
    c = (
        Bar()
        .add_xaxis(df4['名称'].head(25).tolist())
        .add_yaxis("金牌", df4['金牌'].head(25).tolist(), stack="stack1")
        .add_yaxis("银牌", df4['银牌'].head(25).tolist(), stack="stack1")
        .add_yaxis("铜牌", df4['铜牌'].head(25).tolist(), stack="stack1")
        .set_series_opts(label_opts=opts.LabelOpts(is_show=True, position="inside", font_size=12, color='#FFFFFF'))
        .set_global_opts(title_opts=opts.TitleOpts(title="2020东京奥运会奖牌榜详情"),
                         xaxis_opts=opts.AxisOpts(type_='category',
                                                  axislabel_opts=opts.LabelOpts(
                                                      rotate=45),
                                                  )))
    c.render_notebook()
    

    图片

    饼图(Pie)

    from pyecharts import options as opts
    from pyecharts.charts import Pie
    
    c = (
        Pie()
        .add("", [['跳水', 12], ['射击', 11], ['举重', 8], ['竞技体操', 8], ['乒乓球', 7], ['游泳', 6], ['羽毛球', 6], ['田径', 5], ['静水皮划艇', 3], ['蹦床体操', 3], ['自由式摔跤', 3], ['赛艇', 3], ['空手道', 2], ['拳击', 2], ['帆船', 2], ['花样游泳', 2], ['跆拳道', 1], ['场地自行车赛', 1], ['古典式摔跤', 1], ['击剑', 1], ['三人篮球', 1]],
             center=["50%", "60%"],)
        .set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {c}"))
    )
    c.render_notebook()
    

    图片

    这样需要用到的三张图表就绘制好了。

    Pyecharts组合图表

    Pyecharts进行可视化大屏第二步就是组合图表,大致可分为四类:

    • Grid:并行多图

    • Page:顺序多图

    • Tab:选项卡多图

    • Timeline:时间线轮播多图

    官方文档:https://pyecharts.org/#/zh-cn/composite_charts

    这里用Page(顺序多图)居多,在组合图表之前,还要先把前面的图表绘制代码改为函数。

    def map_world() -> Map:
        c = (
            Map(init_opts=opts.InitOpts(chart_id=2, bg_color='#ADD8E6'))
            .add("", data_list, "world",
                 is_map_symbol_show=False,
                 )
            .set_series_opts(label_opts=opts.LabelOpts(is_show=False))
            .set_global_opts(
                title_opts=opts.TitleOpts(title="2020东京奥运会各国金牌分布图"),
                visualmap_opts=opts.VisualMapOpts(max_=100)
            )
        )
        return c
    

    顺便还在其中增加了背景颜色bg_color、图表IDchart_id,后者用于多图表时定位区分。背景颜色的话,我选择了淡蓝色#ADD8E6。后续图片的布局是根据图表ID的对应关系进行布局,所以每张图都要分别设置其id。

    图片

    接着使用page = Page(layout= Page.DraggablePageLayout)模式对图片进行展示,这一步是为了调整布局。

    page = Page(layout=Page.DraggablePageLayout, page_title="2020东京奥运会奖牌榜")
    
    # 在页面中添加图表
    page.add(
        title(),
        map_world(),
        bar_medals(),
        pie_china(),)
    
    page.render('test.html')
    

    调用绘制函数后生成一个 test.html 文件。

    打开后可以其中的图片进行拖拽,来实现自定义布局。

    图片

    对图片布局完毕后,要记得点击左上角“save config”对布局文件进行保存。

    点击后,本地会生成一个chart_config.json的文件,这其中包含了每个图表ID对应的布局位置。

    图片

    最后,调用保存好的布局文件,重新生成html。

    运行下面这行代码。

    page.save_resize_html('test.html', cfg_file='chart_config.json', dest='奥运.html')
    

    其中test.html 为生成的所有图表的文件、chart_config.json 为下载的布局文件、奥运.html 为布局好的的仪表盘文件、打开仪表奥运.html:

    图片

    这样就实现了一次数据可视化——大屏展示。

    但还有还有很多不足之处,比如若图表配色没有特殊去做调整。

    整张大屏只是一个静态的展示,而非具有商业场景的数据仪表盘。

    图片

    真正的数据大屏往往更喜欢用BI软件生成,能够实现图、表、切片器之间交叉筛选,希望以后有机会能用Python使用制作出来。

    代码下载

    最后:

    如果你也想自学Python,可以关注我。我会把踩过的坑分享给你,让你不要踩坑,提高学习速度,还整理出了一套系统的学习资料,有需要的朋友欢迎【私信】~这套资料涵盖了诸多学习内容:开发工具,基础视频教程,实战资料,电子书籍,100道练习题等。相信可以帮助大家在最短的时间内,能达到事半功倍效果,用来复习也是非常不错的。

    如果你对python感兴趣,但是不知道该怎么学,没有人和你一起学,欢迎加入我们的python学习交流群https://jq.qq.com/?_wv=1027&k=fQzIoInPhttps://jq.qq.com/?_wv=1027&k=fQzIoInP群里还会不定期免费分享学习源码及资料。

    最后,希望这篇文章对你有帮助,也希望能帮到大家,因为你我都是热爱python的编程语言爱好者。

    展开全文
  • 就在上一篇的文章当中干货分享 | 用Pyecharts绘制20钟不同风格的炫酷交互式图表,建议收藏有粉丝提到说是不是可以写一篇用Pyecharts模块做可视化大屏的相关教程,小编立马就答应...
  • 文章目录Pyecharts可视化Map世界地图柱状图、饼图Pyecharts组合图表 ECharts是由百度开源的基于JS的商业级数据图表库,有很多现成的图表类型和实例,而Pyecharts则是为了方便我们使用Python实现ECharts的绘图。使用...
  • 实验目的: 实现 统计2006-2011的数据综合统计情况,进行数据可视化 gitee地址:https://gitee.com/dgwcode/an_example_of_py_learning/tree/master/MovieViwer 1.数据例子: Film ,Major Studio,Budget 300,Warner ...
  • 基于pyecharts可视化项目同学们,请利用提供的数据在中国地图上展示每个省的高考人数或大学数量!完成后将整个项目(rar或zip格式)提交
  • 前段时间,给大家分享过20 个炫酷的数据可视化大屏,源代码都是基于 echarts 的,于是我产生了用 Python 来实现数据可视化大屏的想法。参考上面这个模板,我计划用 pyech...
  • 前两篇Pyecharts的文章来帮我们简单的梳理了一下可以用Pyecharts来绘制哪些图表之后,本篇文章我们用pyecharts里面的一些组件,将绘制的图表都组合起来首先Grid组件首先...
  • 前两篇Pyecharts的文章来帮我们简单的梳理了一下可以用Pyecharts来绘制哪些图表之后,本篇文章我们用pyecharts里面的一些组件,将绘制的图表都组合起来首先Grid组件首先...
  • 作者 | 俊欣来源 | 关于数据分析与可视化前两篇Pyecharts的文章来帮我们简单的梳理了一下可以用Pyecharts来绘制哪些图表之后,本篇文章我们用pyecharts里面的一些组件...
  • 随着信息化技术在政府、企业管理上应用的进一步发展,大数据技术兴起,数据可视化大屏随之进进入大众视线。下面是用python+django+pyecharts实现大屏的演示。 1,view.py def pie(request): # r = redis.StrictRedis...
  • 基于python语言的大数据安全套分析,使用爬虫+jieba分词+pyecharts可视化大屏
  • 奥运会刚刚过去,你是否已经看过2020东京奥运会呢?本文将手把手带你爬取奥运会相关信息,并利用可视化大屏为你展示奥运详情。让一个没关注过奥运会的朋友,也能够秒懂奥运会。
  • python数据可视化:基于pyecharts的BI数据大屏

    万次阅读 多人点赞 2019-02-11 09:03:00
    作为公司负责搜索和推荐的部门,很多业务数据都需要进行可视化展示:一方面是方便团队成员进行监控和分析,另一方面也是为了和业务部门共享分析成果,让数据产生更多的价值。虽然公司已经准备部署Tableau,但我们...
  • pyecharts实现新冠肺炎疫情可视化BI数据大屏

    万次阅读 多人点赞 2020-02-11 22:19:31
    Echarts 是百度开源的一个数据可视化 JS 库,主要用于数据可视化pyecharts 是一个用于生成 Echarts 图表的类库。实际上就是 Echarts 与 Python 的对接。 详情请看官方文档:https://pyecharts.org/#/zh-cn/intro ...
  • pyecharts库说明 1.cmd命令行用pip指令安装Pyecharts:Win+R→cmd→ pip install pyecharts 2.安装地图 pip install echarts-countries-pypkg pip install echarts-china-provinces-pypkg pip install echarts-...
  • pyecharts做图表大屏展示

    千次阅读 2020-06-04 17:20:52
    先把你自己画的所有图片添到里page() ,Page记得要导入一下和Bar,Pie那些pyecharts.charts类里。(画图的代码就省略了太多了,我这里就是举个例子)。把我add的这些图换成你自己。 page = (Page().add(pie1).add(pie2)...
  • pyecharts制作可视化大屏后,可以使用bs4库对可视化大屏进行背景色等参数进行修改 from bs4 import BeautifulSoup import os with open(os.path.join(os.path.abspath("."), "new_page_demo.html"), 'r+', ...
  • 本文灵感来源:https://blog.csdn.net/qq_43613793/article/details/104268536 感谢博主提供学习文章!
  • 就在上一篇的文章当中干货分享 | 用Pyecharts绘制20钟不同风格的炫酷交互式图表,建议收藏有粉丝提到说是不是可以写一篇用Pyecharts模块做可视化大屏的相关教程,小编立马就答应...
  • 前几天写过一篇pyecharts实现新冠肺炎疫情可视化BI数据大屏,几天没看,今天又看了看,发现不能用了,因为TX页面改了,添加删除了一些东西(比如把确诊分为现存和累计等…),所以我就又改了改,把新增的那些数据补了...
  • 基于Django结合Pyecharts实现数据可视化

    千次阅读 多人点赞 2020-05-23 23:33:02
    我们都知道python上的一款可视化工具matplotlib,当然百度开源的一个可视化JS工具-Echarts也非常好用,可视化类型非常多,但是得通过导入js库在Java Web项目上运行,平时用Python比较多,于是就在想有没有Python与...
  • #index.html商品与销量数据可视化// Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径require.config({paths: {echarts: './static',}});// Step:4 动态加载echarts然后在回调...
  • 1 创建django项目 :Visualization and APP :Demo >> django-admin startproject Visualization  >> python manage.py startapp Demo ...转载于:https://www.cnblogs.com/nuister/p/pyecharts.html
  • 一:数据准备阶段 此次数据所有来源均从这两个地方得到 ...5.pyecahrts 主要功能:数据可视化制作地图等 版本1.7.0 环境 python3.7 浏览器:Chrome浏览器 三:具体功能实现 1.数据获取 def get_data(self):

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 502
精华内容 200
关键字:

pyecharts可视化大屏