pyecharts丨页面布局工具——grid注意事项和overlap的使用

grid使用注意事项

使用grid时，一般情况下，永远不要先给grid加入一个没有x y轴的图，比如饼图、地图等等。

当然，两个饼图如何用grid设置为平行我前面也写过了。这里想注意的是一个饼图、一个柱状图平行放置时的情况。

比如，你想实现左边饼图，右边柱状图，而如果你先把饼图加进来：

# c1是个pie，c9是个bar grid3_1.add(c1, grid_opts=opts.GridOpts(pos_right="55%")) grid3_1.add(c9, grid_opts=opts.GridOpts(pos_left="55%"))

就会报错：

grid3_1.add(c9, grid_opts=opts.GridOpts(pos_left="55%")) File "C:\...\site-packages\pyecharts\charts\composite_charts\grid.py", line 72, in add self.options.get("xAxis").extend(chart.options.get("xAxis")) AttributeError: 'NoneType' object has no attribute 'extend'

程序会找不到有坐标轴的图的参考坐标(我的理解）

那如何改呢？ 非常简单——你把上面两句调换下顺序就行了呗！

# c1是个pie，c9是个bar grid3_1.add(c9, grid_opts=opts.GridOpts(pos_left="55%")) grid3_1.add(c1, grid_opts=opts.GridOpts(pos_right="55%"))

最终的输出效果还是左边饼图，右边柱图，非常完美。

（其实没那么完美。。右图的图例应该在靠右一些的。但我下一步想做一个overlap合成一个图，所以就不改了先。）

overlap

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

比如说我想让上面那个环图展现在柱状图右上角空白位置上，那怎么操作呢？

code

def gender_mi(): #性别展示 环形图 cate_1 = ['男', '女'] data_1 = [614, 277] pie = (Pie(init_opts=opts.InitOpts(theme=ThemeType.ROMA)) .add('', [list(z) for z in zip(cate_1, data_1)], radius=["30%", "50%"], #控制内外半径，即图的大小 rosetype="radius", #表明是玫瑰图，半径跟数值挂钩 center=["75%", "25%"]) #饼图中心的位置，即整个图的位置。格式：[左右，上下] #.set_global_opts(title_opts=opts.TitleOpts(title="喜欢mi_10_young人群性别", subtitle="有效数据约900人", pos_left='5%'), # legend_opts=opts.LegendOpts(pos_left="35%")) .set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {d}%")) ) return pie def age_gender_mi(): from pyecharts.commons.utils import JsCode from pyecharts.globals import ThemeType list2 = [ {"value": 17, "percent": 17 / (17 + 5)}, {"value": 55, "percent": 55 / (55 + 50)}, {"value": 150, "percent": 150 / (150 + 81)}, {"value": 60, "percent": 60 / (14 + 60)}, {"value": 11, "percent": 11 / 11}, ] list3 = [ {"value": 5, "percent": 5 / (17 + 5)}, {"value": 50, "percent": 50 / (55 + 50)}, {"value": 81, "percent": 81 / (150 + 81)}, {"value": 14, "percent": 14 / (14 + 60)}, {"value": 0, "percent": 0 / (96603 + 40234)}, ] c = ( Bar(init_opts=opts.InitOpts(theme=ThemeType.ROMA, width='1400px', height='500px'), ) .add_xaxis(['<18岁', '19-22岁', '23-30岁', '31-40岁', '>40岁']) .add_yaxis("男", list2, stack="stack1", category_gap="50%") .add_yaxis("女", list3, stack="stack1", category_gap="50%") .set_series_opts( label_opts=opts.LabelOpts( position="right", formatter=JsCode( "function(x){return Number(x.data.percent * 100).toFixed() + '%';}" ), ) ) .set_global_opts(title_opts=opts.TitleOpts(title="用户年龄段及性别分布", subtitle="23-30岁的男性为主力军", pos_left='5%')) ) c2=gender_mi() #把环图读进来 c.overlap(c2) #两个图重叠 return c

如上。关键是用参数控制好环图的位置和大小，需要不断调整。

最终效果：