一、grid与page

在 pyecharts多图显示grid与legend 篇中有提到使用grid将多个图绘制在一个页面里，其实上一篇的理解是比较片面的，grid的作用是进行图片聚合，比较把两个图进行横向或纵向合并，作为一个大图。而在上一篇也可以看出，其实pyecharts的grid用起来是比较费力的。需要指定上下左右高宽相关参数。所以将多个图放在一个页面显示更多的是使用page函数。而且page函数也支持增加grid聚合图。

二、测试示例

根据理解写了一段代码如下：

  1from pyecharts.charts import WordCloud, Line, Bar, Grid, Funnel, Gauge, Scatter,Pie ,Geo
  2from pyecharts.charts import Page
  3from pyecharts import options as opts
  4from example.commons import Collector, Faker
  5# 柱状图
  6bar = (
  7    Bar()
  8    .add_xaxis(["衬衫", "毛衣", "领带", "裤子", "风衣", "高跟鞋", "袜子"])
  9    .add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105])
 10    .add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49])
 11    .set_global_opts(title_opts=opts.TitleOpts(title="某商场销售情况"))
 12)
 13#bar.render()
 14# 饼图
 15x_data = ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
 16y_data = [335, 310, 234, 135, 1548]
 17pie = (
 18    Pie()
 19    .add(
 20        series_name="访问来源",
 21        data_pair=[list(z) for z in zip(x_data, y_data)],
 22        radius=["50%", "70%"],
 23        label_opts=opts.LabelOpts(is_show=False, position="center"),
 24    )
 25    .set_global_opts(legend_opts=opts.LegendOpts(pos_left="legft", orient="vertical"))
 26    .set_series_opts(
 27        tooltip_opts=opts.TooltipOpts(
 28            trigger="item", formatter="{a} {b}: {c} ({d}%)"
 29        ),
 30        # label_opts=opts.LabelOpts(formatter="{b}: {c}")
 31    )
 32   # .render("doughnut_chart.html")
 33)
 34# 散点图
 35data = [
 36    [10.0, 8.04],
 37    [8.0, 6.95],
 38    [13.0, 7.58],
 39    [9.0, 8.81],
 40    [11.0, 8.33],
 41    [14.0, 9.96],
 42    [6.0, 7.24],
 43    [4.0, 4.26],
 44    [12.0, 10.84],
 45    [7.0, 4.82],
 46    [5.0, 5.68],
 47]
 48data.sort(key=lambda x: x[0])
 49x_data = [d[0] for d in data]
 50y_data = [d[1] for d in data]
 51scatter = (
 52    Scatter()
 53    .add_xaxis(xaxis_data=x_data)
 54    .add_yaxis(
 55        series_name="散点图",
 56        y_axis=y_data,
 57        symbol_size=20,
 58        label_opts=opts.LabelOpts(is_show=False),
 59    )
 60    .set_series_opts()
 61    .set_global_opts(
 62        xaxis_opts=opts.AxisOpts(
 63            type_="value", splitline_opts=opts.SplitLineOpts(is_show=True)
 64        ),
 65        yaxis_opts=opts.AxisOpts(
 66            type_="value",
 67            axistick_opts=opts.AxisTickOpts(is_show=True),
 68            splitline_opts=opts.SplitLineOpts(is_show=True),
 69        ),
 70        tooltip_opts=opts.TooltipOpts(is_show=False),
 71    )
 72    #.render("basic_scatter_chart.html")
 73)
 74# 仪表盘
 75gauge = (
 76    Gauge()
 77    .add(series_name="业务指标", data_pair=[["完成率", 55.5]])
 78    .set_global_opts(
 79        legend_opts=opts.LegendOpts(is_show=False),
 80        tooltip_opts=opts.TooltipOpts(is_show=True, formatter="{a} {b} : {c}%"),
 81    )
 82    #.render("gauge.html")
 83)
 84# 漏斗图
 85x_data = ["展现", "点击", "访问", "咨询", "订单"]
 86y_data = [100, 80, 60, 40, 20]
 87data = [[x_data[i], y_data[i]] for i in range(len(x_data))]
 88funnel = (
 89    Funnel()
 90    .add(
 91        series_name="",
 92        data_pair=data,
 93        gap=2,
 94        tooltip_opts=opts.TooltipOpts(trigger="item", formatter="{a} {b} : {c}%"),
 95        label_opts=opts.LabelOpts(is_show=True, position="inside"),
 96        itemstyle_opts=opts.ItemStyleOpts(border_color="#fff", border_width=1),
 97    )
 98    .set_global_opts(title_opts=opts.TitleOpts(title="漏斗图", subtitle="纯属虚构"))
 99    #.render("funnel_chart.html")
100)
101# 地图
102# 词云图
103wordcloud = (
104    WordCloud()
105    .add(series_name="热点分析", data_pair=data, word_size_range=[6, 66])
106    .set_global_opts(
107        title_opts=opts.TitleOpts(
108            title="热点分析", title_textstyle_opts=opts.TextStyleOpts(font_size=23)
109        ),
110        tooltip_opts=opts.TooltipOpts(is_show=True),
111    )
112    #.render("basic_wordcloud.html")
113)
114# 组合图
115#grid_chart = Grid(init_opts=opts.InitOpts(width="900px", height="500px"))
116scatter1 = (
117        Scatter()
118        .add_xaxis(Faker.choose())
119        .add_yaxis("商家A", Faker.values())
120        .add_yaxis("商家B", Faker.values())
121        .set_global_opts(
122            title_opts=opts.TitleOpts(title="Grid-Scatter"),
123            legend_opts=opts.LegendOpts(pos_left="20%"),
124        )
125)
126line1 = (
127    Line()
128    .add_xaxis(Faker.choose())
129    .add_yaxis("商家A", Faker.values())
130    .add_yaxis("商家B", Faker.values())
131    .set_global_opts(
132        title_opts=opts.TitleOpts(title="Grid-Line", pos_right="5%"),
133        legend_opts=opts.LegendOpts(pos_right="20%"),
134    )
135)
136grid = (
137    Grid()
138    .add(scatter1, grid_opts=opts.GridOpts(pos_left="55%"))
139    .add(line1, grid_opts=opts.GridOpts(pos_right="55%"))
140)
141page=Page(layout=Page.DraggablePageLayout) # 用于同一个页面加载多个图
142page.add(bar)
143page.add(pie)
144page.add(scatter)
145page.add(gauge)
146page.add(funnel)
147#page.add(geo)
148page.add(wordcloud)
149page.add(grid)
150page.render()
151#page.render_notebook()

