常用配置项（二）

常用配置项（二）：增强图表交互与信息表达

小象实战讲义 · ECharts 数据可视化

在上一节中，我们学习了如何为图表添加标题、副标题以及动画效果。本节我们将深入探索更多强大的配置项，它们能显著提升图表的交互性与信息表达能力。通过配置区域缩放、坐标轴、工具箱以及系列级别的标签、标记线和标记点，你将能够制作出既能宏观浏览、又能微观洞察，且自带丰富分析工具的专业级图表。

💡 核心导读

• 区域缩放 (DataZoom)：掌握滑动条 (slide) 与内置缩放 (inside) 两种模式，实现图表数据的动态聚焦，尤其适用于时间序列数据的细节探索。
• 坐标轴与工具箱配置：学会为坐标轴命名，并启用功能强大的工具箱，实现图表保存、视图切换、数据查看等便捷操作。
• 系列配置项：灵活运用标签 (LabelOpts)、标记线 (MarkLineOpts) 和标记点 (MarkPointOpts)，直接在图表上高亮关键数据（如最大值、最小值、平均值或自定义阈值），增强数据的解读性。

1. 区域缩放配置项 (DataZoom)

当图表中的数据点过多，尤其是时间序列数据跨度很大时，我们常常需要关注某个特定时间段或数据区间的细节。DataZoom（区域缩放）配置项就是为了解决这个问题而生的。

在 pyecharts 中，DataZoomOpts 通常通过 set_global_opts() 方法进行全局配置。它主要有两种类型：

• type_='slider'：在图表下方（或指定位置）显示一个可拖动的滑动条，用户通过拖动滑块来改变显示的数据范围。这是默认类型。
• type_='inside'：内置缩放，用户将鼠标悬停在图表区域内，通过滚动鼠标滚轮即可进行缩放，界面更简洁。

下面我们通过一个柱状图示例来演示这两种效果。首先，我们创建一组模拟的时间序列数据。

# 导入必要的库
from pyecharts import options as opts
from pyecharts.charts import Bar
import pandas as pd

# 模拟时间序列数据：2024年1月到12月的两组数据
months = [f'{i}月' for i in range(1, 13)]
data_a = [45, 78, 56, 89, 67, 92, 110, 85, 73, 101, 88, 95]
data_b = [32, 65, 48, 76, 59, 81, 99, 70, 62, 87, 75, 82]

# 创建基础柱状图
bar_with_datazoom = (
    Bar()
    .add_xaxis(months)
    .add_yaxis("产品A销量", data_a)
    .add_yaxis("产品B销量", data_b)
    .set_global_opts(
        title_opts=opts.TitleOpts(title="2024年月度销量对比"),
        # 配置一个滑动条式的区域缩放
        datazoom_opts=opts.DataZoomOpts(),  # 默认即为 type_='slider'
    )
)

# 生成HTML文件并打印配置摘要
bar_with_datazoom.render("bar_with_slider.html")
print(f"图表类型: {type(bar_with_datazoom).__name__}")
print(f"X轴数据点: {len(months)} 个")
print(f"已配置 DataZoom 类型: slider")

图表类型: Bar
X轴数据点: 12 个
已配置 DataZoom 类型: slider

运行上述代码后，生成的图表下方会出现一个滑动条。拖动滑块，可以看到图表显示的月份范围随之变化，实现了对数据的“放大”和“缩小”查看。

接下来，我们体验 inside 类型，并演示如何同时使用两种缩放方式。

# 创建同时支持滑块和滚轮缩放的图表
bar_with_both_zoom = (
    Bar()
    .add_xaxis(months)
    .add_yaxis("产品A销量", data_a)
    .add_yaxis("产品B销量", data_b)
    .set_global_opts(
        title_opts=opts.TitleOpts(title="2024年月度销量对比 (双缩放模式)"),
        # 同时配置 slider 和 inside 类型的 DataZoom
        datazoom_opts=[
            opts.DataZoomOpts(),  # 滑块
            opts.DataZoomOpts(type_="inside"),  # 滚轮
        ]
    )
)

bar_with_both_zoom.render("bar_with_both_zoom.html")
print(f"图表类型: {type(bar_with_both_zoom).__name__}")
print(f"已配置 DataZoom 数量: 2 个 (slider 和 inside)")

现在，你既可以通过底部的滑块控制显示范围，也可以将鼠标移到图表上，用滚轮进行快速缩放，两者是联动的。

此外，DataZoomOpts 还可以通过 orient 参数设置为纵向 (orient='vertical')，放置在图表右侧，用于对 Y 轴数值范围进行筛选。

# 创建带有纵向Y轴缩放的图表
bar_with_vertical_zoom = (
    Bar()
    .add_xaxis(months[:6])  # 只使用前6个月数据，避免过度拥挤
    .add_yaxis("产品A销量", data_a[:6])
    .add_yaxis("产品B销量", data_b[:6])
    .set_global_opts(
        title_opts=opts.TitleOpts(title="上半年销量对比 (Y轴缩放)"),
        # 配置一个纵向的滑块，用于筛选Y轴数值
        datazoom_opts=[opts.DataZoomOpts(orient="vertical", range_start=0, range_end=80)],
    )
)

