pyecharts多图显示grid与legend

一、grid与legend的作用与问题

如果希望在一个页面绘制多个图形，这就需要使用grid，echarts官方对grid给出的解释是 “直角坐标系内绘图网格” 。所以如果想在一个页面显示多个图，就需要通过grid的上下左右，长宽高低相关指标指定生成的图所住的位置，这样就可以将两个图在一个页面上展示。即然grid可以实现这个功能，为什么还要提到legend这个参数呢？legend这个参数就是在有多个指标时，可以选择型输出的选项叫legend，如果多个图形在一个页面（grid）里显示时，就会涉及到legend默认会重叠的问题。具体见下图：



<img src="https://www.361way.com/wp-content/uploads/2019/08/legend.png" width="908" height="402" title="legend" alt="legend" />



上图中商家A、商家B、最高气温、最低气温本来都是可以选择的，不过因为上面使用默认参数重叠了，就会导致查看时很别扭。其实除上面提到的legend，title也会存在这个问题，因为下面的图我把title取消了，所以未出现重叠的问题。上图使用的代码为：



<br />

from pyecharts import options as opts
from pyecharts.charts import Line, Bar, Grid
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="运维之路"),)
)
week_name_list = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
high_temperature = [11, 11, 15, 13, 12, 13, 10]
low_temperature = [1, -2, 2, 5, 3, 2, 0]
line2 = (
    Line(init_opts=opts.InitOpts(width="1600px", height="800px"))
    .add_xaxis(xaxis_data=week_name_list)
    .add_yaxis(
        series_name="最高气温",
        y_axis=high_temperature,
        markpoint_opts=opts.MarkPointOpts(
            data=[
                opts.MarkPointItem(type_="max", name="最大值"),
                opts.MarkPointItem(type_="min", name="最小值"),
            ]
        ),
        markline_opts=opts.MarkLineOpts(
            data=[opts.MarkLineItem(type_="average", name="平均值")]
        ),
    )
    .add_yaxis(
        series_name="最低气温",
        y_axis=low_temperature,
        markpoint_opts=opts.MarkPointOpts(
            data=[opts.MarkPointItem(value=-2, name="周最低", x=1, y=-1.5)]
        ),
        markline_opts=opts.MarkLineOpts(
            data=[
                opts.MarkLineItem(type_="average", name="平均值"),
                opts.MarkLineItem(symbol="none", x="90%", y="max"),
                opts.MarkLineItem(symbol="circle", type_="max", name="最高点"),
            ]
        ),
    )
    .set_global_opts(
        #title_opts=opts.TitleOpts(title="气温变化", subtitle="纯属虚构"),
        tooltip_opts=opts.TooltipOpts(trigger="axis"),
        toolbox_opts=opts.ToolboxOpts(is_show=True),
        xaxis_opts=opts.AxisOpts(type_="category", boundary_gap=False),
        #legend_opts=opts.LegendOpts(pos_left="right"),
    )
    #.render("temperature_change_line_chart.html")
)
# 最后的 Grid
#grid_chart = Grid(init_opts=opts.InitOpts(width="1400px", height="800px"))
grid_chart = Grid()
grid_chart.add(
    bar,
    grid_opts=opts.GridOpts(
        pos_left="3%", pos_right="1%", height="20%"
    ),
)
# wr
grid_chart.add(
    line2,
    grid_opts=opts.GridOpts(
        pos_left="3%", pos_right="1%", pos_top="40%", height="35%"
    ),
)
#grid_chart.render("professional_kline_chart.html")
grid_chart.render_notebook()

二、多图重叠问题优化

pyecharts虽然也是基于百度echarts的python化，不过参数调用上还是略有区别的，在pyecharts里的调用如下：



<br />

>>> from pyecharts import options as opts
>>> help(opts.LegendOpts)
__init__(self, type_:Union[str, NoneType]=None, selected_mode:Union[str, bool, NoneType]=None, is_show:bool=True, pos_left:Union[str, int, float, NoneType]=None, pos_right:Union[str, int, float, NoneType]=None, pos_top:Union[str, int, float, NoneType]=None, pos_bottom:Union[str, int, float, NoneType]=None, orient:Union[str, NoneType]=None, textstyle_opts:Union[pyecharts.options.series_options.TextStyleOpts, dict, NoneType]=None)

使用帮助可以看到，其可以通过opts.LegendOpts的相关设置进行配置。所以通过该帮助信息，我们将上面代码第53行legend_opts=opts.LegendOpts(pos_left="right") 前的注释取消掉就可以解决该问题。修改后，显示效果如下：



<img src="https://www.361way.com/wp-content/uploads/2019/08/grid-legend.png" width="919" height="403" title="pyecharts-grid-legend" alt="pyecharts-grid-legend" />



同样，多个title也可以通过该问题解决。而对于选项参数不了解时，可以通过如下三个opts函数查找：



<br />

charts_options
global_options
series_options

三、legend取值

这里以百度echarts的legend使用为例进行说明，legend 图例组件离容器左（右，上，下）侧的距离，对应的参数为left,right,top,bottom 。这里以left为例，left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left','center', 'right'。如果 left 的值为'left', 'center','right'，组件会根据相应的位置自动对齐。



<br />

# 自动对齐
legend:{
    left:'right'
}
#定义宽高
legend:{
    width:10,
    height:10
}
#布局朝向（orient）
legend:{
    //默认横向布局，纵向布局值为'vertical'
    orient:'horizontal'
}
# 是否显示
legend:{
    tooltip:{
        show:true
    }
}

pyecharts的使用也可以参照官方示例进行相应的修改。

<br />



<strong>参考页面：</strong>



<a href="https://echarts.baidu.com/echarts2/doc/doc.html#Legend" target="_blank" rel="noopener">baidu echarts2 legend</a>



<a href="https://echarts.baidu.com/option.html#legend" target="_blank" rel="noopener">baidu echarts3 legend</a>