Pyecharts中的Grid，Page, Tiemline，外加overleap详解

一、概况

# 工具方法模块的引入方式：

from pyechats.echats import Grid, Page, Timeline

Grid 类：并行显示多张图

Page 类：同一网页按顺序展示多图

其中page帮助我们将多个模块垂直组合到一个页面中，grid帮助我们将多个单元素（图、表、overlap、图片）水平或垂直并列布局。

Timeline 类：提供时间线轮播多张图

注意：

overlap 方法：结合不同类型图表叠加画在同张图上，图表混合使用

在以前的pyecharts版本中，overleap是一个类，但是现在修改成一个方法了，使用之前不用提前使用import 进行导入了。直接使用就可以：

bar1 = Bar( )

bar1.add_xaxis(x1_data)

bar1.add_yaxis(y1_data)

line1 = Line( )

line1.add_xaxis(x2_data)

line1.add_yaxis(y2_data)

# overleap使用方式

bar1.overleap(line1)

二、类：Grid，Page, Tiemline，方法：overleap介绍

2.1 Grid 类

from pyechats.echats import Grid

grid = Grid()

用户可以自定义结合 Line/Bar/Kline/Scatter/EffectScatter/Pie/HeatMap/Boxplot 图表，将不同类型图表画在多张图上。第一个图需为 有 x/y 轴的图，即不能为 Pie，其他位置顺序任意（就是说如果有一张bar图和一张pie图，在使用gird.add()的时候，需要首先gird.add(bar)，然后gird.add(pie)）。

grid1_1 = Grid(init_opts=opts.InitOpts(theme=ThemeType.ROMA, width='1600px'))
'''
首先声明时，推荐一定要把width height定下来，
如果你单纯就想将两张图水平/垂直布局，
那你大可指定一个参数即可，另一个就是图形自己的高或宽了；
如果你是要四张图田字堆一起，宽高就都要事先定好，grid可不会给你自适应。
至于那个theme，是pyecharts自带的几种主题风格，感兴趣请看文档或相关文章。
'''

注：

pyecharts grid并行显示多张图，如果多个图同时画，就只显示空白，但在单张图时能分别正常显示，那么看一下在

grid.add( grid_index='')中，需要注销 grid_index=''这一行代码就ok了。
问题，单张图时能分别正常显示，多个图同时画，就只显示空白

案例：

from pyecharts.charts import Bar, Pie, Line, Grid, Page
from pyecharts import options as opts

for c in list(set(df_decor['city'])):
    df_c1 = df_decor[df_decor['city']==c]
    bar = Bar(init_opts=opts.InitOpts(width='1000px',height='600px'))
    
    bar.add_xaxis(set(df_c1['decoration_status'].tolist()))
    bar.add_yaxis('装修情况',df_c1['装修情况'].tolist())
    bar.set_global_opts(
                        title_opts=opts.TitleOpts(title='{}_已成交房子装修情况和户型TOP10分布'.format(c)),
                        legend_opts=opts.LegendOpts(pos_left='10%',pos_top='5%'),
    
                    )
    pie = Pie()
    pie.add('', [x for x in zip(df_layout['house_layout'].head(10),df_layout['不同户型的数量'].head(10))],
               center=['75%','30%'],radius=['55%','15%'],
               )
    pie.set_global_opts(
                        #title_opts=opts.TitleOpts(title='已成交的户型TOP10'),
                        legend_opts=opts.LegendOpts(type_='scroll',orient='vertical',pos_right='40%'),
                        )
    pie.set_series_opts(label_opts=opts.LabelOpts(is_show=True, formatter='{b}__{c} 套\n占比{d}%'),
                       
                       )
    grid = Grid(init_opts=opts.InitOpts(width='1200px',height='600px'))
    grid.add(bar,grid_opts=opts.GridOpts(pos_right='30%'))
    grid.add(pie,grid_opts=opts.GridOpts(pos_left='0%'))

grid.render_notebook() # 绘制出不用城市房子的分布情况

2.2 Page

from pyechats.echats import Page

grid = Page() 类

Page(
    page_title="Awesome-pyecharts", # 表示HTML网页的标题。
    js_host= "",  # 表示远程的主机地址，默认为"https://assets.pyecharts.org/assets/"。
    interval=1, # 表示每个图例之间的间隔，默认为1。
    layout=PageLayoutOpts() # 表示布局配置项。
)

def add(*charts)    # charts: 任意图表实例

讨论pyecharts page 生成html 保存图标默认位置。若使生成html出现save config 只需 

page = Page(layout=Page.DraggablePageLayout)

from pyecharts.charts import Bar,Line,Grid,Page
from pyecharts import  options as opts
x_data = ["1","2","3","4","5"]
y_data_1 = [112,148,340,220,157]
y_data_2 = [127,198,149,79,339]
bar = Bar()
bar.add_xaxis(x_data)
bar.add_yaxis("商家A",y_data_1)
bar.add_yaxis("商家B",y_data_2)

