之前寫過一篇關於Python 制作 動態排序圖的教程，里面利用的是 Matplotlib 中的 animation 函數，文章內容可參考動態排序圖的詳細制作教程，動態排序圖的最終部分效果如下：
今天文章將用另外一種Python 軟件包 Pyecharts，來實現類似效果，效果如下：
在整個動態圖的繪制過程，主要用到了 Pyecharts 的 Timeline 高級組件，該組件與 Matplotlib 中 animatation 函數原理相同，
把數據以時間作為唯一變量，在不同時間點下其它數據條目是不一樣的，一個時間點可以繪制一張可視化圖表，把全部的可視化圖表一幀一幀連接起來，通過幀與幀之間的數據差值變化，最終形成動態圖效果
而 Timeline 組件和 anaimation 函數在這里承擔的角色就是 幀與幀之間可視化圖表的拼接，以上原理介紹完了，接下來就來介紹一下具體怎么使用 Timeline
Timeline 組件使用
**1，安裝 Pyecharts **
使用之前，請確保你已經安裝好 Pyecharts ，安裝方式直接利用pip 工具即可，命令如下：
pip install pyechartske
2，創建 Timeline 對象類
先創建一個 Timeline 對象，相當於一個容器，把后面繪制的每一幀可視化報表圖放在里面，然后根據放入先后順序合成一個類似動態圖的視頻
# 導入所需要的庫函數
from pyecharts import options as opts
from pyecharts.charts import Bar,Timeline
from pyecharts.faker import Faker
import random
t1 = Timeline()# 創建 Timeline對象
3，循環繪制每一幀圖表，放入 Timeline
利用 for 或 while 循環語句，遵守 Pyecharts 語句創建每一幀時間對應的可視化圖表，然后加入了前面創建的 Timeline() 組件中，這里圖表以直方圖 Bar 為例
for i in range(1969,2020):
attr1 = random.shuffle(list(attr))
bar = (
Bar()
.add_xaxis(random.sample(attr, len(attr)))
.add_yaxis('Data',Faker.values(),label_opts = opts.LabelOpts(position = 'right'),
)
.set_series_opts(label_opts = opts.LabelOpts(is_show = True,position = 'right'))
.reversal_axis()
.set_global_opts(title_opts = opts.TitleOpts("{}".format(i),
pos_left = '50%',
),
legend_opts = opts.LegendOpts(pos_right = '10%'))
)
t1.add(bar,'{}年'.format(i))
代碼解讀，這里以1969-2020 作為時間段，對每一個時間節點也就是某一年創建對應的 Bar 圖表，最后以t1.add(instance,str) 函數把對應時間點創建的圖表加入 Timeline 組件中，為了后面更好的展示動態效果，這里把對 Bar 的坐標軸做了逆置操作( reversal_axis() ),每一幀的效果預覽如下：
4，美渲染化圖表， html 文件
另外，在 Timeline() 中 提供了函數add_schema() 用於美化組件樣式，例如 時間軸方向、符號、顏色、每一幀停留時間、播放鍵位置、是否現實 timeline 組件、組件位置 等屬性，函數使用介紹如下
def add_schema(
# 坐標軸類型。可選：
# 'value': 數值軸，適用於連續數據。
# 'category': 類目軸，適用於離散的類目數據，為該類型時必須通過 data 設置類目數據。
# 'time': 時間軸，適用於連續的時序數據，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，
# 例如會根據跨度的范圍來決定使用月，星期，日還是小時范圍的刻度。
# 'log' 對數軸。適用於對數數據。
axis_type: str = "category",
# 時間軸的類型。可選:
# 'horizontal': 水平
# 'vertical': 垂直
orient: str = "horizontal",
# timeline 標記的圖形。
# ECharts 提供的標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',
# 'pin', 'arrow', 'none'
# 可以通過 'image://url' 設置為圖片，其中 URL 為圖片的鏈接，或者 dataURI。
symbol: Optional[str] = None,
# timeline 標記的大小，可以設置成諸如 10 這樣單一的數字，也可以用數組分開表示寬和高，
# 例如 [20, 10] 表示標記寬為 20，高為 10。
symbol_size: Optional[Numeric] = None,
# 表示播放的速度（跳動的間隔），單位毫秒（ms）。
play_interval: Optional[Numeric] = None,
# 表示播放按鈕的位置。可選值：'left'、'right'。
control_position: str = "left",
# 是否自動播放。
is_auto_play: bool = False,
# 是否循環播放。
is_loop_play: bool = True,
# 是否反向播放。
is_rewind_play: bool = False,
# 是否顯示 timeline 組件。如果設置為 false，不會顯示，但是功能還存在。
is_timeline_show: bool = True,
# 是否反向放置 timeline，反向則首位顛倒過來
is_inverse: bool = False,
# Timeline 組件離容器左側的距離。
# left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對於容器高寬的百分比，
# 也可以是 'left', 'center', 'right'。
# 如果 left 的值為'left', 'center', 'right'，組件會根據相應的位置自動對齊
pos_left: Optional[str] = None,
# timeline 組件離容器右側的距離。
# right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對於容器高寬的百分比。
pos_right: Optional[str] = None,
# Timeline 組件離容器上側的距離。
# left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對於容器高寬的百分比，
# 也可以是 'top', 'middle', 'bottom'。
# 如果 left 的值為 'top', 'middle', 'bottom'，組件會根據相應的位置自動對齊
pos_top: Optional[str] = None,
# timeline 組件離容器下側的距離。
# bottom 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對於容器高寬的百分比。
pos_bottom: Optional[str] = "-5px",
# 時間軸區域的寬度, 影響垂直的時候時間軸的軸標簽和軸之間的距離
width: Optional[str] = None,
# 時間軸區域的高度
height: Optional[str] = None,
# 時間軸的坐標軸線配置，參考 `series_options.LineStyleOpts`
linestyle_opts: Union[opts.LineStyleOpts, dict, None] = None,
# 時間軸的軸標簽配置，參考 `series_options.LabelOpts`
label_opts: Optional[opts.LabelOpts] = None,
# 時間軸的圖形樣式，參考 `series_options.ItemStyleOpts`
itemstyle_opts: Union[opts.ItemStyleOpts, dict, None] = None,
)
美化完圖表之后，利用渲染命令把圖表到處至本地 html 文件 t1.render( html路徑)，最終效果如下(Ps ：請不要在意圖表中數據的真實性，這里只是為了介紹 Timeline() 的使用方法，里面數據都是隨機生成得到的)
完整代碼部分
from pyecharts import options as opts
from pyecharts.charts import Bar,Timeline
from pyecharts.faker import Faker
import random
attr = Faker.choose()
t1 = Timeline()# 創建 Timeline對象
for i in range(1969,2020):
attr1 = random.shuffle(list(attr))
bar = (
Bar()
.add_xaxis(random.sample(attr, len(attr)))
.add_yaxis('Data',Faker.values(),label_opts = opts.LabelOpts(position = 'right'),
)
.set_series_opts(label_opts = opts.LabelOpts(is_show = True,position = 'right'))
.reversal_axis()
.set_global_opts(title_opts = opts.TitleOpts("{}".format(i),
pos_left = '50%',
),
legend_opts = opts.LegendOpts(pos_right = '10%'))
)
t1.add(bar,'{}年'.format(i))
t1.add_schema(
symbol = 'arrow',# 設置標記時間；
#orient = 'vertical',
symbol_size = 2,# 標記大小;
play_interval = 900,# 播放時間間隔；
control_position = 'right',# 控制位置;
linestyle_opts = opts.LineStyleOpts(width = 5,
type_ = 'dashed',
color = 'rgb(255,0,0,0.5)'),
label_opts = opts.LabelOpts(color = 'rgb(0,0,255,0.5)',
font_size = 15,
font_style = 'italic',
font_weight = 'bold',
font_family ='Time New Roman',
position = 'left',
interval = 20,
)
)
t1.render("D:/timeline_bar.html")
Timeline 組件擴展
以上通過制作 動態排序圖來介紹了 Timeline 組件，本案例中圖表主體類型為 Bar ，但在實際應用可以根據視覺效果、業務需求等不同應用場景把 Bar 替換為 其他圖表類型，只需要把上面代碼部分中的 for 循環主體代碼替換即可，
for i in range(1969,2020):
attr1 = random.shuffle(list(attr))
instance = ...你的圖表類型
t1.add(instance,'{}年'.format(i))
換一種圖表類型，可能會不一樣的視覺效果，例如桑葚圖：
圓環餅圖，都有不錯的動態效果，都可借助 Timeline 組件來實現
好了，以上就是本篇文章的所有內容，最后感謝大家閱讀！