Fork me on GitHub

pyecharts-14-页面组件Page

Posted on | In , |
Words count in article: 1.9k | Reading time ≈ 8

Pyecharts-14-图形组合

Pyecharts有一个非常强大的功能，就是能够将多个图形同时放在一个HTML页面中。这种方式和其他库的绘制多个子图的方式的区别在于：Pyecharts中能够自定义位置和图形大小。

本文中将绘制多种不同的图形，并将它们通过页面组件Page的方式放在同一个HTML页面中。

绘制多个图形

下面将会绘制多个图形，图形中不会涉及到太多的配置，本文的重点是讲解如何将不同的图形组合在一起。

导入库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
from pyecharts.globals import CurrentConfig, OnlineHostType   # 事先导入，防止不出图
from pyecharts import options as opts
from pyecharts.charts import Bar, Pie, Line, HeatMap, Funnel, Gauge, Grid, Page   # 6个图形+2个组件
from pyecharts.faker import Faker
from pyecharts.commons.utils import JsCode
from pyecharts.globals import ThemeType
from pyecharts.globals import SymbolType

import pandas as pd
import numpy as np
import random

#显示所有列
# pd.set_option('display.max_columns', None)

#显示所有行
# pd.set_option('display.max_rows', None)

#设置value的显示长度为100，默认为50
# pd.set_option('max_colwidth',100)

从代码中可以看出来，选择了6个图形进行组合：

  • 柱状图Bar
  • 饼图Pie
  • 折线图Line
  • 热力图HeatMap
  • 漏斗图Funnel
  • 仪表盘Gauge

另外的Grid和Page是两个图形组件

模拟数据

柱状图+折线图+饼图是用的一份模拟数据，具体如下：

柱状图

1
2
3
4
5
6
7
8
9
10
11
c = (
    Bar()
    .add_xaxis(df['子类'].tolist())
    .add_yaxis("5大开支",df['数据'].tolist())
    .set_global_opts(
        title_opts=opts.TitleOpts(title="Bar-月度开支"),
        legend_opts=opts.LegendOpts(is_show=False),
    )
)

c.render_notebook()

饼图

1
2
3
4
5
6
7
8
c = (
    Pie()
    .add("", [list(z) for z in zip(df['子类'].tolist(), df['数据'].tolist())])
    .set_global_opts(title_opts=opts.TitleOpts(title="Pie-月度开支"))
    .set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {c}"))
)

c.render_notebook()

折线图

1
2
3
4
5
6
7
8
c = (
    Line()
    .add_xaxis(df['子类'].tolist())
    .add_yaxis("月度开支", df['数据'].tolist())
    .set_global_opts(title_opts=opts.TitleOpts(title="Line-月度开支"))
)

c.render_notebook()

热力图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 0-50 的随机数+列表推导式

value = [[i, j, random.randint(0, 50)] for i in range(24) for j in range(7)]

c = (
    HeatMap()
    .add_xaxis(Faker.clock)
    .add_yaxis("热力图", Faker.week, value)
    .set_global_opts(
        title_opts=opts.TitleOpts(title="HeatMap-热力图"),
        visualmap_opts=opts.VisualMapOpts(),
    )
)

c.render_notebook()

漏斗图

1
2
3
4
5
6
7
c = (
    Funnel()
    .add("商品", [list(z) for z in zip(Faker.choose(), Faker.values())])
    .set_global_opts(title_opts=opts.TitleOpts(title="Funnel-漏斗图"))
)

c.render_notebook()

仪表盘

1
2
3
4
5
6
7
c = (
    Gauge()
    .add("", [("完成率", 80)])
    .set_global_opts(title_opts=opts.TitleOpts(title="Gauge-仪表盘"))
)

c.render_notebook()

Page组合

绘图代码

1、先定义每个图形的函数

2、将所有的绘图方法添加到Page中

3、生成HTML文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
# from pyecharts import options as opts
# from pyecharts.charts import Bar, Pie, Line, HeatMap, Funnel, Gauge, Grid, Page
# from pyecharts.faker import Faker

# 1、柱状图

