pyecharts 組合圖表

Grid：并行多圖

class pyecharts.charts.Grid(Base)

class Grid(
    # 初始化配置項(xiàng)，參考 `global_options.InitOpts`
    init_opts: opts.InitOpts = opts.InitOpts()
)

func pyecharts.charts.Grid.add

def add(
    # 圖表實(shí)例，僅 `Chart` 類或者其子類
    chart: Chart,

    # 直角坐標(biāo)系網(wǎng)格配置項(xiàng)，參見 `GridOpts`
    grid_opts: Union[opts.GridOpts, dict],

    # 直角坐標(biāo)系網(wǎng)格索引
    grid_index: int = 0,

    # 是否由自己控制 Axis 索引
    is_control_axis_index: bool = False,
)

GridOpts：直角坐標(biāo)系網(wǎng)格配置項(xiàng)

class pyecharts.options.GridOpts

class GridOpts(
    # 是否顯示直角坐標(biāo)系網(wǎng)格。
    is_show: bool = False,

    # 所有圖形的 zlevel 值。
    z_level: Numeric = 0,

    # 組件的所有圖形的z值。
    z: Numeric = 2,

    # grid 組件離容器左側(cè)的距離。
    # left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比，
    # 也可以是 'left', 'center', 'right'。
    # 如果 left 的值為'left', 'center', 'right'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。
    pos_left: Union[Numeric, str, None] = None,

    # grid 組件離容器上側(cè)的距離。
    # top 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比，
    # 也可以是 'top', 'middle', 'bottom'。
    # 如果 top 的值為'top', 'middle', 'bottom'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。
    pos_top: Union[Numeric, str, None]  = None,

    # grid 組件離容器右側(cè)的距離。
    # right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。
    pos_right: Union[Numeric, str, None]  = None,

    # grid 組件離容器下側(cè)的距離。
    # bottom 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。
    pos_bottom: Union[Numeric, str, None]  = None,

    # grid 組件的寬度。默認(rèn)自適應(yīng)。
    width: Union[Numeric, str, None] = None,

    # grid 組件的高度。默認(rèn)自適應(yīng)。
    height: Union[Numeric, str, None] = None,

    # grid 區(qū)域是否包含坐標(biāo)軸的刻度標(biāo)簽。
    is_contain_label: bool = False,

    # 網(wǎng)格背景色，默認(rèn)透明。
    background_color: str = "transparent",

    # 網(wǎng)格的邊框顏色。支持的顏色格式同 backgroundColor。
    border_color: str = "#ccc",

    # 網(wǎng)格的邊框線寬。
    border_width: Numeric = 1,

    # 本坐標(biāo)系特定的 tooltip 設(shè)定。
    tooltip_opts: Union[TooltipOpts, dict, None] = None,
)

Demo

gallery 示例

Page：順序多圖

class pyecharts.charts.Page

class Page(
    # HTML 標(biāo)題
    page_title: str = "Awesome-pyecharts",

    # 遠(yuǎn)程 HOST，默認(rèn)為 "https://assets.pyecharts.org/assets/"
    js_host: str = "",

    # 每個(gè)圖例之間的間隔
    interval: int = 1,

    # 布局配置項(xiàng)，參考 `PageLayoutOpts`
    layout: Union[PageLayoutOpts, dict] = PageLayoutOpts()
)

func pyecharts.charts.Page.add

def add(*charts)    # charts: 任意圖表實(shí)例

class pyecharts.options.PageLayoutOpts

class PageLayoutOpts(
    # 配置均為原生 CSS 樣式
    justify_content: Optional[str] = None,
    margin: Optional[str] = None,
    display: Optional[str] = None,
    flex_wrap: Optional[str] = None,
)

func pyecharts.charts.Page.save_resize_html

用于 DraggablePageLayout 布局重新渲染圖表

def save_resize_html(
    # Page 第一次渲染后的 html 文件
    source: str = "render.html",
    *,
    # 布局配置文件
    cfg_file: types.Optional[str] = None,

    # 布局配置 dict
    cfg_dict: types.Optional[list] = None,

    # 重新生成的 .html 存放路徑
    dest: str = "resize_render.html",
) -> str

Page 內(nèi)置了以下布局

• SimplePageLayout
• DraggablePageLayout

Demo

gallery 示例

默認(rèn)布局