line = Line()
line.add_xaxis(x_data)
line.add_yaxis("商家A",y_data_1)
line.add_yaxis("商家B",y_data_2)
bar.set_global_opts(title_opts=opts.TitleOpts(title="折线图"),
                     yaxis_opts=opts.AxisOpts(name="元",
                    name_location="center",
                    name_gap=30)
                     )

line.set_global_opts(title_opts=opts.TitleOpts(title="折线图"),
                     yaxis_opts=opts.AxisOpts(name="元",
                    name_location="center",
                    name_gap=30)
                     )

page = Page(layout=Page.DraggablePageLayout) # 实例化Page的对象
page.add(bar,line)
page.render_notebook()

2.3 Timeline 类

from pyechats.echats import Timeline

pyecharts 时间线柱状图中的时间线 , 就是与 x 轴平行的一个时间轴 ;

时间线 的类是 Timeline , 定义在 pyecharts.charts 模块中 ;
在 时间线上的每个点 , 都代表一个时间点 ,为时间线上的每个时间点都提供一个图 ,

当 时间线 开始播放时 , 随着时间线向前推进 , 推进到不同点 , 就会显示该点对应的图 ;
时间线图的本质就是 在不同的时间点 , 切换不同的图表 ;

调用 Timeline#add_schema 函数 , 可以设置 时间线 的 自动播放设置 ;

使用关键字方式设置参数 ,

1. play_interval 关键字参数设置播放间隔 , 单位毫秒, 下面的代码中 , 每隔 1 秒切换一个时间点 ;

• play_interval=1000, # 自动播放间隔, 单位毫秒, 每隔 1 秒切换一个时间点

2. is_timeline_show 关键字参数设置是否在自动播放时显示时间线 ;

• is_timeline_show=True, # 自动播放时是否显示时间线

3. is_auto_play 关键字参数设置是否自动播放 ,

• is_auto_play=True,  # 是否自动播放

4. is_loop_play 关键字参数设置是否循环播放 ;

• is_loop_play=True   # 是否循环播放
   

# 时间线 自动播放设置
timeline.add_schema(
    play_interval=1000, # 自动播放间隔, 单位毫秒, 每隔 1 秒切换一个时间点
    is_timeline_show=True, # 自动播放时是否显示时间线
    is_auto_play=True,  # 是否自动播放
    is_loop_play=True   # 是否循环播放
)

# 案例
from pyecharts.charts import Line, Bar, Pie, Grid, HeatMap, Page, Timeline
from pyecharts import options as opts


for c in list(set(df_comb_price_sale['city'])):
    df_h = df_comb_price_sale[df_comb_price_sale['city']==c]
    
    timeline = Timeline(init_opts=opts.InitOpts(width='2000px', height='800px'))
    for t in list(set(df_h['crawl_date'])):
        df_h1 = df_h[df_h['crawl_date']==t]
        # 绘图
        bar_s9 = Bar(init_opts=opts.InitOpts(width='2400px', height='800px'))
        bar_s9.add_xaxis(df_h1['district'].tolist())
        bar_s9.add_yaxis('{}_各城区_90天累计销售量'.format(df_h1[['city']].iloc[0,0]) ,df_h1['sold_90_count'].tolist(),yaxis_index=0,)
        bar_s9.set_global_opts(title_opts=opts.TitleOpts(title='{}_{}_各城区_房子售量分布'.format(df_h1[['crawl_date']].iloc[0,0], df_h1[['city']].iloc[0,0])),
                                                          yaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(formatter="{value} 套"),name='房子房累计90天销量', axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(color="blue"))),
                                                          legend_opts=opts.LegendOpts(type_="plain", pos_left="45%", orient="horizontal"),
                                                          tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross",is_show=True),
                                                          )
        
        bar_s9.extend_axis(yaxis=opts.AxisOpts(axislabel_opts=opts.LabelOpts(formatter="{value} 套"),name='二手房总销量' , axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(color="green"))),
                           
                            )
        
        bar_s9.extend_axis(yaxis=opts.AxisOpts(axislabel_opts=opts.LabelOpts(formatter="{value} 元"),name='房子城区均价',position='right' ,offset=120,
                                              axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(color="orange"))
                                              ),
                          
                          )
        
        
        bar_s9_total = Bar(init_opts=opts.InitOpts(width='1000px', height='600px'))
        bar_s9_total.add_xaxis(df_h1['district'].tolist())
        bar_s9_total.add_yaxis('{}_各城区_所有售量'.format(df_h1[['city']].iloc[0,0]) ,df_h1['sold_total'].tolist(),yaxis_index=1,z=3)
        
        line_mean_price = Line(init_opts=opts.InitOpts(width='1000px', height='600px'))
        line_mean_price.add_xaxis(df_h1['district'].tolist())
        line_mean_price.add_yaxis('{}_各城区_房子均价'.format(df_h1[['city']].iloc[0,0]) ,df_h1['unit_price'].tolist(),yaxis_index=2,z=5)
        line_mean_price.set_global_opts(
                                    # xaxis_opts=opts.AxisOpts(grid_index=1),
                                    yaxis_opts=opts.AxisOpts(
                                        # name="降水量",
                                        # min_=0,
                                        # max_=250,
                                        # position="right",
                                        # offset=80,
                                        axisline_opts=opts.AxisLineOpts(
                                            linestyle_opts=opts.LineStyleOpts(color="#5793f3")),
                                        axislabel_opts=opts.LabelOpts(formatter="{value} ml"),),
                                        tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),
                                        legend_opts=opts.LegendOpts(pos_left="65%"),)
            
            
        
        bar_s9.overlap(bar_s9_total)
        bar_s9.overlap(line_mean_price)
        timeline.add(bar_s9, time_point=str(t))
    timeline.add_schema(is_auto_play=True, play_interval=1000)
   