def barPage() -> Bar:
    bar = (
        Bar()
        .add_xaxis(df['子类'].tolist())
        .add_yaxis("5大开支",df['数据'].tolist())
        .set_global_opts(
            title_opts=opts.TitleOpts(title="Bar-月度开支"),
            legend_opts=opts.LegendOpts(is_show=False),)
    )
    return bar

# 2、饼图

def piePage() -> Pie:
    pie = (
        Pie()
        .add("", [list(z) for z in zip(df['子类'].tolist(), df['数据'].tolist())])
        .set_global_opts(title_opts=opts.TitleOpts(title="Pie-月度开支"))
        .set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {c}"))
    )
    return pie

# 3、折线图
def linePage() -> Line:
    line = (
        Line()
        .add_xaxis(df['子类'].tolist())
        .add_yaxis("月度开支", df['数据'].tolist())
        .set_global_opts(title_opts=opts.TitleOpts(title="Line-月度开支"))
    )
    return line


# 4、热力图


def heatmapPage() -> HeatMap:
    value = [[i, j, random.randint(0, 50)] for i in range(24) for j in range(7)]
    heatmap = (
        HeatMap()
        .add_xaxis(Faker.clock)
        .add_yaxis("热力图", Faker.week, value)
        .set_global_opts(
            title_opts=opts.TitleOpts(title="HeatMap-热力图"),
            visualmap_opts=opts.VisualMapOpts(),
        )
    )
    return heatmap


# 5、漏斗图
def funnelPage() -> Funnel:
    funnel = (
        Funnel()
        .add("商品", [list(z) for z in zip(Faker.choose(), Faker.values())])
        .set_global_opts(title_opts=opts.TitleOpts(title="Funnel-漏斗图"))
    )
    return funnel


# 6、仪表盘

def gaugePage() -> Gauge:
    gauge = (
        Gauge()
        .add("", [("完成率", 80)])
        .set_global_opts(title_opts=opts.TitleOpts(title="Gauge-仪表盘"))
    )
    return gauge


# 上面是6个图形的代码，下面利用Page进行组合

# !!! 关键步骤：将上面定义的每个函数或者方法添加进来
page = (
    Page()
    .add(
        barPage(),
        piePage(),
        linePage(),
        funnelPage(),
        heatmapPage(),
        gaugePage())
)

page.render("page_demo.html")  # 生成HTML文件

默认方式

上面采用的是Page的默认绘图方式

当我们打开HTML文件会发现所有的图形都是靠左的，为了显示方便图形被缩小了

缺点：页面的右边空白太多了，使得页面显示效果很差

simple-layout

这种方式会将图形全部放在HTML页面的正中间的，代码改变的部分如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 上面的绘图代码相同

####  不同之处

page = (
    Page(layout=Page.SimplePageLayout)   # ！！！！改变在这里
    .add(
        barPage(),
        piePage(),
        linePage(),
        funnelPage(),
        heatmapPage(),
        gaugePage())
)

page.render("page_simple_demo.html")  # 生成HTML文件

我们看看实际的效果：

当我们的屏幕不断缩小的时候，所有的图形会排成一行：

缺点：图形居中的话，布局得到了优化，但是图形较多的时候需要不断地向下移动，而且页面上某个图形有时候只是显示部分，显得突兀。

拖拽布局-DraggablePageLayout

这种方式才是Pyecharts的强大之处👍👍👍。使用这种方式，我们可以得到任何排列和图形大小的布局，代码改变如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 上面的绘图代码相同

####  不同之处

page = (
    Page(layout=Page.DraggablePageLayout)   # ！！！！改变在这里
    .add(
        barPage(),
        piePage(),
        linePage(),
        funnelPage(),
        heatmapPage(),
        gaugePage())
)

page.render("page_draggable_demo.html")  # 生成HTML文件

我们先看看生成的图形：

在这种方式下，图形是可以任意拖拽的，同时大小也可以改变的，我们尝试一种排列方式：

重点来了：我们点击左上角的Save Config，会在本地的相同目录下生成一个json的配置文件，然后格式化我们的文件

1
2
3
Page.save_resize_html("page_demo.html",   # 上面的HTML文件名称
                      cfg_file="chart_config.json",  # 保存的json配置文件
                      dest="page_draggable_demo.html")  # 新的文件名称

