pyechart's canvas layout
Article Directory
Control the vertical layout of the canvas-Page
page1=(Page(page_title="造价四剑客",layout=Page.SimplePageLayout))
page1.add(bar)
page1.render("造价四剑客.html")
Prepare three pictures, I will arrange one picture on the page first, this is the effect.
Another picture.
page1=(Page(page_title="造价四剑客",layout=Page.SimplePageLayout))
page1.add(bar,
bar2)
page1.render("造价四剑客.html")
Seeing this, everyone must know what the page is doing. It keeps stacking pictures in the vertical direction, which is called "Sequential Multiple Pictures". Do you understand?
page1=(Page(page_title="造价四剑客",layout=Page.SimplePageLayout))
page1.add(bar,
bar2,
bar3)
page1.render("造价四剑客.html")
Stacked 3 pictures, as expected! ! !
Parallel multiple graphs
Let's explore the grid together. First of all, there are many more methods for grid than page. Secondly, flexibility is also enhanced! ! !
Let's take a picture first, let's try it in no hurry!
grid1 = (
Grid(init_opts=opts.InitOpts(width="1700px",height="750px"))
.add(bar,grid_opts=opts.GridOpts(is_show=True,pos_left="10%",pos_right="40%"))
#.add(bar2,grid_opts=opts.GridOpts(is_show=True,pos_left="20%",pos_right="50%"))
.render("造价四剑客.html")
)
Okay, come again now, add one more.
grid1 = (Grid(init_opts=opts.InitOpts(width="1700px",height="750px")))
grid1.add(bar,grid_opts=opts.GridOpts(is_show=True,pos_right="55%"))
grid1.add(bar2,grid_opts=opts.GridOpts(is_show=True,pos_left="55%"))
grid1.render("造价四剑客.html")
Take a look at the legend in the middle, all overlap, it's over.
No hurry, let's adjust the global configuration together. Come with me!
Add .set_global_opts to bar and bar2 respectively, the detailed code is as follows:
#bar的全部代码
bar = (
Bar()
.add_xaxis(Faker.week)
.add_yaxis(
"蒸发量",
[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
#yaxis_index=0,
color="#d14a61",
)
.add_yaxis(
"降水量",
[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
#yaxis_index=1,
color="#5793f3",
)
.set_global_opts(legend_opts=opts.LegendOpts(pos_left="25%"))
#bar2的全部代码
bar2 = (
Bar()
.add_xaxis(
[
"名字很长的X轴标签1",
"名字很长的X轴标签2",
"名字很长的X轴标签3",
"名字很长的X轴标签4",
"名字很长的X轴标签5",
"名字很长的X轴标签6",
]
)
.add_yaxis("商家A", [10, 20, 30, 40, 50, 40])
.add_yaxis("商家B", [20, 10, 40, 30, 40, 50])
.set_global_opts(
xaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(rotate=-15)),
title_opts=opts.TitleOpts(title="", subtitle=""),
legend_opts=opts.LegendOpts(pos_right="25%")
)
)
The final effect is as follows: [Is it done? ]
And what we can see is that this picture is placed on the same floor.
Sequential and Parallel Comprehensive Application
Now let’s use it comprehensively to enhance our beautiful layout
Tips: When you change the image layout code to this
grid1 = (Grid(init_opts=opts.InitOpts(width="1700px",height="750px")))
grid1.add(bar,grid_opts=opts.GridOpts(is_show=True,pos_right="55%"))
grid1.add(bar2,grid_opts=opts.GridOpts(is_show=True,pos_left="25%"))
grid1.render("造价四剑客.html")
# 原来是这样的
grid1 = (Grid(init_opts=opts.InitOpts(width="1700px",height="750px")))
grid1.add(bar,grid_opts=opts.GridOpts(is_show=True,pos_right="55%"))
grid1.add(bar2,grid_opts=opts.GridOpts(is_show=True,pos_left="55%"))
grid1.render("造价四剑客.html")
You will find that your pictures overlap each other. This is something you don't want to see, so I hope you can adjust your pos_left and pos_right parameters.
Next we enter the topic!
grid1 = (Grid(init_opts=opts.InitOpts(width="1600px")))
grid1.add(bar,grid_opts=opts.GridOpts(is_show=True,pos_right="55%"))
grid1.add(bar2,grid_opts=opts.GridOpts(is_show=True,pos_left="55%"))
page1=(Page(page_title="造价四剑客",layout=Page.SimplePageLayout))
page1.add(grid1)
page1.add(bar3)
page1.render("造价四剑客.html")
Successfully combined.
Finally, I want to say that the most commonly used ones are generallygrid, Page is used less, because you can easily complete your large-screen layout in one page, but if you want to scroll and display the corresponding charts in various ways, you may use a lot of pages. .
Attach all codes:
from pyecharts.charts import Page,Bar,Grid
from pyecharts import options as opts
from pyecharts.faker import Faker
bar = (
Bar()
.add_xaxis(Faker.week)
.add_yaxis(
"蒸发量",
[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
#yaxis_index=0,
color="#d14a61",
)
.add_yaxis(
"降水量",
[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
#yaxis_index=1,
color="#5793f3",
)
.set_global_opts(legend_opts=opts.LegendOpts(pos_left="25%"))
# .extend_axis(
# yaxis=opts.AxisOpts(
# name="蒸发量",
# type_="value",
# min_=0,
# max_=250,
# position="right",
# axisline_opts=opts.AxisLineOpts(
# linestyle_opts=opts.LineStyleOpts(color="#d14a61")
# ),
# axislabel_opts=opts.LabelOpts(formatter="{value} ml"),
# )
# )
# .extend_axis(
# yaxis=opts.AxisOpts(
# type_="value",
# name="温度",
# min_=0,
# max_=25,
# position="left",
# axisline_opts=opts.AxisLineOpts(
# linestyle_opts=opts.LineStyleOpts(color="#675bba")
# ),
# axislabel_opts=opts.LabelOpts(formatter="{value} °C"),
# splitline_opts=opts.SplitLineOpts(
# is_show=True, linestyle_opts=opts.LineStyleOpts(opacity=1)
# ),
# )
# )
# .set_global_opts(
# yaxis_opts=opts.AxisOpts(
# name="降水量",
# min_=0,
# max_=250,
# position="right",
# offset=80,
# axisline_opts=opts.AxisLineOpts(
# linestyle_opts=opts.LineStyleOpts(color="#5793f3")
# ),
# axislabel_opts=opts.LabelOpts(formatter="{value} ml"),
# ),
# title_opts=opts.TitleOpts(title=""),
# tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),
# )
)
bar3 = (
Bar()
.add_xaxis(Faker.choose())
.add_yaxis("商家A", Faker.values(), stack="stack1")
.add_yaxis("商家B", Faker.values(), stack="stack1")
.set_series_opts(label_opts=opts.LabelOpts(is_show=False))
.set_global_opts(title_opts=opts.TitleOpts(title=""))
)
bar2 = (
Bar()
.add_xaxis(
[
"名字很长的X轴标签1",
"名字很长的X轴标签2",
"名字很长的X轴标签3",
"名字很长的X轴标签4",
"名字很长的X轴标签5",
"名字很长的X轴标签6",
]
)
.add_yaxis("商家A", [10, 20, 30, 40, 50, 40])
.add_yaxis("商家B", [20, 10, 40, 30, 40, 50])
.set_global_opts(
xaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(rotate=-15)),
title_opts=opts.TitleOpts(title="", subtitle=""),
legend_opts=opts.LegendOpts(pos_right="25%")
)
)
from pyecharts import options as opts
from pyecharts.charts import Graph
nodes = [
{
"name": "结点1", "symbolSize": 10},
{
"name": "结点2", "symbolSize": 20},
{
"name": "结点3", "symbolSize": 30},
{
"name": "结点4", "symbolSize": 40},
{
"name": "结点5", "symbolSize": 50},
{
"name": "结点6", "symbolSize": 40},
{
"name": "结点7", "symbolSize": 30},
{
"name": "结点8", "symbolSize": 20},
]
links = []
for i in nodes:
for j in nodes:
links.append({
"source": i.get("name"), "target": j.get("name")})
c = (
Graph()
.add("", nodes, links, repulsion=8000)
.set_global_opts(title_opts=opts.TitleOpts(title="Graph-基本示例"))
)
grid1 = (Grid(init_opts=opts.InitOpts(width="1600px")))
grid1.add(bar,grid_opts=opts.GridOpts(is_show=True,pos_right="55%"))
grid1.add(bar2,grid_opts=opts.GridOpts(is_show=True,pos_left="55%"))
page1=(Page(page_title="造价四剑客",layout=Page.SimplePageLayout))
page1.add(grid1)
page1.add(bar3)
page1.add(c)
page1.render("造价四剑客.html")
Finally, I hope everyone goes well and can fulfill their ideals! ! !
