## 上面的代码都一样, page = Page(layout=Page.DraggablePageLayout) page.add( page = Page(layout=Page.DraggablePageLayout, init_opts=opts.InitOpts(theme=ThemeType.CHALK)), bar_film(), line_ranking(), pie_circletype(), WordCloud_wc(), Map_worldmap(), ) page.render("page_draggable_layout.html")File "<ipython-input-43-210a50f6b8d2>", line 5 line_ranking(), ^ SyntaxError: positional argument follows keyword argument修改以上代码,并以一个可以固定BI大屏中图片位置的结果输出
时间: 2023-06-17 20:04:02 浏览: 122
css-pro-layout:CSS库,用于构建响应式和可自定义的布局
可以使用 Grid 类型的页面布局来实现BI大屏中图片位置的固定。以下是修改后的代码:
```python
from pyecharts import options as opts
from pyecharts.charts import Bar, Line, Pie, WordCloud, Map, Page
from pyecharts.globals import ThemeType
from pyecharts.faker import Faker
# 设置主题
opts.defaults.theme = ThemeType.CHALK
# 柱状图
def bar_film() -> Bar:
c = (
Bar()
.add_xaxis(Faker.choose())
.add_yaxis("电影", Faker.values())
.set_global_opts(title_opts=opts.TitleOpts(title="电影票房排行榜"))
)
return c
# 折线图
def line_ranking() -> Line:
c = (
Line()
.add_xaxis(Faker.choose())
.add_yaxis("商家A", Faker.values())
.set_global_opts(title_opts=opts.TitleOpts(title="商家排名"))
)
return c
# 饼图
def pie_circletype() -> Pie:
c = (
Pie()
.add("", [list(z) for z in zip(Faker.choose(), Faker.values())])
.set_global_opts(title_opts=opts.TitleOpts(title="圆环图示例"))
.set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {c}"))
)
return c
# 词云图
def WordCloud_wc() -> WordCloud:
c = (
WordCloud()
.add("", [list(z) for z in zip(Faker.choose(), Faker.values())])
.set_global_opts(title_opts=opts.TitleOpts(title="词云示例"))
)
return c
# 地图
def Map_worldmap() -> Map:
c = (
Map()
.add("世界地图", [list(z) for z in zip(Faker.country, Faker.values())], "world")
.set_series_opts(label_opts=opts.LabelOpts(is_show=False))
.set_global_opts(title_opts=opts.TitleOpts(title="世界地图示例"))
)
return c
# 创建页面
page = Page(layout=Page.SimplePageLayout)
# 将各个图表添加到页面中
page.add(bar_film())
page.add(line_ranking())
page.add(pie_circletype())
page.add(WordCloud_wc())
page.add(Map_worldmap())
# 将页面转为Grid类型的布局,并设置各个图表的位置
page.grid = [
{"pos": [0, 0], "span": [6, 6], "chart_id": 0},
{"pos": [6, 0], "span": [6, 6], "chart_id": 1},
{"pos": [0, 6], "span": [6, 6], "chart_id": 2},
{"pos": [6, 6], "span": [6, 6], "chart_id": 3},
{"pos": [2, 12], "span": [10, 10], "chart_id": 4},
]
# 渲染页面并保存为HTML文件
page.render("page_grid_layout.html")
```
修改后的代码使用了 `Page.SimplePageLayout` 布局,这种布局方式可以将不同的图表放置在网页的不同位置。通过修改 `page.grid` 属性,可以控制各个图表在页面中的位置和大小。在本例中,我们将各个图表放置在一个 `6x6` 的网格中的不同位置,并将词云图和地图放置在一个 `10x10` 的网格中,使它们占据页面的中间位置。
阅读全文
相关推荐
修改这段代码 首页 上一页 下一页 最后一页
跳转到: <input id="pageNo" type="text" class="form-control form1" name="pageNo" value="${list.pageNo}" /> 每页记录数: <input class="form-control form1" type="text" name="pageCount" value="${list.pageCount}" /> <input class="btn btn-primary" type="submit" value="跳转" /> 共有 ${list.totalPage} 页
跳转到: <input id="pageNo" type="text" class="form-control form1" name="pageNo" value="${list.pageNo}" /> 每页记录数: <input class="form-control form1" type="text" name="pageCount" value="${list.pageCount}" /> <input class="btn btn-primary" type="submit" value="跳转" /> 共有 ${list.totalPage} 页