内容介绍

本文介绍基于 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")

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

 

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

 

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