page = Page()
page.add(bar_datazoom_slider(), line_markpoint(), pie_rosetype(), grid_mutil_yaxis())
page.render()

SimplePageLayout 布局

page = Page(layout=Page.SimplePageLayout)
# 需要自行調(diào)整每個(gè) chart 的 height/width，顯示效果在不同的顯示器上可能不同
page.add(bar_datazoom_slider(), line_markpoint(), pie_rosetype(), grid_mutil_yaxis())
page.render()

DraggablePageLayout 布局

page = Page(layout=Page.DraggablePageLayout)
page.add(bar_datazoom_slider(), line_markpoint(), pie_rosetype(), grid_mutil_yaxis())
page.render()

Note: DraggablePageLayout 需要 pyecharts 版本 v.1.4.0+

# DraggablePageLayout 利用 Jquery 以及 Echarts 本身的 resize 功能，實(shí)現(xiàn)了可拖拽布局。使用步驟如下
# 1.指定 Page 布局
page = Page(layout=Page.DraggablePageLayout)

# 正常 render 圖表
page.add(bar_datazoom_slider(), line_markpoint(), pie_rosetype(), grid_mutil_yaxis())
page.render()

# 使用瀏覽器打開渲染后的 .html 文件，默認(rèn)為 render.html。拖拉/調(diào)整圖表位置和大小，當(dāng)調(diào)整到一個(gè)適合
# 的布局時(shí)，點(diǎn)擊左上方的 `Save Config` 按鈕，下載 chart_config.json 配置文件，假設(shè)存放位置為
# ~/chart_config.json。再次渲染圖表并指定其布局配置

# Warning: 請(qǐng)注釋掉上面的的所有渲染代碼，就是以下三行。因?yàn)?html 已經(jīng)生成，并不需要再重新渲染一遍。
# page = Page(layout=Page.DraggablePageLayout)
# page.add(bar_datazoom_slider(), line_markpoint(), pie_rosetype(), grid_mutil_yaxis())
# page.render()

# render.html：第一步生成的原 html 文件
# chart_config.json：第二步下載的配置文件
# my_new_charts.html：新 html 文件路徑
Page.save_resize_html("render.html", cfg_file="~/chart_config.json", dest="my_new_charts.html")

# 或者可以使用 json 數(shù)據(jù)
# cfg_dict 為 json 文件里面的內(nèi)容
Page.save_resize_html("render.html", cfg_dict=cfg_dict, dest="my_new_charts.html")

# Question：能否復(fù)用渲染模板？
# Answer: 可以的，渲染配置 json 數(shù)據(jù)中是以 chart_id 來作為一個(gè)圖形的唯一標(biāo)識(shí)符的，所以只需要在
# 第一次渲染的時(shí)候指定 chart_id 就可以啦。
# example:
# bar = bar_datazoom_slider()
# bar.chart_id = "chenjiandongx_is_an_awesome_boy"
# line = line_markpoint()
# line.chart_id = "chenjiandongx_is_an_amazing_boy"
# pie = pie_rosetype()
# pie.chart_id = "chenjiandongx_is_an_adorable_boy"
# 然后只要以后都按這個(gè) chart_id 來渲染圖表的時(shí)候，你的布局配置就可以復(fù)用啦。
# cat chart_config.json，會(huì)發(fā)現(xiàn) chart_id 是固定的啦。
page.add(bar_datazoom_slider(), line_markpoint(), pie_rosetype()))

演示視頻

• 油管視頻
• 騰訊視頻

Tab：選項(xiàng)卡多圖

class pyecharts.charts.Tab

class Tab(
    # HTML 標(biāo)題
    page_title: str = "Awesome-pyecharts",

    # 遠(yuǎn)程 HOST，默認(rèn)為 "https://assets.pyecharts.org/assets/"
    js_host: str = ""
)

func pyecharts.charts.Tab.add

def add(
    # 任意圖表類型
    chart,

    # 標(biāo)簽名稱
    tab_name
):

Demo

gallery 示例

Timeline：時(shí)間線輪播多圖

class pyecharts.charts.Timeline

class Timeline(
    # 初始化配置項(xiàng)，參考 `global_options.InitOpts`
    init_opts: opts.InitOpts = opts.InitOpts()
)

func pyecharts.charts.Timeline.add_schema

