Pyecharts page 正确布局指引

本文讨论pyecharts page 生成html 保存图标默认位置。

若使生成html出现save config 只需 

page = Page(layout=Page.DraggablePageLayout)

那么结果是如果图表默认顺序排放，现在我们有一种选择，点击save config，这样接下来的图表或许就可以按照我们的意愿排放。

 

如图我们已经进行排序，那么生成json文件后，我们看下数据。

使用edge浏览器保存

[{"cid":"f10f97f459df41dc8d9ef6f33a2c4cc4","width":"900px","height":"500px","top":"31.80000114440918px","left":"8px"},{"cid":"096674c77f1b4c42b1701107d5204de3","width":"900px","height":"500px","top":"554.6000366210938px","left":"8px"},{"cid":"d6909870641f406e9a840d9ac055e6c9","width":"900px","height":"500px","top":"1077.4000244140625px","left":"8px"},{"cid":"b1f331a4089f4e7cb998c498434aeb6c","width":"900px","height":"500px","top":"1600.2000732421875px","left":"8px"},{"cid":"477b2e0eea6d4a40a1f6903cdb5f9ebd","width":"900px","height":"500px","top":"2123px","left":"8px"},{"cid":"ab22f87223ca4259b15b0b076c3b7f6b","width":"900px","height":"500px","top":"2645.800048828125px","left":"8px"},{"cid":"f00271e79ff84ad19d0f4069da4de1f6","width":"900px","height":"500px","top":"3168.60009765625px","left":"8px"},{"cid":"49fdcadf0c50484089efc7abe1d6cf24","width":"900px","height":"500px","top":"3691.400146484375px","left":"8px"},{"cid":"30018c25ff194e829542527be36a1133","width":"900px","height":"500px","top":"4214.2001953125px","left":"8px"}]

 如图cid 我们每个拼凑图表的id，id命名貌似是乱序，没错是乱序，

使用QQ浏览器保存

[{"cid":"627303f7459b42e5be912b3e766d31e9","width":"900px","height":"500px","top":"31px","left":"8px"},{"cid":"7ca6192c397243ec9e03a7689372631e","width":"900px","height":"500px","top":"33px","left":"746px"},{"cid":"7f78608312ec42ad8f3a3a25fd2a933e","width":"900px","height":"500px","top":"531px","left":"-7px"},{"cid":"e951d49cb9304315b53578323032a136","width":"900px","height":"500px","top":"543px","left":"891px"},{"cid":"7fb6119f14874c0cb4271ce7c5ebdd00","width":"900px","height":"500px","top":"2123px","left":"8px"},{"cid":"5942764129184607a24147f3e14b2954","width":"900px","height":"500px","top":"2646px","left":"8px"},{"cid":"429f6552ebe44a089d52e6ba5d56a3d0","width":"900px","height":"500px","top":"3169px","left":"8px"},{"cid":"58dda4df730f454eb0bce11b75087747","width":"900px","height":"500px","top":"3692px","left":"8px"},{"cid":"3035e4a617e34fcfa629abf9d9c3b5e7","width":"900px","height":"500px","top":"4215px","left":"8px2"}]

那么我们的以下代码没有效果

Page.save_resize_html("xxx.html", cfg_file="./xx.json", dest="x.html")

那么直接指定page渲染图表时图表的id即可

bar3.chart_id = "3"
bar4.chart_id = "4"
bar5.chart_id = "5"
pie6.chart_id = "6"
pie7.chart_id = "7"
pie8.chart_id = "8"
pie9.chart_id = "9"

其中bar3

bar3 = (
    Bar(init_opts=opts.InitOpts(theme='westeros', bg_color="#161d6f"))
        .add_xaxis(data3_re['index'].tolist())
        .add_yaxis("三星", data3_re['三星'].tolist(), stack="stack1")
        .add_yaxis("苹果", data3_re['苹果'].tolist(), stack="stack1")
        .add_yaxis("小米", data3_re['小米'].tolist(), stack="stack1")
        .add_yaxis("vivo", data3_re['vivo'].tolist(), stack="stack1")
        .add_yaxis("OPPO", data3_re['OPPO'].tolist(), stack="stack1")
        .add_yaxis("其他", data3_re['其他'].tolist(), stack="stack1")
        .set_global_opts(title_opts=opts.TitleOpts(title="2020-2021年全球智能手机出货量市场份额",
                                                   subtitle="小米将在2021年成为全球第三大智能手机供应商",
                                                   pos_left='center'),
                         legend_opts=opts.LegendOpts(is_show=True, pos_top="bottom"))
        .set_series_opts(label_opts=opts.LabelOpts(position="inside",
                                                   formatter="{c} %"))
)
bar3.render('大屏3.html')

其中

page.add(pie9, bar1, bar2, bar3, bar4, bar5, pie6, pie7, pie8)
page.render("xxxx.html")

最后，html文件中图表即可随意配置，但注意被重新渲染过、生成的html图表无法再次移动

Page.save_resize_html("xxx.html", cfg_file="./xx.json", dest="x.html")

如图：

 本文图表数据来源：懂点excel作图