timeline.render_notebook()

2.4 overleap方法

Overlap：结合不同类型图表叠加画在同张图上

用户可以自定义结合 Line/Bar/Kline, Scatter/EffectScatter 图表，将不同类型图表画在一张图上。利用第一个图表为基础，往后的数据都将会画在第一个图表上。

Overlap是一个特殊的图表类型，它允许你将多个图表叠加在一起显示。例如可以将柱状图和折线图叠加，以在同一视图中同时展示两种类型的数据。

顾名思义，overlap是直接把两个图重叠在一起，像两片皮影一样不做任何变化地叠在一起，所以需要事先对某个图自行进行位置移动、收缩变化。

overlap 是 pyecharts 中的一种图表类型，它可以将多个不同类型的图表叠加在一个坐标系中，从而实现多图表的对比展示。

与 Grid 类似，overlap 类也是定义多张图表并在同一个画布上绘制的一种方式。例如，可以使用 Line 类、Scatter 类和 Bar 类来创建三个不同类型的图表实例，再使用 Overlap 类将它们叠加在同一张图上展示，以便对比它们之间的差异。

from pyecharts.charts import Bar, Pie, Line, Grid
from pyecharts import options as opts

for c in list(set(df_datas6['city'])):
    df_c1 = df_datas6[df_datas6['city']==c]
    bar = Bar(init_opts=opts.InitOpts(width='2000px',height='600px'))
    
    # bar.add_xaxis(df_c1['年份'].tolist())
    bar.add_xaxis(sorted(set(df_c1['年份和季度'].tolist())))
    bar.add_yaxis('各个年份和季度房子成交量',df_c1['成交房子数量'].tolist())
    
    
    bar.set_global_opts(title_opts=opts.TitleOpts(title='{}_不同年份和季度的成交量分布'.format(c)),
                        xaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(rotate=-60)),
                        yaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(formatter='{value} 套')),
                        tooltip_opts=opts.TooltipOpts(
                                            is_show=True, trigger="axis", axis_pointer_type="shadow",),
                        )
    bar.extend_axis(yaxis=opts.AxisOpts(axislabel_opts=opts.LabelOpts(formatter='{value} 元'))
                   
                   )
    
    line = Line(init_opts=opts.InitOpts(width='2000px',height='600px'))
    line.add_xaxis(sorted(set(df_c1['年份和季度'].tolist())))
    line.add_yaxis('房子挂牌总价对应的平均每平米价格',df_c1['挂牌价格的均价'].tolist(), yaxis_index=1,z=3)
    bar.overlap(line)
    

bar.render_notebook()

参考：

📊 数据可视化 | pyecharts - overlap - 知乎

pyecharts图表库学习:Grid并行显示多张图

Python数据可视化-使用 Pyecharts 制作 Timeline（时间轴组件）详解_echarts timeline-优快云博客

【Python】pyecharts 模块 ⑦ ( 绘制时间线柱状图 | 时间线 Timeline 简介 | 时间线 Timeline 柱状图开发要点 | 播放设置 | 主题设置 | 代码示例 )_echarts timeline-优快云博客

pyecharts丨页面布局工具——Page 和 Grid

pyecharts丨页面布局工具——grid注意事项和overlap的使用_pyecharts grid-优快云博客

echarts 显示顺序_pyecharts 自定义图表系列，Grid-并行显示多张图表， Overlap:图表混合使用，Page:一个页面顺序渲染多个图表，Timeline:时间线轮播多图...-优快云博客

Pyecharts page 正确布局指引_pyecharts page 调整布局-优快云博客

pyecharts-Page组合图（完整代码＋效果图）_pyecharts pages-优快云博客