一、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>
《pyecharts多图显示grid与legend》有1条评论