pyecharts圖表庫學習:Grid並行顯示多張圖

原創 梦寐_ 2020-02-23 07:17

自定義圖表類

  • Grid 類：並行顯示多張圖
  • Overlap 類：結合不同類型圖表疊加畫在同張圖上
  • Page 類：同一網頁按順序展示多圖
  • Timeline 類：提供時間線輪播多張圖

Grid：並行顯示多張圖

用戶可以自定義結合 Line/Bar/Kline/Scatter/EffectScatter/Pie/HeatMap/Boxplot 圖表，將不同類型圖表畫在多張圖上。第一個圖需爲 有 x/y 軸的圖，即不能爲 Pie，其他位置順序任意。

Grid 類的使用：

  1. 引入 Grid類，from pyecharts import Grid
  2. 實例化Grid類，grid = Grid()，可指定page_title, width, height, jhost參數。
  3. 使用 add() 向 grid 中添加圖，至少需要設置一個grid_top, grid_bottom, grid_left, grid_right 四個參數中的一個。grid_width 和 grid_height 一般不用設置，默認即可。
  4. 使用render() 渲染生成 `.html 文件

Note： Overlap類可放入 Grid類中，不過有個前提，Overlap 不可爲多 x 軸或者多 y 軸，否則會出現座標軸索引混亂問題

Grid 類中其他方法：render_embed()：在 Flask&Django中可以使用該方法渲染 show_config()：打印輸出所有配置項chart：chart屬性返回圖形實例 在 Jupyter-notebook 中直接調用 Grid 實例即可顯示圖表

Grid.add()方法簽名

add(chart,
    grid_width=None,
    grid_height=None,
    grid_top=None,
    grid_bottom=None,
    grid_left=None,
    grid_right=None)

chart -> chart instance
	圖表實例
grid_width -> str/int
	grid 組件的寬度。默認自適應。
grid_height -> str/int
	grid 組件的高度。默認自適應。
grid_top -> str/int
	grid 組件離容器頂部的距離。默認爲 None, 有'top', 'center', 'middle'可選，也可以爲百分數或者整數
grid_bottom -> str/int
	grid 組件離容器底部的距離。默認爲 None, 有'top', 'center', 'middle'可選，也可以爲百分數或者整數
grid_left -> str/int
	grid 組件離容器左側的距離。默認爲 None, 有'left', 'center', 'right'可選，也可以爲百分數或者整數
grid_right -> str/int
	grid 組件離容器右側的距離。默認爲 None, 有'left', 'center', 'right'可選，也可以爲百分數或者整數
上下類型，Bar + Line
from pyecharts import Bar, Line, Grid

attr = ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
v1 = [5, 20, 36, 10, 75, 90]
v2 = [10, 25, 8, 60, 20, 80]
bar = Bar("柱狀圖示例", height=720)
bar.add("商家A", attr, v1, is_stack=True)
bar.add("商家B", attr, v2, is_stack=True)
line = Line("折線圖示例", title_top="50%")
attr = ["週一", "週二", "週三", "週四", "週五", "週六", "週日"]
line.add(
    "最高氣溫",
    attr,
    [11, 11, 15, 13, 12, 13, 10],
    mark_point=["max", "min"],
    mark_line=["average"],
)
line.add(
    "最低氣溫",
    attr,
    [1, -2, 2, 5, 3, 2, 0],
    mark_point=["max", "min"],
    mark_line=["average"],
    legend_top="50%",
)

grid = Grid()
grid.add(bar, grid_bottom="60%")
grid.add(line, grid_top="60%")
grid.render()

在這裏插入圖片描述

左右類型，Scatter + EffectScatter
from pyecharts import Scatter, EffectScatter, Grid

v1 = [5, 20, 36, 10, 75, 90]
v2 = [10, 25, 8, 60, 20, 80]
scatter = Scatter(width=1200)
scatter.add("散點圖示例", v1, v2, legend_pos="70%")
es = EffectScatter()
es.add(
    "動態散點圖示例",
    [11, 11, 15, 13, 12, 13, 10],
    [1, -2, 2, 5, 3, 2, 0],
    effect_scale=6,
    legend_pos="20%",
)

grid = Grid()
grid.add(scatter, grid_left="60%")
grid.add(es, grid_right="60%")
grid.render()

在這裏插入圖片描述

上下左右類型，Bar + Line + Scatter + EffectScatter
from pyecharts import Bar, Line, Scatter, EffectScatter, Grid

attr = ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
v1 = [5, 20, 36, 10, 75, 90]
v2 = [10, 25, 8, 60, 20, 80]
bar = Bar("柱狀圖示例", title_pos="65%")
bar.add("商家A", attr, v1, is_stack=True)
bar.add("商家B", attr, v2, is_stack=True, legend_pos="80%")
line = Line("折線圖示例")
attr = ["週一", "週二", "週三", "週四", "週五", "週六", "週日"]
line.add(
    "最高氣溫",
    attr,
    [11, 11, 15, 13, 12, 13, 10],
    mark_point=["max", "min"],
    mark_line=["average"],
)
line.add(
    "最低氣溫",
    attr,
    [1, -2, 2, 5, 3, 2, 0],
    mark_point=["max", "min"],
    mark_line=["average"],
    legend_pos="20%",
)
v1 = [5, 20, 36, 10, 75, 90]
v2 = [10, 25, 8, 60, 20, 80]
scatter = Scatter("散點圖示例", title_top="50%", title_pos="65%")
scatter.add("scatter", v1, v2, legend_top="50%", legend_pos="80%")
es = EffectScatter("動態散點圖示例", title_top="50%")
es.add(
    "es",
    [11, 11, 15, 13, 12, 13, 10],
    [1, -2, 2, 5, 3, 2, 0],
    effect_scale=6,
    legend_top="50%",
    legend_pos="20%",
)

grid = Grid(height=720, width=1200)
grid.add(bar, grid_bottom="60%", grid_left="60%")
grid.add(line, grid_bottom="60%", grid_right="60%")
grid.add(scatter, grid_top="60%", grid_left="60%")
grid.add(es, grid_top="60%", grid_right="60%")
grid.render()

在這裏插入圖片描述

Line + Pie
from pyecharts import Line, Pie, Grid

line = Line("折線圖示例")
attr = ["週一", "週二", "週三", "週四", "週五", "週六", "週日"]
line.add(
    "最高氣溫",
    attr,
    [11, 11, 15, 13, 12, 13, 10],
    mark_point=["max", "min"],
    mark_line=["average"],
)
line.add(
    "最低氣溫",
    attr,
    [1, -2, 2, 5, 3, 2, 0],
    mark_point=["max", "min"],
    mark_line=["average"],
    legend_pos="20%",
)
attr = ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
v1 = [11, 12, 13, 10, 10, 10]
pie = Pie("餅圖示例", title_pos="55%")
pie.add(
    "",
    attr,
    v1,
    radius=[45, 65],
    center=[65, 50],
    legend_pos="80%",
    legend_orient="vertical",
)

grid = Grid(width=1200)
grid.add(line, grid_right="55%")
grid.add(pie, grid_left="60%")
grid.render()

在這裏插入圖片描述

HeatMap + Bar
import random

from pyecharts import HeatMap, Bar, Grid

x_axis = [
    "12a", "1a", "2a", "3a", "4a", "5a", "6a",
    "7a", "8a", "9a", "10a", "11a", "12p", "1p",
    "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p",
    "10p", "11p",
]
y_axis = [
    "Saturday",
    "Friday",
    "Thursday",
    "Wednesday",
    "Tuesday",
    "Monday",
    "Sunday",
]
data = [[i, j, random.randint(0, 50)] for i in range(24) for j in range(7)]
heatmap = HeatMap("熱力圖示例")
heatmap.add(
    "熱力圖直角座標系",
    x_axis,
    y_axis,
    data,
    is_visualmap=True,
    visual_top="45%",
    visual_text_color="#000",
    visual_orient="horizontal",
)
attr = ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
v1 = [5, 20, 36, 10, 75, 90]
v2 = [10, 25, 8, 60, 20, 80]
bar = Bar("柱狀圖示例", title_top="52%")
bar.add("商家A", attr, v1, is_stack=True)
bar.add("商家B", attr, v2, is_stack=True, legend_top="50%")

grid = Grid(height=700)
grid.add(heatmap, grid_bottom="60%")
grid.add(bar, grid_top="60%")
grid.render()

在這裏插入圖片描述
Bar 會受 HeatMap 影響，很有趣。

利用 Grid 解決 dataZoom 與 X 軸標籤重疊問題

from pyecharts imoprt Bar, Grid

x = [
    "名字很長的x軸1",
    "名字很長的x軸2",
    "名字很長的x軸3",
    "名字很長的x軸4",
    "名字很長的x軸5",
    "名字很長的x軸6",
    "名字很長的x軸7",
    "名字很長的x軸8",
    "名字很長的x軸9",
]
y = [10, 20, 30, 40, 50, 60, 70, 80, 90]

grid = Grid()
bar = Bar("利用 Grid 解決 dataZoom 與 X 軸標籤重疊問題")
bar.add("", x, y, is_datazoom_show=True, xaxis_interval=0, xaxis_rotate=30)
# 把 bar 加入到 grid 中，並適當調整 grid_bottom 參數，使 bar 圖整體上移
grid.add(bar, grid_bottom="25%")
grid.render()

在這裏插入圖片描述

datazoom 組件同時控制多個圖
from pyecharts import Line, Kline, Grid

line = Line("折線圖示例")
attr = ["週一", "週二", "週三", "週四", "週五", "週六", "週日"]
line.add(
    "最高氣溫",
    attr,
    [11, 11, 15, 13, 12, 13, 10],
    mark_point=["max", "min"],
    mark_line=["average"],
)
line.add(
    "最低氣溫",
    attr,
    [1, -2, 2, 5, 3, 2, 0],
    mark_point=["max", "min"],
    legend_top="50%",
    mark_line=["average"],
    # 設置 dataZoom 控制索引爲 0,1 的 x 軸，即第一個和第二個
    is_datazoom_show=True,
    datazoom_xaxis_index=[0, 1],
)

v1 = [
    [2320.26, 2320.26, 2287.3, 2362.94],
    [2300, 2291.3, 2288.26, 2308.38],
    [2295.35, 2346.5, 2295.35, 2345.92],
    [2347.22, 2358.98, 2337.35, 2363.8],
    [2360.75, 2382.48, 2347.89, 2383.76],
    [2383.43, 2385.42, 2371.23, 2391.82],
    [2377.41, 2419.02, 2369.57, 2421.15],
    [2425.92, 2428.15, 2417.58, 2440.38],
    [2411, 2433.13, 2403.3, 2437.42],
    [2432.68, 2334.48, 2427.7, 2441.73],
    [2430.69, 2418.53, 2394.22, 2433.89],
    [2416.62, 2432.4, 2414.4, 2443.03],
    [2441.91, 2421.56, 2418.43, 2444.8],
    [2420.26, 2382.91, 2373.53, 2427.07],
    [2383.49, 2397.18, 2370.61, 2397.94],
    [2378.82, 2325.95, 2309.17, 2378.82],
    [2322.94, 2314.16, 2308.76, 2330.88],
    [2320.62, 2325.82, 2315.01, 2338.78],
    [2313.74, 2293.34, 2289.89, 2340.71],
    [2297.77, 2313.22, 2292.03, 2324.63],
    [2322.32, 2365.59, 2308.92, 2366.16],
    [2364.54, 2359.51, 2330.86, 2369.65],
    [2332.08, 2273.4, 2259.25, 2333.54],
    [2274.81, 2326.31, 2270.1, 2328.14],
    [2333.61, 2347.18, 2321.6, 2351.44],
    [2340.44, 2324.29, 2304.27, 2352.02],
    [2326.42, 2318.61, 2314.59, 2333.67],
    [2314.68, 2310.59, 2296.58, 2320.96],
    [2309.16, 2286.6, 2264.83, 2333.29],
    [2282.17, 2263.97, 2253.25, 2286.33],
    [2255.77, 2270.28, 2253.31, 2276.22],
]
kline = Kline("K 線圖示例", title_top="50%")
kline.add(
    "日K",
    ["2017/7/{}".format(i + 1) for i in range(31)],
    v1,
    is_datazoom_show=True,
)

grid = Grid(width=1200, height=700)
grid.add(line, grid_top="60%")
grid.add(kline, grid_bottom="60%")
grid.render()

Overlap：結合不同類型圖表疊加畫在同張圖上

用戶可以自定義結合 Line/Bar/Kline, Scatter/EffectScatter 圖表，將不同類型圖表畫在一張圖上。利用第一個圖表爲基礎，往後的數據都將會畫在第一個圖表上。

Overlap 類的使用：

  1. 引入 Overlap 類，from pyecharts import Overlap
  2. 實例化 Overlap 類，overlap = Overlap()，可指定 page_title, width, height, jhost 參數。
  3. 使用 add() 向 overlap 中添加圖
  4. 使用 render() 渲染生成 .html 文件

Overlap.add() 方法簽名

add(chart,
    xaxis_index=0,
    yaxis_index=0,
    is_add_xaxis=False,
    is_add_yaxis=False)

chart -> chart instance
	圖表示例
xaxis_index -> int
	x 座標軸索引，默認爲 0
yaxis_index -> int
	y 座標軸索引，默認爲 0
is_add_xaxis -> bool
	是否新增一個 x 座標軸，默認爲 False
is_add_yaxis -> bool
	是否新增一個 y 座標軸，默認爲 False
Line + Bar
from pyecharts import Bar, Line, Overlap

attr = ['A', 'B', 'C', 'D', 'E', 'F']
v1 = [10, 20, 30, 40, 50, 60]
v2 = [38, 28, 58, 48, 78, 68]
bar = Bar("Line - Bar 示例")
bar.add("bar", attr, v1)
line = Line()
line.add("line", attr, v2)

overlap = Overlap()
overlap.add(bar)
overlap.add(line)
overlap.render()

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

pyecharts圖表庫學習

梦寐_ 2020-02-23 07:17:48

pyecharts圖表庫學習:Bar（柱狀圖/條形圖）、Bar3D（3D 柱狀圖）

梦寐_ 2020-02-23 07:17:48

pyecharts圖表庫學習:Funnel（漏斗圖）

梦寐_ 2020-02-23 07:17:48

pyecharts圖表庫學習

梦寐_ 2020-02-23 07:17:48

pyecharts圖表庫學習:Bar（柱狀圖/條形圖）、Bar3D（3D 柱狀圖）

梦寐_ 2020-02-23 07:17:48

pyecharts圖表庫學習:Funnel（漏斗圖）

梦寐_ 2020-02-23 07:17:48