pyecharts源码解读（14）图表类包charts之组合图表：时间线轮播TimeLine

关注

原创最新推荐文章于 2026-09-19 14:52:12 发布 3.1w 阅读 AI 写同款· GEO 优化 ›

快速绘制动态排序图 — Pyecharts 高级组件 Timeline 实现！之前写过一篇关于Python 制作动态排序图的教程，里面利用的是 Matplotlib 中的 animation 函数，文章内容可参考动态排序图的详细制作教程，动态排序图的最终部分效果如下：今天文章将用另外一种Python 软件包 Pyecharts，来实现类似效果，效果如下：在整个动态图的绘制过程，主要用到了 Pyecharts 的 Timeline 高级组件，该组件与 Matplotlib 中 animatation 函数原理相同，把数据以时间作为唯一变量，在不同时间点下其它数据条目是不一样阅读详情

当前pyecharts的版本为1.9.0。

概述

pyecharts/charts/composite_charts/包中的四个模块分别定义了组合图表类，其中pyecharts/charts/composite_charts/timeline.py模块只定义了时间线类Timeline。

Timeline类继承自图表基类Base，作用为在一个echarts实例中利用2×2网格布局同时绘制4个数据系列。即实现ECharts中的直角坐标系grid功能。
注意！网格上仅支持绘制折线图，柱状图，散点图（气泡图）。

Grid类的签名为class Grid( init_opts: opts.InitOpts = opts.InitOpts())。

Grid类的属性和方法大多继承自Base类，主要添加了add方法。

class pyecharts.charts.Timeline

class Timeline(
    # 初始化配置项，参考 `global_options.InitOpts`
    init_opts: opts.InitOpts = opts.InitOpts()
)

func pyecharts.charts.Timeline.add_schema

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,
)

func pyecharts.charts.Timeline.add

def add(
    # 图表实例
    chart: Base, 

    # 时间点
    time_point: str
)

from pyecharts.charts import Bar, Timeline

a = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
data = {
    2014 : [800, 600, 901, 1234, 1290, 1330, 1620],
    2015 : [700, 660, 920, 1204, 1250, 1000, 1420]
}
tl = Timeline()
for i in data.keys():
    bar = Bar()
    bar.add_xaxis(a)
    bar.add_yaxis("",data.get(i))
    bar.set_global_opts({"text":"{}年销售额".format(i)})
    tl.add(bar,"{}年".format(i))
tl.add_schema(is_auto_play=True)
tl.render()

from pyecharts.charts import Line, Timeline

a = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
b1 = [5, 20, 36, 10, 75, 90]
b2 = [7, 25, 31, 14, 65, 100]

line1 = Line()
line1.add_xaxis(a)
line1.add_yaxis("", b1)

line2 = Line()
line2.add_xaxis(a)
line2.add_yaxis("", b2)

tl = Timeline()
tl.add(line1,"1")
tl.add(line2,"2")
tl.render_notebook()

from ... import options as opts
from ... import types
from ...charts.chart import Base


class Timeline(Base):
    """
    `Timeline` provides functions like switching and playing between multiple charts.
    """

    def __init__(self, init_opts: types.Init = opts.InitOpts()):
        super().__init__(init_opts=init_opts)
        self.options = {"baseOption": {"series": [], "timeline": {}}, "options": []}
        self.add_schema()
        self._time_points: types.Sequence = []

    def add_schema(
        self,
        axis_type: str = "category",
        orient: str = "horizontal",
        symbol: types.Optional[str] = None,
        symbol_size: types.Optional[types.Numeric] = None,
        play_interval: types.Optional[types.Numeric] = None,
        control_position: str = "left",
        is_auto_play: bool = False,
        is_loop_play: bool = True,
        is_rewind_play: bool = False,
        is_timeline_show: bool = True,
        is_inverse: bool = False,
        pos_left: types.Optional[str] = None,
        pos_right: types.Optional[str] = None,
        pos_top: types.Optional[str] = None,
        pos_bottom: types.Optional[str] = "-5px",
        width: types.Optional[str] = None,
        height: types.Optional[str] = None,
        linestyle_opts: types.Union[opts.LineStyleOpts, dict, None] = None,
        label_opts: types.Optional[opts.LabelOpts] = None,
        itemstyle_opts: types.ItemStyle = None,
        graphic_opts: types.Graphic = None,
        checkpointstyle_opts: types.TimeLinkCheckPoint = None,
        controlstyle_opts: types.TimeLineControl = None,
    ):
        self.options.get("baseOption").get("timeline").update(
            {
                "axisType": axis_type,
                "orient": orient,
                "autoPlay": is_auto_play,
                "controlPosition": control_position,
                "loop": is_loop_play,
                "rewind": is_rewind_play,
                "show": is_timeline_show,
                "inverse": is_inverse,
                "symbol": symbol,
                "symbolSize": symbol_size,
                "playInterval": play_interval,
                "left": pos_left,
                "right": pos_right,
                "top": pos_top,
                "bottom": pos_bottom,
                "width": width,
                "height": height,
                "lineStyle": linestyle_opts,
                "label": label_opts,
                "itemStyle": itemstyle_opts,
                "graphic": graphic_opts,
                "checkpointStyle": checkpointstyle_opts,
                "controlStyle": controlstyle_opts,
            }
        )
        return self

    def add(self, chart: Base, time_point: str):
        for dep in chart.js_dependencies.items:
            self.js_dependencies.add(dep)
        self._time_points.append(time_point)

        self.options.get("baseOption").get("timeline").update(data=self._time_points)
        self.options.get("options").append(
            {
                "backgroundColor": chart.options.get("backgroundColor"),
                "legend": chart.options.get("legend"),
                "series": chart.options.get("series"),
                "xAxis": chart.options.get("xAxis"),
                "yAxis": chart.options.get("yAxis"),
                "title": chart.options.get("title"),
                "tooltip": chart.options.get("tooltip"),
                "visualMap": chart.options.get("visualMap"),
                "color": chart.options.get("color"),
                "graphic": chart.options.get("graphic"),
                "bmap": chart.options.get("bmap"),
            }
        )
        self.__check_components(chart)
        self.options.get("baseOption").update(series=chart.options.get("series"))
        return self

    def __check_components(self, chart: Base):
        components = [
            "grid",
            "xAxis",
            "yAxis",
            "polar",
            "radiusAxis",
            "geo",
            "angleAxis",
            "radar",
            "visualMap",
            "dataZoom",
            "parallelAxis",
        ]

        for component in components:
            c = chart.options.get(component, None)
            if c is not None:
                self.options.get("baseOption").update({component: c})