薪酬上不去，报表太难看，来看看pyechart的画布布局，能否拯救你的报表布局

最新推荐文章于 2023-12-15 09:41:46 发布
最新推荐文章于 2023-12-15 09:41:46 发布
阅读量4.1k 收藏 5
点赞数 1
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XRTONY/article/details/114897408
版权

pyechart的画布布局

文章目录

在这里插入图片描述

控制画布的垂直布局-Page

在这里插入图片描述

page1=(Page(page_title="造价四剑客",layout=Page.SimplePageLayout))
page1.add(bar)
page1.render("造价四剑客.html")

在这里插入图片描述

准备好三个图，我先把一个图用page安排上去，这是效果。

再上一个图。

page1=(Page(page_title="造价四剑客",layout=Page.SimplePageLayout))
page1.add(bar,
          bar2)
page1.render("造价四剑客.html")

在这里插入图片描述

看到这，大家肯定知道，page是在干什么了，它在竖直方向一直不停的堆积图片，称之为【顺序多图】，大家理解了吗？

page1=(Page(page_title="造价四剑客",layout=Page.SimplePageLayout))
page1.add(bar,
          bar2,
          bar3)
page1.render("造价四剑客.html")

在这里插入图片描述

堆积3个图，意料之中！！！

并行多图

我们一起来探究一下grid，首先一点，grid比page的方法多很多，其次，灵活性也更加强！！！
先上一个图，不急我们先试试！

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")
)

在这里插入图片描述

好的现在再来，再加一个。

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")

在这里插入图片描述

看看中间的图例，全部重合，完了。

不急，我们一起来调整一下全局配置就好。和我一起来！
给bar和bar2分别加上.set_global_opts，详细代码如下：

#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%")
    )

)

最后的效果如下：【是不是搞定了？】
并且我们可以看到的是，这个图是在同一层摆放的。

在这里插入图片描述

顺序并行综合应用

现在我们来综合运用一下，来加强我们的布局美观

Tips:当你把图片布局的代码换成这样

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")

你会发现自己的图片，竟然重叠在一起了，这是不想看到的，所以希望你可以调整好自己的pos_left和pos_right参数。

在这里插入图片描述

接下来我们进入正题！

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")

在这里插入图片描述

成功组合在一起了。

最后我想说，平时用的比较多的一般是grid，page用的比较少，因为在一个页面中你可以很容易的完成你的大屏布局，但是如果你想要滚动式的，多方面进行相应的图表展示，可能你就会用到很多page了。

附上全部代码：

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")

最后希望大家事事如意，都能完成自己的理想！！！

在这里插入图片描述