bar_with_vertical_zoom.render("bar_with_vertical_zoom.html")
print(f"图表类型: {type(bar_with_vertical_zoom).__name__}")
print(f"Y轴 DataZoom 初始范围: 0% 到 80%")

拖动右侧的纵向滑块，可以过滤掉Y轴上较高或较低的值，这对于快速聚焦于特定数值区间的数据点非常有用。

2. 坐标轴与工具箱配置

2.1 坐标轴配置项 (AxisOpts)

清晰的坐标轴标签是图表可读性的基础。使用 AxisOpts 可以轻松地为坐标轴添加名称、调整标签格式等。

# 配置坐标轴名称
bar_with_axis_name = (
    Bar()
    .add_xaxis(months[:6])
    .add_yaxis("产品A销量", data_a[:6])
    .add_yaxis("产品B销量", data_b[:6])
    .set_global_opts(
        title_opts=opts.TitleOpts(title="坐标轴配置示例"),
        # 配置X轴和Y轴
        xaxis_opts=opts.AxisOpts(name="月份", name_location="middle", name_gap=30),
        yaxis_opts=opts.AxisOpts(
            name="销量（单位：件）",
            # 为Y轴标签添加单位后缀
            axislabel_opts=opts.LabelOpts(formatter="{value} 件")
        ),
    )
)

bar_with_axis_name.render("bar_with_axis_name.html")
print(f"X轴名称: 月份")
print(f"Y轴名称: 销量（单位：件）")
print(f"Y轴标签格式: 数值 + '件'")

2.2 工具箱配置项 (ToolboxOpts)

工具箱是 ECharts 提供的一个强大交互组件，默认包含保存为图片、数据视图、动态类型切换、数据区域缩放等工具。启用它能为最终用户提供极大的便利。

# 启用默认工具箱
bar_with_toolbox = (
    Bar()
    .add_xaxis(months[:6])
    .add_yaxis("产品A销量", data_a[:6])
    .add_yaxis("产品B销量", data_b[:6])
    .set_global_opts(
        title_opts=opts.TitleOpts(title="工具箱功能演示"),
        xaxis_opts=opts.AxisOpts(name="月份"),
        yaxis_opts=opts.AxisOpts(name="销量"),
        # 启用工具箱
        toolbox_opts=opts.ToolboxOpts(),
    )
)

bar_with_toolbox.render("bar_with_toolbox.html")
print(f"已启用工具箱 (ToolboxOpts)")
print(f"工具箱默认包含工具: 保存图片、还原、数据视图、动态类型切换等")

生成的图表右上角会出现工具箱图标，点击后可以看到一系列工具：

• 保存图片：将当前图表视图导出为 PNG 格式的图片。
• 还原：重置所有交互操作（如缩放、图例筛选）到初始状态。
• 数据视图：在弹窗文本域中查看原始数据；开启编辑后，可修改数据并刷新回写到图表。
• 切换为折线图/柱状图/堆叠图：动态改变图表的展示类型。

你可以通过 feature 参数来定制工具箱中显示哪些功能，例如只保留“保存图片”和“数据视图”。

3. 系列配置项：标签、标记线与标记点

系列配置项作用于具体的某个数据系列，用于精细化控制该系列的表现形式。最常用的包括标签、标记线和标记点。

3.1 标签配置项 (LabelOpts)

标签用于在图形元素（如柱子的顶端）上显示其代表的具体数值。你可以控制其显示与否、字体、颜色、位置等。

# 控制标签的显示与样式
bar_with_label_config = (
    Bar()
    .add_xaxis(months[:6])
    .add_yaxis("产品A销量", data_a[:6])
    .add_yaxis("产品B销量", data_b[:6])
    .set_global_opts(title_opts=opts.TitleOpts(title="标签配置示例"))
    .set_series_opts(
        # 配置系列标签
        label_opts=opts.LabelOpts(
            is_show=True,  # 显示标签
            position="top",  # 标签位置在柱子顶部
            font_size=12,
            color="auto",  # 自动适应系列颜色
            # formatter 可以自定义标签显示内容，例如：{c} 代表数据值
            # formatter="{c}件"
        )
    )
)

bar_with_label_config.render("bar_with_label_config.html")
print(f"标签配置: 显示，位置顶部，字体大小12")
# 注意：当数据密集时，建议将 is_show 设为 False 以避免视觉混乱。

3.2 标记线配置项 (MarkLineOpts)

标记线用于在图表中绘制一条或多条参考线，以突出显示特定的阈值或统计值（如平均值、最小值、最大值或自定义数值）。这对于设定目标线或警示线非常有用。

