这是一篇非常非常基础的入门教程，但是也能让你深入了解pycharts的实现机制和带着你深入了解细节的设计，因此非常建议你能看完，相信一定会有所收获！
这一篇讲深入介绍组合图形的基础知识。
有四种类型，分别是：
（1）Grid：并行多图
（2）Page：顺序多图
（3）Tab：选项卡多图
（4）Timeline：时间线轮播多图
文章目录
一、Grid：并行多图
（一）基本函数
class pyecharts.charts.Grid(Base)
class Grid(
# 初始化配置项，参考 `global_options.InitOpts`
init_opts: opts.InitOpts = opts.InitOpts()
)
func pyecharts.charts.Grid.add
def add(
# 图表实例，仅 `RectChart` 类或者其子类
chart: RectChart,
# 直角坐标系网格配置项，参见 `GridOpts`
grid_opts: Union[opts.GridOpts, dict],
# 直角坐标系网格索引
grid_index: int = 0,
# 是否由自己控制 Axis 索引
is_control_axis_index: bool = False,
)
GridOpts：直角坐标系网格配置项
class pyecharts.options.GridOpts
class GridOpts(
# grid 组件离容器左侧的距离。
# left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，
# 也可以是 'left', 'center', 'right'。
# 如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
pos_left: Optional[str] = None,
# grid 组件离容器上侧的距离。
# top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，
# 也可以是 'top', 'middle', 'bottom'。
# 如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。
pos_top: Optional[str] = None,
# grid 组件离容器右侧的距离。
# right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
pos_right: Optional[str] = None,
# grid 组件离容器下侧的距离。
# bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
pos_bottom: Optional[str] = None,
# grid 组件的宽度。默认自适应。
width: Union[Numeric, str, None] = None,
# grid 组件的高度。默认自适应。
height: Union[Numeric, str, None] = None,
# grid 区域是否包含坐标轴的刻度标签。
is_contain_label: bool = False,
)
（二）上下布局
from pyecharts.faker import Faker
from pyecharts import options as opts
from pyecharts.charts import Bar, Grid, Line,Scatter
def grid_vertical() -> Grid:
bar = (
Bar(init_opts=opts.InitOpts(bg_color='pink'))
.add_xaxis(Faker.choose())
.add_yaxis("商家A", Faker.values())
.add_yaxis("商家B", Faker.values())
.set_global_opts(title_opts=opts.TitleOpts(title="Grid-Bar"))
)
line = (
Line()
.add_xaxis(Faker.choose())
.add_yaxis("商家A", Faker.values())
.add_yaxis("商家B", Faker.values())
.set_global_opts(
title_opts=opts.TitleOpts(title="Grid-Line", pos_top="48%"),
legend_opts=opts.LegendOpts(pos_top="48%"),
)
)
grid = (
Grid()
.add(bar, grid_opts=opts.GridOpts(pos_bottom="60%"))
.add(line, grid_opts=opts.GridOpts(pos_top="60%"))
)
return grid
grid1 = grid_vertical()
grid1.render("templates\index.html")
（三）左右布局
from pyecharts.faker import Faker
from pyecharts import options as opts
from pyecharts.charts import Bar, Grid, Line,Scatter
def grid_horizontal() -> Grid:
scatter = (
Scatter(init_opts=opts.InitOpts(bg_color='#ff8'))
.add_xaxis(Faker.choose())
.add_yaxis("商家A", Faker.values())
.add_yaxis("商家B", Faker.values())
.set_global_opts(
title_opts=opts.TitleOpts(title="Grid-Scatter"),
legend_opts=opts.LegendOpts(pos_left="20%"),
)
)
line = (
Line()
.add_xaxis(Faker.choose())
.add_yaxis("商家A", Faker.values())
.add_yaxis("商家B", Faker.values())
.set_global_opts(
title_opts=opts.TitleOpts(title="Grid-Line", pos_right="5%"),
legend_opts=opts.LegendOpts(pos_right="20%"),
)
)
grid = (
Grid()
.add(scatter, grid_opts=opts.GridOpts(pos_left="55%"))
.add(line, grid_opts=opts.GridOpts(pos_right="55%"))
)
return grid
grid1 = grid_horizontal()
grid1.render("templates\index.html")
可以发现，其实最主要的区别就在于设置了chant的位置。
# 左右布局
.add(scatter, grid_opts=opts.GridOpts(pos_left="55%"))
.add(line, grid_opts=opts.GridOpts(pos_right="55%"))
# 上下布局
.add(bar, grid_opts=opts.GridOpts(pos_bottom="60%"))
.add(line, grid_opts=opts.GridOpts(pos_top="60%"))
二、Page：顺序多图
基本函数如下：
def page_simple_layout():
# page = Page()
page = Page(layout=Page.SimplePageLayout)
# page = Page(layout=Page.DraggablePageLayout)
page.add(
bar_datazoom_slider(),
Pie_base(),
table_base(),
)
page.render("templates\index.html")
完整的代码如下：
from pyecharts import options as opts
from pyecharts.charts import Bar,Page, Pie
from pyecharts.components import Table
from pyecharts.globals import ThemeType
def bar_datazoom_slider() -> Bar:
bar = (
Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))
.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
.add_yaxis("商家B", [15, 25, 30, 18, 65, 70])
.set_series_opts(
label_opts=opts.LabelOpts(is_show=True),
markline_opts=opts.MarkLineOpts(
data=[opts.MarkLineItem(y=30, name="yAxis=30")],
symbol_size=[20, 10],
linestyle_opts=opts.LineStyleOpts(color='red', width=2)
),
)
.set_global_opts(
title_opts=opts.TitleOpts(title="我的柱状图", subtitle="hello bar", pos_left=100),
)
)
return bar
def Pie_base() -> Pie:
x_data = ["高中", "大专", "本科", "硕士", "博士"]
y_data = [335, 310, 274, 235, 400]
bar = (
Pie(init_opts=opts.InitOpts(page_title='我的饼图', bg_color='pink', width="500px", height="400px"))
.add(
series_name="学历",
data_pair=[list(z) for z in zip(x_data, y_data)],
center=["50%", "50%"],
)
.set_colors(["blue", "green", "yellow", "red", "orange"])
.set_global_opts(
title_opts=opts.TitleOpts(title="我的饼图", pos_left='center',
title_textstyle_opts=opts.TextStyleOpts(color="#ff0")),
legend_opts=opts.LegendOpts(pos_left="left", orient="vertical", pos_top="10%"),
)
.set_series_opts(
label_opts=opts.LabelOpts(formatter="{b}:{c}")
)
)
return bar
def table_base() -> Table:
table = Table()
headers = ["姓名", "年龄", "性别"]
rows = [["张三", 25, '男'],
["李四", 35, '男'],
["王五", 22, '男'],
]
table.add(headers, rows)
table.set_global_opts(
title_opts=opts.ComponentTitleOpts(title="我的表格", subtitle="我是副标题")
)
return table
def page_simple_layout():
# page = Page()
page = Page(layout=Page.SimplePageLayout)
# page = Page(layout=Page.DraggablePageLayout)
page.add(
bar_datazoom_slider(),
Pie_base(),
table_base(),
)
page.render("templates\index.html")
if __name__ == "__main__":
page_simple_layout()
三、Tab：选项卡多图
（一）基本函数
class pyecharts.charts.Tab
class Tab(
# HTML 标题
page_title: str = "Awesome-pyecharts",
# 远程 HOST，默认为 "https://assets.pyecharts.org/assets/"
js_host: str = ""
)
func pyecharts.charts.Tab.add
def add(
# 任意图表类型
chart,
# 标签名称
tab_name
):
（二）案例
from pyecharts import options as opts
from pyecharts.charts import Bar, Grid, Line, Pie, Tab
from pyecharts.faker import Faker
def bar_datazoom_slider() -> Bar:
c = (
Bar()
.add_xaxis(Faker.days_attrs)
.add_yaxis("商家A", Faker.days_values)
.set_global_opts(
title_opts=opts.TitleOpts(title="Bar-DataZoom（slider-水平）"),
datazoom_opts=[opts.DataZoomOpts()],
)
)
return c
def line_markpoint() -> Line:
c = (
Line()
.add_xaxis(Faker.choose())
.add_yaxis(
"商家A",
Faker.values(),
markpoint_opts=opts.MarkPointOpts(data=[opts.MarkPointItem(type_="min")]),
)
.add_yaxis(
"商家B",
Faker.values(),
markpoint_opts=opts.MarkPointOpts(data=[opts.MarkPointItem(type_="max")]),
)
.set_global_opts(title_opts=opts.TitleOpts(title="Line-MarkPoint"))
)
return c
def pie_rosetype() -> Pie:
v = Faker.choose()
c = (
Pie()
.add(
"",
[list(z) for z in zip(v, Faker.values())],
radius=["30%", "75%"],
center=["25%", "50%"],
rosetype="radius",
label_opts=opts.LabelOpts(is_show=False),
)
.add(
"",
[list(z) for z in zip(v, Faker.values())],
radius=["30%", "75%"],
center=["75%", "50%"],
rosetype="area",
)
.set_global_opts(title_opts=opts.TitleOpts(title="Pie-玫瑰图示例"))
)
return c
def grid_mutil_yaxis() -> Grid:
x_data = ["{}月".format(i) for i in range(1, 13)]
bar = (
Bar()
.add_xaxis(x_data)
.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",
)
.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="Grid-多 Y 轴示例"),
tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),
)
)
line = (
Line()
.add_xaxis(x_data)
.add_yaxis(
"平均温度",
[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
yaxis_index=2,
color="#675bba",
label_opts=opts.LabelOpts(is_show=False),
)
)
bar.overlap(line)
return Grid().add(
bar, opts.GridOpts(pos_left="5%", pos_right="20%"), is_control_axis_index=True
)
tab = Tab()
tab.add(bar_datazoom_slider(), "bar-example")
tab.add(line_markpoint(), "line-example")
tab.add(pie_rosetype(), "pie-example")
tab.add(grid_mutil_yaxis(), "grid-example")
tab.render("templates\index.html")
（三）运行效果
四、Timeline：时间线轮播多图
（一）基本函数
func pyecharts.charts.Timeline.add
def add(
# 图表实例
chart: Base,
# 时间点
time_point: str
)
（二）Bar图 Timeline 效果
from pyecharts import options as opts
from pyecharts.charts import Bar, Grid, Line, Liquid, Page, Pie,Timeline
from pyecharts.faker import Faker
def timeline_pie() -> Timeline:
attr = Faker.choose()
tl = Timeline()
for i in range(2015, 2020):
pie = (
Pie()
.add(
"商家A",
[list(z) for z in zip(attr, Faker.values())],
center=["50%","50%"]
)
)
tl.add(pie, "{}年".format(i))
return tl
t = timeline_pie()
t.render('templates\index.html')
（三）Pie 图 Timeline 效果
from pyecharts.faker import Faker
from pyecharts import options as opts
from pyecharts.charts import Bar, Page, Pie, Timeline
def timeline_bar() -> Timeline:
x = Faker.choose()
tl = Timeline()
for i in range(2015, 2020):
bar = (
Bar()
.add_xaxis(x)
.add_yaxis("商家A", Faker.values())
.set_global_opts(title_opts=opts.TitleOpts("某商店{}年营业额".format(i)))
)
tl.add(bar, "{}年".format(i))
return tl
t = timeline_bar()
t.render('templates\index.html')
OK，终于写完了，后续我将会继续介绍Flask与pycharts结合的实现方式，敬请期待。
感谢你的关注！
参考：https://pyecharts.org/#/zh-cn/intro
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