い风花の雪栎
关注
专栏目录
使用pyecharts绘图，并创建网格排列图表
2201_75589482的博客
12-21 871
set_global_opts(title_opts=opts.TitleOpts(...), legend_opts=opts.LegendOpts(...), ...)：设置全局选项，例如标题、图例、工具箱等。set_global_opts(title_opts=opts.TitleOpts(...), legend_opts=opts.LegendOpts(...), ...)：设置全局选项，例如标题、图例、工具箱等。add_xaxis(xaxis_data)：添加X轴数据。
利用pyecharts绘制图表并排布
2301_76977807的博客
12-21 818
是基于的一个类库，而Echart是百度开源的一个可视化JavaScript库。
pyechart布局
风花雪月，品霖千年之情
03-17 4395
pyechart布局 from pyecharts.charts import Page,Grid,Bar from pyecharts import options as opt page1=Page(page_title="造价四剑客",layout=Page.SimplePageLayout) bar=( Bar() .add_xaxis(["{}月".format(i) for i in range(1, 13)]) .add_yaxis( "蒸发量",
Python+Pyechart+PyCharm工具实现可视化报表实例
12-24
Python+Pyechart+PyCharm工具实现可视化报表实例：柱状图、展示地图、日历图、漏斗图、水滴图
pyecharts绘制并行多图
yiiixsc的博客
12-15 1188
pyecharts.charts的Grid类表示并行排列的组合图表，它可以采用左右布局或上下布局的方式显示多个图表。Grid类中包含一个add()方法,使使用add()方法可以为组合图表添加配置项。is_control_axis_index：表示是否由自己控制坐。grid_index：表示直角坐标系网格索引，默认为0。grid_opts：表示直角坐标系配置项。索引，默认为False。该方法的参数含义如下。chart：表示图表。
java8看不到源码-pixelflut:多人画布
06-04
看不到源码Pixelflut：多人画布 如果你让一群黑客能够改变投影仪屏幕上的像素颜色，会发生什么？ 看看你自己:) Pixelflut 是一种非常简单（且效率低下）的基于 ASCII 的网络协议，用于在屏幕上绘制像素。 如果需要，...
stencil-html-start-page-on-canvas-snow:画布页面布局（不完整）
05-13
在本文中，我们将深入探讨如何使用HTML5的Canvas API创建一个动态背景并实现画布上的交互式页面布局。"stencil-html-start-page-on-canvas-snow"项目是这样一个实例，它利用JavaScript技术来构建一个充满活力的网页...
原生JS实现树状图布局算法.zip
08-24
树状图布局算法是构建树状图的关键，它的目标是在二维平面上合理地安排节点的位置，使各个节点之间的连接线尽可能短，同时保持整体的美观性和可读性。原生JavaScript实现的这种算法可以避免对特定库的依赖，降低引入...
JimuReport-积木报表
11-02
用户可以通过拖拽不同的组件，如表格、图表、文本框等，到设计画布上，自由组合并调整布局，从而创建出满足需求的报表。这种设计方式极大地降低了报表制作的学习曲线，使得非技术人员也能快速上手。 **打印设计** ...
将多个图片进行表格布局到画布的操作库
最新发布
03-26
在IT行业中，尤其是在图形处理和前端开发领域，将多个图片进行表格布局到画布的操作是一项常见的需求。这种操作可以用于创建拼贴画、社交媒体模板、报告摘要等多种应用场景。标题所提及的“将多个图片进行表格布局到...
python pyecharts 实现一个文件绘制多张图
12-17
Grid并行显示多张图 注意： 第一个图需为 有 x/y 轴的图，即不能为 Pie，其他位置顺序任意 from pyecharts import Bar, Line, Scatter, EffectScatter, Grid ''' Grid类：并行显示多个图表 TODO 第一个图需为 有 x/y 轴的图，即不能为 Pie，其他位置顺序任意。 ''' attr = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] v1 = [5, 20, 36, 10, 75, 90] v2 = [10, 25, 8, 60, 20, 80] bar = Bar("柱状图示例
Pyecharts--组合图表复用渲染模块实现方法
Season CSDN博客
08-19 2061
Pyecharts组合图表复用渲染模块实现方法 1.官方文档 1.1 官方文档 1.2 DraggablePageLayout 布局 page = Page(layout=Page.DraggablePageLayout) page.add(bar_datazoom_slider(), line_markpoint(), pie_rosetype(), grid_mutil_yaxis()) page.render() 1.3 Note: DraggablePageLayout 需要 pye
基于Pyecharts的可视化平台设计
m0_62476411的博客
06-04 465
在数据分析和可视化领域，Pyecharts是一个功能强大且易于使用的Python可视化库。它提供了各种图表类型和丰富的交互功能，使我们能够以直观和有吸引力的方式展示数据。在本文中，我们将探讨如何使用Pyecharts创建地图、折线图、漏斗图和柱状图。
数据可视化——pyecharts
weixin_45451576的博客
08-08 1254
数据可视化——pyecharts
Django使用可视化包Pyechart
菲宇运维
05-23 2745
Echarts 是百度开源的一个数据可视化 JS 库，主要用于数据可视化。pyecharts 是一个用于生成 Echarts 图表的类库。实际上就是 Echarts 与 Python 的对接。本次使用django2.0和pyecharts0.3.3 1.setttins.py添加自己创建的app名称，和静态文件的路径 1 2 3 4 5 ...
PyEcharts 组合图表之顺序多图
.
06-20 1545
第1关：Page：顺序多图
python可视化——生成HTML文件
A.yc的博客
06-08 6168
python爬虫——可视化——生成柱状图，折线图，词云图生成，放入HTML文件中
pyecharts写并行多图
cdbswcdszgsj的博客
12-14 559
图1：用柱形图和折线图在同一个坐标系展示表1数据。图3：用堆积柱形图展示表3数据。图2：用环图展示表2数据。
pyecharts-page的组合
weixin_45167920的博客
11-28 3902
获取数据 import re import requests import json import pandas as pd import time from pyecharts.charts import Map,Bar,Page,Pie from pyecharts import options as opts from pyecharts.components import Table from pyecharts.options import ComponentTitleOpts url = 'h
threejs canvas画布布局
07-28
在使用Three.js创建的canvas画布布局方面，你可以根据你的项目需求将渲染结果renderer.domElement插入到web页面上的任何一个元素中。你可以通过设置元素的样式来控制canvas画布的位置和大小。例如，你可以使用div元素来容纳canvas画布，并设置div元素的样式来控制canvas画布的位置和边距。下面是一个示例代码： ```html <div id="webgl" style="margin-top: 100px; margin-left: 200px;"></div> ``` 在这个示例中，我们使用一个id为"webgl"的div元素来容纳canvas画布，并设置了margin-top和margin-left属性来控制canvas画布的位置。你可以根据需要调整这些属性的值来实现你想要的布局效果。然后，你可以使用JavaScript代码将渲染结果插入到这个div元素中，例如： ```javascript document.getElementById('webgl').appendChild(renderer.domElement); ``` 这样，canvas画布就会被插入到id为"webgl"的div元素中，实现了你所需的布局效果。你也可以根据需要将canvas画布插入到其他元素中，只要符合你项目的布局规则即可。 #### 引用[.reference_title] - *1* *3* [Canvas画布布局和全屏展示](https://blog.csdn.net/BradenHan/article/details/130055592)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Three.js教程：Canvas画布布局和全屏](https://blog.csdn.net/ygtu2018/article/details/131300425)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

い风花の雪栎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值