pyecharts之page应用

一、grid与page

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

二、测试示例

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

from pyecharts.charts import WordCloud, Line, Bar, Grid, Funnel, Gauge, Scatter,Pie ,Geo
from pyecharts.charts import Page
from pyecharts import options as opts
from example.commons import Collector, Faker
# 柱状图
bar = (
    Bar()
    .add_xaxis(["衬衫", "毛衣", "领带", "裤子", "风衣", "高跟鞋", "袜子"])
    .add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105])
    .add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49])
    .set_global_opts(title_opts=opts.TitleOpts(title="某商场销售情况"))
)
#bar.render()
# 饼图
x_data = ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
y_data = [335, 310, 234, 135, 1548]
pie = (
    Pie()
    .add(
        series_name="访问来源",
        data_pair=[list(z) for z in zip(x_data, y_data)],
        radius=["50%", "70%"],
        label_opts=opts.LabelOpts(is_show=False, position="center"),
    )
    .set_global_opts(legend_opts=opts.LegendOpts(pos_left="legft", orient="vertical"))
    .set_series_opts(
        tooltip_opts=opts.TooltipOpts(
            trigger="item", formatter="{a} <br/>{b}: {c} ({d}%)"
        ),
        # label_opts=opts.LabelOpts(formatter="{b}: {c}")
    )
   # .render("doughnut_chart.html")
)
# 散点图
data = [
    [10.0, 8.04],
    [8.0, 6.95],
    [13.0, 7.58],
    [9.0, 8.81],
    [11.0, 8.33],
    [14.0, 9.96],
    [6.0, 7.24],
    [4.0, 4.26],
    [12.0, 10.84],
    [7.0, 4.82],
    [5.0, 5.68],
]
data.sort(key=lambda x: x[0])
x_data = [d[0] for d in data]
y_data = [d[1] for d in data]
scatter = (
    Scatter()
    .add_xaxis(xaxis_data=x_data)
    .add_yaxis(
        series_name="散点图",
        y_axis=y_data,
        symbol_size=20,
        label_opts=opts.LabelOpts(is_show=False),
    )
    .set_series_opts()
    .set_global_opts(
        xaxis_opts=opts.AxisOpts(
            type_="value", splitline_opts=opts.SplitLineOpts(is_show=True)
        ),
        yaxis_opts=opts.AxisOpts(
            type_="value",
            axistick_opts=opts.AxisTickOpts(is_show=True),
            splitline_opts=opts.SplitLineOpts(is_show=True),
        ),
        tooltip_opts=opts.TooltipOpts(is_show=False),
    )
    #.render("basic_scatter_chart.html")
)
# 仪表盘
gauge = (
    Gauge()
    .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")
)
# 漏斗图
x_data = ["展现", "点击", "访问", "咨询", "订单"]
y_data = [100, 80, 60, 40, 20]
data = [[x_data[i], y_data[i]] for i in range(len(x_data))]
funnel = (
    Funnel()
    .add(
        series_name="",
        data_pair=data,
        gap=2,
        tooltip_opts=opts.TooltipOpts(trigger="item", formatter="{a} <br/>{b} : {c}%"),
        label_opts=opts.LabelOpts(is_show=True, position="inside"),
        itemstyle_opts=opts.ItemStyleOpts(border_color="#fff", border_width=1),
    )
    .set_global_opts(title_opts=opts.TitleOpts(title="漏斗图", subtitle="纯属虚构"))
    #.render("funnel_chart.html")
)
# 地图
# 词云图
wordcloud = (
    WordCloud()
    .add(series_name="热点分析", data_pair=data, word_size_range=[6, 66])
    .set_global_opts(
        title_opts=opts.TitleOpts(
            title="热点分析", title_textstyle_opts=opts.TextStyleOpts(font_size=23)
        ),
        tooltip_opts=opts.TooltipOpts(is_show=True),
    )
    #.render("basic_wordcloud.html")
)
# 组合图
#grid_chart = Grid(init_opts=opts.InitOpts(width="900px", height="500px"))
scatter1 = (
        Scatter()
        .add_xaxis(Faker.choose())
        .add_yaxis("商家A", Faker.values())
        .add_yaxis("商家B", Faker.values())
        .set_global_opts(
            title_opts=opts.TitleOpts(title="Grid-Scatter"),
            legend_opts=opts.LegendOpts(pos_left="20%"),
        )
)
line1 = (
    Line()
    .add_xaxis(Faker.choose())
    .add_yaxis("商家A", Faker.values())
    .add_yaxis("商家B", Faker.values())
    .set_global_opts(
        title_opts=opts.TitleOpts(title="Grid-Line", pos_right="5%"),
        legend_opts=opts.LegendOpts(pos_right="20%"),
    )
)
grid = (
    Grid()
    .add(scatter1, grid_opts=opts.GridOpts(pos_left="55%"))
    .add(line1, grid_opts=opts.GridOpts(pos_right="55%"))
)
page=Page(layout=Page.DraggablePageLayout) # 用于同一个页面加载多个图
page.add(bar)
page.add(pie)
page.add(scatter)
page.add(gauge)
page.add(funnel)
#page.add(geo)
page.add(wordcloud)
page.add(grid)
page.render()
#page.render_notebook()

其输出效果如下(只截取了一部分,后面的部分没再截取):

pyechart-page

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

三、可能遇到的坑

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

1、grid聚合

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

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

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

2、上下图的覆盖

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

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




本站的发展离不开您的资助,金额随意,欢迎来赏!

You can donate through PayPal.
My paypal id: itybku@139.com
Paypal page: https://www.paypal.me/361way

  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.