内容介绍
本文介绍基于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 optsfrom pyecharts.charts import Pie, Timelinefrom pyecharts.faker import Fakerattr = Faker.choose()tl = Timeline()for i in range(, ):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)# 自动播放，跳动的间隔为1000mstl.render("timeline_pie.html")
01时间轴&轴饼图
2.时间轴&柱状图
from pyecharts import options as optsfrom pyecharts.charts import Bar, Timelinefrom mons.utils import JsCodefrom pyecharts.faker import Fakerx = Faker.choose()tl = Timeline()for i in range(, ):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)# 自动播放，跳动的间隔为1000mstl.render("timeline_bar.html")
02时间轴&柱状图
3.时间轴&桑基图
from pyecharts import options as optsfrom pyecharts.charts import Sankey, Timelinefrom pyecharts.faker import Fakertl = Timeline()names = ("Shop A", "Shop B", "Shop C")nodes = [{"name": name} for name in names]for i in range(, ):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)# 自动播放，跳动的间隔为1000mstl.render("timeline_sankey.html")
03时间轴&桑基图
4.时间轴&地图
from pyecharts import options as optsfrom pyecharts.charts import Map, Timelinefrom pyecharts.faker import Fakertl = Timeline()for i in range(, ):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)# 自动播放，跳动的间隔为1000mstl.render("timeline_map.html")
04时间轴&地图