def add_schema(
    # 坐標(biāo)軸類型。可選：
    # 'value': 數(shù)值軸，適用于連續(xù)數(shù)據(jù)。
    # 'category': 類目軸，適用于離散的類目數(shù)據(jù)，為該類型時(shí)必須通過 data 設(shè)置類目數(shù)據(jù)。
    # 'time': 時(shí)間軸，適用于連續(xù)的時(shí)序數(shù)據(jù)，與數(shù)值軸相比時(shí)間軸帶有時(shí)間的格式化，在刻度計(jì)算上也有所不同，
    # 例如會(huì)根據(jù)跨度的范圍來決定使用月，星期，日還是小時(shí)范圍的刻度。
    # 'log' 對(duì)數(shù)軸。適用于對(duì)數(shù)數(shù)據(jù)。
    axis_type: str = "category",

    # 時(shí)間軸的類型?？蛇x:
    # 'horizontal': 水平
    # 'vertical': 垂直
    orient: str = "horizontal",

    # timeline 標(biāo)記的圖形。
    # ECharts 提供的標(biāo)記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 
    # 'pin', 'arrow', 'none'
    # 可以通過 'image://url' 設(shè)置為圖片，其中 URL 為圖片的鏈接，或者 dataURI。
    symbol: Optional[str] = None,

    # timeline 標(biāo)記的大小，可以設(shè)置成諸如 10 這樣單一的數(shù)字，也可以用數(shù)組分開表示寬和高，
    # 例如 [20, 10] 表示標(biāo)記寬為 20，高為 10。
    symbol_size: Optional[Numeric] = None,

    # 表示播放的速度（跳動(dòng)的間隔），單位毫秒（ms）。
    play_interval: Optional[Numeric] = None,

    # 表示播放按鈕的位置?？蛇x值：'left'、'right'。
    control_position: str = "left",

    # 是否自動(dòng)播放。
    is_auto_play: bool = False,

    # 是否循環(huán)播放。
    is_loop_play: bool = True,

    # 是否反向播放。
    is_rewind_play: bool = False,

    # 是否顯示 timeline 組件。如果設(shè)置為 false，不會(huì)顯示，但是功能還存在。
    is_timeline_show: bool = True,

    # 是否反向放置 timeline，反向則首位顛倒過來
    is_inverse: bool = False,

    # Timeline 組件離容器左側(cè)的距離。
    # left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比，
    # 也可以是 'left', 'center', 'right'。
    # 如果 left 的值為'left', 'center', 'right'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊
    pos_left: Optional[str] = None,

    # timeline 組件離容器右側(cè)的距離。
    # right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。
    pos_right: Optional[str] = None,

    # Timeline 組件離容器上側(cè)的距離。
    # left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比，
    # 也可以是 'top', 'middle', 'bottom'。
    # 如果 left 的值為 'top', 'middle', 'bottom'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊
    pos_top: Optional[str] = None,

    # timeline 組件離容器下側(cè)的距離。
    # bottom 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。
    pos_bottom: Optional[str] = "-5px",

    # 時(shí)間軸區(qū)域的寬度, 影響垂直的時(shí)候時(shí)間軸的軸標(biāo)簽和軸之間的距離
    width: Optional[str] = None,

    # 時(shí)間軸區(qū)域的高度
    height: Optional[str] = None,

    # 時(shí)間軸的坐標(biāo)軸線配置，參考 `series_options.LineStyleOpts`
    linestyle_opts: Union[opts.LineStyleOpts, dict, None] = None,

    # 時(shí)間軸的軸標(biāo)簽配置，參考 `series_options.LabelOpts`
    label_opts: Optional[opts.LabelOpts] = None,

    # 時(shí)間軸的圖形樣式，參考 `series_options.ItemStyleOpts`
    itemstyle_opts: Union[opts.ItemStyleOpts, dict, None] = None,

    # Graphic 樣式
    graphic_opts: types.Graphic = None,

    # 『當(dāng)前項(xiàng)』（checkpoint）的圖形樣式。
    checkpointstyle_opts: types.TimeLinkCheckPoint = None,

    # 控制按鈕』的樣式?！嚎刂瓢粹o』包括：『播放按鈕』、『前進(jìn)按鈕』、『后退按鈕』。
    controlstyle_opts: types.TimeLineControl = None,
)

func pyecharts.charts.Timeline.add

def add(
    # 圖表實(shí)例
    chart: Base, 

    # 時(shí)間點(diǎn)
    time_point: str
)

