内容介绍
本文介绍基于 Python3 的 Pyecharts 制作 Timeline(时间轴组件) 时需要使用的设置参数和常用模板案例,可根据实际情况对案例中的内容进行调整即可。
使用 Pyecharts 进行数据可视化时可提供直观、交互丰富、可高度个性化定制的数据可视化图表。案例中的代码内容基于 Pyecharts 1.x 版本 。
Timeline:时间线轮播多图
1.基本设置
class Timeline(
# 初始化配置项,参考 `global_options.InitOpts`
init_opts: opts.InitOpts = opts.InitOpts()
)
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,
# Graphic 样式
graphic_opts: types.Graphic = None,
# 『当前项』(checkpoint)的图形样式。
checkpointstyle_opts: types.TimeLinkCheckPoint = None,
# 控制按钮』的样式。『控制按钮』包括:『播放按钮』、『前进按钮』、『后退按钮』。
controlstyle_opts: types.TimeLineControl = None,
)
def add(
# 图表实例
chart: Base,
# 时间点
time_point: str
)
2.时间轴 checkpoint 样式配置
class TimelineCheckPointerStyle(
# ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
# 可以通过 'image://url' 设置为图片,其中 URL 为图片的链接,或者 dataURI。
# 可以通过 'path://' 将图标设置为任意的矢量路径。
# 这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。
# 路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。
# 可以从 Adobe Illustrator 等工具编辑导出。
symbol: str = "circle",
# 标记的大小。
symbol_size: Union[Numeric, Sequence[Numeric]] = 13,
# 标记的旋转角度(而非弧度)。正值表示逆时针旋转。
symbol_rotate: Optional[Numeric] = None,
# 如果 symbol 是 path:// 的形式,是否在缩放时保持该图形的长宽比。
symbol_keep_aspect: bool = False,
# 标记相对于原本位置的偏移。
symbol_offset: Optional[Sequence[Union[str, Numeric]]] = None,
# 『当前项』(checkpoint)的颜色。
color: str = "#c23531",
# 『当前项』(checkpoint)的边框宽度。
border_width: Numeric = 5,
# 『当前项』(checkpoint)的边框颜色。
border_color: str = "rgba(194,53,49,0.5)",
# 『当前项』(checkpoint)在 timeline 播放切换中的移动,是否有动画。
is_animation: bool = True,
# 『当前项』(checkpoint)的动画时长。
animation_duration: Numeric = 300,
# 『当前项』(checkpoint)的动画的缓动效果。
animation_easing: str = "quinticInOut",
)
3.时间轴控制按钮样式
class TimelineControlStyle(
# 是否显示『控制按钮』。设置为 false 则全不显示。
is_show: bool = True,
# 是否显示『播放按钮』。
is_show_play_button: bool = True,
# 是否显示『后退按钮』。
is_show_prev_button: bool = True,
# 是否显示『前进按钮』。
is_show_next_button: bool = True,
# 『控制按钮』的尺寸,单位为像素(px)。
item_size: Numeric = 22,
# 『控制按钮』的间隔,单位为像素(px)。
item_gap: Numeric = 12,
# 『控制按钮』的位置。
# 当 timeline.orient 为 'horizontal'时,'left'、'right'有效。
# 当 timeline.orient 为 'vertical'时,'top'、'bottom'有效。
position: str = "left",
# 『播放按钮』的『可播放状态』的图形。
# 可以通过 'image://url' 设置为图片,其中 URL 为图片的链接,或者 dataURI。
# 可以通过 'path://' 将图标设置为任意的矢量路径。
# 这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。
# 路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。
# 可以从 Adobe Illustrator 等工具编辑导出。
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 举例
1.时间轴&轴饼图
from pyecharts import options as opts
from pyecharts.charts import Pie, Timeline
from pyecharts.faker import Faker
attr = Faker.choose()
tl = Timeline()
for i in range(2015, 2020):
pie = (
Pie()
.add(
"商家A",
[list(z) for z in zip(attr, Faker.values())],
rosetype="radius",
radius=["30%", "55%"],
)
.set_global_opts(title_opts=opts.TitleOpts("某商店{}年营业额".format(i)))
)
tl.add(pie, "{}年".format(i))
tl.add_schema(is_auto_play=True, play_interval=1000) # 自动播放,跳动的间隔为1000ms
tl.render("timeline_pie.html")
01时间轴&轴饼图
2.时间轴&柱状图
from pyecharts import options as opts
from pyecharts.charts import Bar, Timeline
from pyecharts.commons.utils import JsCode
from pyecharts.faker import Faker
x = Faker.choose()
tl = Timeline()
for i in range(2015, 2020):
bar = (
Bar()
.add_xaxis(x)
.add_yaxis("Shop A", Faker.values(),label_opts=opts.LabelOpts(position="right"))
.add_yaxis("Shop B", Faker.values(),label_opts=opts.LabelOpts(position="right"))
.reversal_axis() # 转置
.set_global_opts(
title_opts=opts.TitleOpts("{} 年销售额".format(i)),
graphic_opts=[
opts.GraphicGroup(
graphic_item=opts.GraphicItem(
rotation=JsCode("Math.PI / 4"),
bounding="raw",
right=100,
bottom=110,
z=100,
),
children=[
opts.GraphicRect(
graphic_item=opts.GraphicItem(
left="center", top="center", z=100
),
graphic_shape_opts=opts.GraphicShapeOpts(
width=400, height=50
),
graphic_basicstyle_opts=opts.GraphicBasicStyleOpts(
fill="rgba(0,0,0,0.3)"
),
),
opts.GraphicText(
graphic_item=opts.GraphicItem(
left="center", top="center", z=100
),
graphic_textstyle_opts=opts.GraphicTextStyleOpts(
text="{} 年销售额".format(i),
font="bold 26px Microsoft YaHei",
graphic_basicstyle_opts=opts.GraphicBasicStyleOpts(
fill="#fff"
),
),
),
],
)
],
)
)
tl.add(bar, "{} 年".format(i))
tl.add_schema(is_auto_play=True, play_interval=1000) # 自动播放,跳动的间隔为1000ms
tl.render("timeline_bar.html")
02时间轴&柱状图
3.时间轴&桑基图
from pyecharts import options as opts
from pyecharts.charts import Sankey, Timeline
from pyecharts.faker import Faker
tl = Timeline()
names = ("Shop A", "Shop B", "Shop C")
nodes = [{"name": name} for name in names]
for i in range(2015, 2020):
links = [
{"source": names[0], "target": names[1], "value": Faker.values()[0]},
{"source": names[1], "target": names[2], "value": Faker.values()[0]},
]
sankey = (
Sankey()
.add(
"销售额",
nodes,
links,
linestyle_opt=opts.LineStyleOpts(opacity=0.2, curve=0.5, color="source"),
label_opts=opts.LabelOpts(position="right"),
)
.set_global_opts(
title_opts=opts.TitleOpts(title="{} Shop(A, B, C)销售额".format(i))
)
)
tl.add(sankey, "{} 年".format(i))
tl.add_schema(is_auto_play=True, play_interval=1000) # 自动播放,跳动的间隔为1000ms
tl.render("timeline_sankey.html")
03时间轴&桑基图
4.时间轴&地图
from pyecharts import options as opts
from pyecharts.charts import Map, Timeline
from pyecharts.faker import Faker
tl = Timeline()
for i in range(2015, 2020):
map0 = (
Map()
.add("Shop A", [list(z) for z in zip(Faker.provinces, Faker.values())], "china")
.set_global_opts(
title_opts=opts.TitleOpts(title="全国 {} 年销售额".format(i)),
visualmap_opts=opts.VisualMapOpts(max_=200),
)
)
tl.add(map0, "{} 年".format(i))
tl.add_schema(is_auto_play=True, play_interval=1000) # 自动播放,跳动的间隔为1000ms
tl.render("timeline_map.html")
04时间轴&地图