其输出效果如下（只截取了一部分，后面的部分没再截取）：

pyechart-page
pyechart-page

从上图可以看到，这个图形是有参考线的，而且通过这些参考线可以拖动图形，这个默认page用法是没有的，其是由layout=Page.DraggablePageLayout参数控制的。

三、可能遇到的坑

page的使用比较爽，直接add增加就ok了，一般不需要额外增加参数。在实际配置时，可能遇到如下两个坑。一个是grid聚合，另一个是上下图的遮挡问题。

1、grid聚合

我在测试时，最的加的grid聚合，刚开始使用云词图和漏洞图的聚合，发现使用grid聚合后，两个图是叠在一起的，试了调整N多个参数都无果。后来查看Grid函数的帮助信息，发现如下提示：

1`Gird` Drawing grid in rectangular coordinate. In a single grid,
2at most two X and Y axes each is allowed. Line chart, bar chart,
3and scatter chart (bubble chart) can be drawn in grid.

有没有发现玄机？提示的比较明确，grid只支持柱状图、线形图和散点图。换成两个线形图聚合后，直接输出就正常了。

2、上下图的覆盖

这个在我测试中是没有遇到的，不过网上看人有遇到过，比如上图中使用日期作x轴，又以垂直放置，其有可能和下图进行重叠。这个时候是可以通过参数设置解决的。比如通过设置xaxis_rotate 倾斜角度。

如果问题，可以参考官方给出的示例 grid_example.py 和 page_example.py 。