这个时候我们在运行一下，生成的HTML文件就是我们在上面排版的布局，完美👏

保存代码

保存一份关于嵌套圆形图的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

import pyecharts.options as opts
from pyecharts.charts import Pie
from pyecharts.globals import ThemeType

nine_Giant = nine.drop_duplicates("Giant等级")
one_Giant = one.drop_duplicates("Giant等级")

# 进行排序：饼图中从小到大排序
nine_Giant = nine_Giant[["Giant等级","Giant_per"]].sort_values("Giant等级")
one_Giant = one_Giant[["Giant等级","Giant_per"]].sort_values("Giant等级")



# 内部饼图
inner_names = one_Giant["Giant等级"].tolist()
inner_values = one_Giant["Giant_per"].tolist()
inner_pair = [list(z) for z in zip(inner_names,inner_values)]

# 外部环形（嵌套）
outer_names = nine_Giant["Giant等级"].tolist()
outer_values = nine_Giant["Giant_per"].tolist()
outer_pair = [list(z) for z in zip(outer_names,outer_values)]

c = (
     # 初始化
    Pie(init_opts=opts.InitOpts(
        width="900px", 
        height="800px",
        theme=ThemeType.SHINE))
    
    # 内部饼图
    .add(
        series_name="版本3.2.1",  # 系列名称
        center=["50%", "35%"],
        data_pair=inner_pair,  # 系列数据项，格式为 [(key1, value1), (key2, value2)]
        radius=["25%", "40%"],  #饼图半径 数组的第一项是内半径，第二项是外半径
        #label_opts=opts.LabelOpts(position="inner"), #标签设置在内部
    )
    
    # 外部嵌套环形图
    .add(
        series_name="版本3.2.9",  # 系列名称
        center=["50%", "35%"],
        radius=["40%", "60%"],  #饼图半径 数组的第一项是内半径，第二项是外半径
        data_pair=outer_pair, # 系列数据项，格式为 [(key1, value1), (key2, value2)]
        
        # 标签配置项 参考上面的例子
        label_opts=opts.LabelOpts(
            # position="outside",
            # formatter="{a|{a}}{abg|}\n{hr|}\n {b|{b}: }{c}  {per|{d}%}  ",
            background_color="#eee",
            border_color="#aaa",
            border_width=1,
            border_radius=4,
            rich={
                "a": {"color": "#999",
                      "lineHeight": 22, 
                      "align": "center"},
                
                "abg": {
                    "backgroundColor": "#e3e3e3",
                    "width": "100%",
                    "align": "right",
                    "height": 22,
                    "borderRadius": [4, 4, 0, 0],
                },
               
                
                "hr": {
                    "borderColor": "#aaa",
                    "width": "100%",
                    "borderWidth": 0.5,
                    "height": 0,
                },
                
                
                "b": {"fontSize": 16, "lineHeight": 33},
                
                
                "per": {
                    "color": "#eee",
                    "backgroundColor": "#334455",
                    "padding": [2, 4],
                    "borderRadius": 2,
                },
            },
        ),
    )
    
    # 全局配置项
    .set_global_opts(
        xaxis_opts = opts.AxisOpts(is_show = False),   #隐藏X轴刻度
        yaxis_opts = opts.AxisOpts(is_show = False),    #隐藏Y轴刻度
        legend_opts = opts.LegendOpts(is_show = False),  #隐藏图例
        title_opts = opts.TitleOpts(title = None),    #隐藏标题
                    )
   
    # 系统配置项
    .set_series_opts(
        tooltip_opts=opts.TooltipOpts(
            trigger="item", 
            formatter="{a} <br/>{b}: {c} ({d}%)"
        ),
        label_opts=opts.LabelOpts(is_show=False)  # 隐藏每个触角标签
    )
)

c.render_notebook()

本文标题:pyecharts-14-页面组件Page

发布时间:2020年11月29日 - 23:11

原始链接:http://www.renpeter.cn/2020/11/29/pyecharts-14-%E9%A1%B5%E9%9D%A2%E7%BB%84%E4%BB%B6Page.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

Coffee or Tea