手把手教你畫：輪播圖

今天討論輪播圖。

輪播圖經(jīng)常用于大屏展示、PPT匯報(bào)等，Pyecharts能非常方便的實(shí)現(xiàn)這個(gè)功能。

今天基于前天繪制的堆疊面積圖（stack area line）,咱們繪制一個(gè)輪播圖，手把手展示如何繪制輪播圖。

繪制原理

輪播圖，顧名思義，至少得有2幀，輪訓(xùn)每一幀，這樣才能形成輪播的效果。

因此，在知道如何繪制一幅堆疊面積圖后，再繪制兩幅肯定就不是問題。

然后把它們按照順序添加到輪播圖對(duì)象中，渲染到html文件中。

以上就是Pyecharts繪制輪播圖的基本過程。

繪制過程

在前天繪制的堆疊面積圖代碼基礎(chǔ)上，需要增加導(dǎo)入Timeline類，它提供輪播圖的繪制能力。

from?pyecharts.charts?import?Timeline

假定繪制3幅堆疊面積圖，這就需要3倍數(shù)據(jù)，方便起見，基于反轉(zhuǎn)，生成數(shù)據(jù)如下：

x_data?=?["周一",?"周二",?"周三",?"周四",?"周五",?"周六",?"周日"]

y_data1?=?[140,?232,?101,?264,?90,?340,?250]
y_data2?=?[120,?282,?111,?234,?220,?340,?310]
y_data3?=?[320,?132,?201,?334,?190,?130,?220]

d?=?{'2019':?[y_data1.copy(),?y_data2.copy(),?y_data3.copy()],
?????'2020':?[list(reversed(y_data2)),?list(reversed(y_data1)),?list(reversed(y_data3))],
?????"2021":?[y_data3.copy(),?list(reversed(y_data1)),?y_data2.copy()]}

字典d中，鍵是年份，值是構(gòu)成堆疊面積圖的3個(gè)y軸數(shù)據(jù)。

然后，進(jìn)入核心，繪制輪播圖的代碼框架如下：

#?創(chuàng)建Timeline對(duì)象
tl?=?Timeline()

years?=?['2019',?'2020',?'2021']
for?year?in?years:
????y_data1,?y_data2,?y_data3?=?d[year]
????stack_area_i?=?Line()
????#?這部分同前天文章的代碼###
????#?全局配置
????#?系列配置
????####
????
????#?依次添加單個(gè)堆疊面積圖到tl中
????tl.add(stack_area_i,?f"{year}年")
#?最后渲染到html中
tl.render("timeline_bar_with_area_stack.html")

基本框架分為如上三個(gè)部分：

1. 創(chuàng)建Timeline對(duì)象
2. 依次添加單個(gè)堆疊面積圖到tl中
3. 最后渲染到html中

圖形展示

下面就是愉快的圖形展示，我錄制一個(gè)gif動(dòng)態(tài)效果圖：

完整代碼