# 添加标记线：平均线和自定义目标线
bar_with_markline = (
    Bar()
    .add_xaxis(months[:6])
    .add_yaxis("产品A销量", data_a[:6])
    .add_yaxis("产品B销量", data_b[:6])
    .set_global_opts(title_opts=opts.TitleOpts(title="标记线配置示例"))
    .set_series_opts(
        label_opts=opts.LabelOpts(is_show=False),  # 隐藏数值标签，让标记线更清晰
        # 配置标记线
        markline_opts=opts.MarkLineOpts(
            data=[
                opts.MarkLineItem(type_="average", name="平均值"),
                opts.MarkLineItem(y=80, name="目标线"),
            ],
            # 可以设置线的样式
            linestyle_opts=opts.LineStyleOpts(type_="dashed", color="red", width=2),
        )
    )
)

bar_with_markline.render("bar_with_markline.html")
print(f"标记线1: 类型=average, 名称=平均值")
print(f"标记线2: Y值=80, 名称=目标线")
print(f"线样式: 虚线，红色，宽度2")

运行后，图表中会为“产品A”和“产品B”两个系列分别绘制一条代表各自平均值的虚线，以及一条Y=80的红色目标虚线。将鼠标悬停在线上可以看到具体信息。

3.3 标记点配置项 (MarkPointOpts)

与标记线类似，标记点用于高亮显示数据系列中的特殊点，如最大值、最小值、平均值等。

# 添加标记点：最大值、最小值和平均值
bar_with_markpoint = (
    Bar()
    .add_xaxis(months[:6])
    .add_yaxis("产品A销量", data_a[:6])
    .add_yaxis("产品B销量", data_b[:6])
    .set_global_opts(title_opts=opts.TitleOpts(title="标记点配置示例"))
    .set_series_opts(
        label_opts=opts.LabelOpts(is_show=False),
        # 配置标记点
        markpoint_opts=opts.MarkPointOpts(
            data=[
                opts.MarkPointItem(type_="max", name="最大值"),
                opts.MarkPointItem(type_="min", name="最小值"),
                opts.MarkPointItem(type_="average", name="平均值"),
            ],
            # 可以设置点的符号和大小
            symbol="pin",  # 图钉形状
            symbol_size=50,
        )
    )
)

bar_with_markpoint.render("bar_with_markpoint.html")
print(f"标记点类型: max, min, average")
print(f"标记点符号: pin，大小: 50")

图表中会在每个系列的最大值、最小值和平均值对应的柱子上方显示一个图钉状的标记点，鼠标悬停可查看具体数值。

📝 动手练一练

1. 组合配置：创建一个折线图，展示某产品一周（周一至周日）的日活跃用户数（数据自拟）。要求：
   • 启用工具箱。
   • 为X轴和Y轴添加合适的名称。
   • 添加一条代表“周平均活跃用户”的标记线。
   • 用标记点标出“最高日活”和“最低日活”。

from pyecharts import options as opts
from pyecharts.charts import Line

# 模拟数据
days = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
dau = [1200, 1350, 1100, 1450, 1600, 1800, 1500]  # 日活跃用户

line_chart = (
    Line()
    .add_xaxis(days)
    .add_yaxis("日活跃用户", dau, is_smooth=True)
    .set_global_opts(
        title_opts=opts.TitleOpts(title="产品周活跃用户趋势"),
        xaxis_opts=opts.AxisOpts(name="星期"),
        yaxis_opts=opts.AxisOpts(name="用户数"),
        toolbox_opts=opts.ToolboxOpts(),
    )
    .set_series_opts(
        label_opts=opts.LabelOpts(is_show=True),
        markline_opts=opts.MarkLineOpts(
            data=[opts.MarkLineItem(type_="average", name="周平均")]
        ),
        markpoint_opts=opts.MarkPointOpts(
            data=[
                opts.MarkPointItem(type_="max", name="最高"),
                opts.MarkPointItem(type_="min", name="最低"),
            ]
        ),
    )
)

line_chart.render("weekly_dau_exercise.html")
print("图表已生成: weekly_dau_exercise.html")
print(f"数据点: {len(days)} 天")
print(f"最高日活: {max(dau)}")
print(f"最低日活: {min(dau)}")
print(f"平均日活: {sum(dau)/len(dau):.0f}")

图表已生成: weekly_dau_exercise.html
数据点: 7 天
最高日活: 1800
最低日活: 1100
平均日活: 1429

本章小结

本节我们深入学习了 pyecharts 中几类至关重要的配置项，它们将静态图表转变为功能丰富、交互性强的数据探索工具。

📋 行动清单

• 掌握 DataZoom 的应用场景：在时间序列或数据量大的图表中，熟练添加滑块或内置缩放，提升用户体验。
• 养成配置坐标轴的习惯：为每个坐标轴添加清晰的名称和合适的单位，这是制作专业图表的基本功。
• 善用工具箱与系列配置：在需要交付给他人的图表中启用工具箱；在数据分析图表中，灵活使用标记线和标记点来高亮关键信息（如均值、目标值、极值），让洞察一目了然。

通过本节的学习，你已经掌握了定制化图表外观与交互的核心技能。在接下来的章节中，我们将进入“时间趋势可视化”的世界，学习如何用折线图、面积图等更好地展现数据随时间变化的规律。

—— 小象教研组