TimeLinkCheckPoint: 時(shí)間軸 checkpoint 樣式配置

class TimelineCheckPointerStyle(
    # ECharts 提供的標(biāo)記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
    # 可以通過 'image://url' 設(shè)置為圖片，其中 URL 為圖片的鏈接，或者 dataURI。
    # 可以通過 'path://' 將圖標(biāo)設(shè)置為任意的矢量路徑。
    #    這種方式相比于使用圖片的方式，不用擔(dān)心因?yàn)榭s放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。
    #    路徑圖形會(huì)自適應(yīng)調(diào)整為合適的大小。路徑的格式參見 SVG PathData。
    #    可以從 Adobe Illustrator 等工具編輯導(dǎo)出。
    symbol: str = "circle",

    # 標(biāo)記的大小。
    symbol_size: Union[Numeric, Sequence[Numeric]] = 13,

    # 標(biāo)記的旋轉(zhuǎn)角度（而非弧度）。正值表示逆時(shí)針旋轉(zhuǎn)。
    symbol_rotate: Optional[Numeric] = None,

    # 如果 symbol 是 path:// 的形式，是否在縮放時(shí)保持該圖形的長(zhǎng)寬比。
    symbol_keep_aspect: bool = False,

    # 標(biāo)記相對(duì)于原本位置的偏移。
    symbol_offset: Optional[Sequence[Union[str, Numeric]]] = None,

    # 『當(dāng)前項(xiàng)』（checkpoint）的顏色。
    color: str = "#c23531",

    # 『當(dāng)前項(xiàng)』（checkpoint）的邊框?qū)挾取?    border_width: Numeric = 5,

    # 『當(dāng)前項(xiàng)』（checkpoint）的邊框顏色。
    border_color: str = "rgba(194,53,49,0.5)",

    # 『當(dāng)前項(xiàng)』（checkpoint）在 timeline 播放切換中的移動(dòng)，是否有動(dòng)畫。
    is_animation: bool = True,

    # 『當(dāng)前項(xiàng)』（checkpoint）的動(dòng)畫時(shí)長(zhǎng)。
    animation_duration: Numeric = 300,

    # 『當(dāng)前項(xiàng)』（checkpoint）的動(dòng)畫的緩動(dòng)效果。
    animation_easing: str = "quinticInOut",
)

TimelineControlStyle： 時(shí)間軸控制按鈕樣式

class TimelineControlStyle(
    # 是否顯示『控制按鈕』。設(shè)置為 false 則全不顯示。
    is_show: bool = True,

    # 是否顯示『播放按鈕』。
    is_show_play_button: bool = True,

    # 是否顯示『后退按鈕』。
    is_show_prev_button: bool = True,

    # 是否顯示『前進(jìn)按鈕』。
    is_show_next_button: bool = True,

    # 『控制按鈕』的尺寸，單位為像素（px）。
    item_size: Numeric = 22,

    # 『控制按鈕』的間隔，單位為像素（px）。
    item_gap: Numeric = 12,

    # 『控制按鈕』的位置。
    # 當(dāng) timeline.orient 為 'horizontal'時(shí)，'left'、'right'有效。
    # 當(dāng) timeline.orient 為 'vertical'時(shí)，'top'、'bottom'有效。
    position: str = "left",

    # 『播放按鈕』的『可播放狀態(tài)』的圖形。
    # 可以通過 'image://url' 設(shè)置為圖片，其中 URL 為圖片的鏈接，或者 dataURI。
    # 可以通過 'path://' 將圖標(biāo)設(shè)置為任意的矢量路徑。
    #    這種方式相比于使用圖片的方式，不用擔(dān)心因?yàn)榭s放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。
    #    路徑圖形會(huì)自適應(yīng)調(diào)整為合適的大小。路徑的格式參見 SVG PathData。
    #    可以從 Adobe Illustrator 等工具編輯導(dǎo)出。
    play_icon: Optional[str] = None,

    # 同上
    stop_icon: Optional[str] = None,

    # 同上
    prev_icon: Optional[str] = None,

    # 同上
    next_icon: Optional[str] = None,

    # 按鈕顏色。
    color: str = "#304654",

    # 按鈕邊框顏色。
    border_color: str = "#304654",

    # 按鈕邊框線寬。
    border_width: Numeric = 1,
)

Demo

gallery 示例