仪表盘相关图表

仪表盘与水球图：关键指标的可视化呈现

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

在数据大屏或管理驾驶舱的设计中，除了复杂的组合图表，我们常常需要一种更直观、更聚焦的方式来展示核心关键指标（KPI），例如项目完成率、目标达成度或实时监控值。本节将介绍两种专为此场景设计的图表：仪表盘（Gauge）和水球图（Liquid）。它们能够以简洁、醒目的视觉形式，将单一或少量关键数据点直观地传达给观众，是构建数据大屏不可或缺的元素。

💡 核心导读

• 仪表盘（Gauge）：模拟物理仪表，用于展示单个关键指标（如完成率）的当前值及其在设定范围内的位置。重点掌握其数据格式、标签与数值位置的调整方法。
• 水球图（Liquid）：以动态波浪填充效果展示百分比数据，视觉冲击力强。了解其适用于单百分比或多百分比数据的场景，以及如何调整其形状。
• 图表选型：理解仪表盘和水球图在展示“进度”、“比率”类关键指标时的适用场景与视觉差异。
• 主题设置：学习如何通过 InitOpts 为整个图表应用预设的视觉主题，快速改变图表的整体风格以适应不同场景。

一、仪表盘（Gauge）：精准指示关键指标

仪表盘图表模拟了汽车或仪器上的速度表、油量表，通过指针指向刻度来直观展示一个数值在特定区间（通常是0%-100%）内的位置。它非常适合用来展示KPI完成率、项目进度、资源利用率等单一关键指标。

1. 数据格式与基础绘制

仪表盘的数据格式非常简单，通常是一个包含一个或多个 (名称, 数值) 对的列表。每个对子对应一个独立的仪表盘（虽然通常只用一个）。

让我们从最基础的绘制开始：

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

# 基础仪表盘
gauge_basic = Gauge()
gauge_basic.add(
    series_name="",  # 系列名，通常为空，因为只有一个指标
    data_pair=[("完成率", 66.6)],  # 数据格式：(标签, 数值)
)

# 调整标签、数值位置与半径
gauge_adjusted = Gauge()
gauge_adjusted.add(
    series_name="",
    data_pair=[("完成率", 85.3)],
    title_label_opts=opts.GaugeTitleOpts(offset_center=[0, "30%"], font_size=16),
    detail_label_opts=opts.GaugeDetailOpts(
        offset_center=[0, "-40%"],
        font_size=24,
        formatter="{value}%"
    ),
    radius="80%"
)

print("已创建两个仪表盘：基础版和位置调整版")
print("调整版将标签下移 30%，数值上移 40%，半径设为 80%")

已创建两个仪表盘：基础版和位置调整版
调整版将标签下移 30%，数值上移 40%，半径设为 80%

运行上述代码生成的图表，你会发现一个基本问题：代表数值的指针和代表标签的“完成率”文字会重叠在圆心位置，影响阅读。这并非Bug，而是默认布局如此，需要我们手动调整它们的位置。

2. 调整标签与数值位置

为了解决重叠问题，我们需要使用 title_label_opts（标签配置）和 detail_label_opts（数值详情配置）来分别调整“完成率”标签和“66.6”数值的位置。它们都通过 offset_center 参数来设置相对于仪表盘圆心的偏移。

• offset_center: 一个包含 [x, y] 的列表，表示相对于圆心（0, 0）的偏移百分比。正值向右/下偏移，负值向左/上偏移。

上面代码中的 gauge_adjusted 已经把标签和数值分置上下两侧。通过调整 offset_center，你可以将标签和数值清晰地放置在仪表盘的指定位置，避免重叠；radius 参数则用于控制整个仪表盘相对于绘图容器的大小。

二、水球图（Liquid）：动态展示百分比进度

水球图通过波浪起伏的液体填充效果来展示百分比数据，视觉上生动且富有科技感，非常适合在数据大屏中展示加载进度、达成率或饱和度。

1. 基础水球图

水球图的数据是一组百分比数值（0到1之间的小数），每个数值对应一个波浪。虽然可以展示多个波浪（对应多个百分比），但通常建议只使用一个，以避免波浪重叠导致信息辨识度下降。

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

# 基础水球图
liquid_basic = Liquid()
liquid_basic.add(
    series_name="任务进度",
    data=[0.68],  # 单个百分比数据，68%
)

# 不同形状与边框配色
liquid_circle = Liquid()
liquid_circle.add(
    "圆形",
    [0.75],
    shape="circle",
    outline_itemstyle_opts=opts.ItemStyleOpts(border_color='#156ACF', border_width=2)
)
liquid_rect = Liquid()
liquid_rect.add(
    "矩形",
    [0.75],
    shape="rect",
    outline_itemstyle_opts=opts.ItemStyleOpts(border_color='#c72e29', border_width=2)
)

print("已创建基础水球图、圆形水球图和矩形水球图")
print("基础水球图显示任务进度 68%；两个对比图均为 75%")

已创建基础水球图、圆形水球图和矩形水球图
基础水球图显示任务进度 68%；两个对比图均为 75%

生成的图表会有一个动态上升的波浪，最终稳定在68%的填充高度，生动地表示了进度。

2. 多波浪与形状变换

虽然不推荐，但水球图支持同时展示多个百分比，每个百分比以不同颜色的波浪表示。此外，水球图的容器形状也可以进行更改。

上面的同一个代码块已经创建了圆形和矩形两个对比图。shape 参数还支持 'roundRect'（圆角矩形）、'triangle'（三角形）等形状，可根据大屏的整体设计风格选择。

三、全局主题设置：一键切换视觉风格

pyecharts 提供了丰富的预设主题，可以快速改变图表整体的配色、字体等视觉风格，无需手动调整每个组件的颜色。这对于需要统一更换大屏或报告风格的情况非常有用。

主题通过创建图表时的 InitOpts 参数进行设置。

from pyecharts.charts import Line
from pyecharts import options as opts
from pyecharts.globals import ThemeType
from pyecharts.faker import Faker
import numpy as np

# 固定随机种子，确保示例数据可复现
np.random.seed(42)
x_data = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
y_data = np.random.randint(20, 80, size=7).tolist()

# 使用 LIGHT 主题
chart_light = Line(
    init_opts=opts.InitOpts(
        theme=ThemeType.LIGHT,  # 应用明亮主题
        width="600px",
        height="400px"
    )
)
chart_light.add_xaxis(x_data)
chart_light.add_yaxis("销售额", y_data)
chart_light.set_global_opts(title_opts=opts.TitleOpts(title="明亮主题下的折线图"))

# 使用 DARK 主题
chart_dark = Line(
    init_opts=opts.InitOpts(
        theme=ThemeType.DARK,   # 应用暗黑主题
        width="600px",
        height="400px"
    )
)
chart_dark.add_xaxis(x_data)
chart_dark.add_yaxis("销售额", y_data)
chart_dark.set_global_opts(title_opts=opts.TitleOpts(title="暗黑主题下的折线图"))

print("已创建 LIGHT 与 DARK 两个主题的折线图")
print("主题会统一影响背景、文字、坐标轴和系列配色")

已创建 LIGHT 与 DARK 两个主题的折线图
主题会统一影响背景、文字、坐标轴和系列配色

pyecharts 内置了多种主题，如 LIGHT, DARK, CHALK, PURPLE_PASSION, ROMA 等。你可以通过 官方主题展示页面 查看所有可选主题的视觉效果，并选择最适合你项目的一个。

📝 动手练一练

1. 仪表盘定制：创建一个仪表盘，展示“用户满意度”为92%。要求将标签“用户满意度”放置在仪表盘正上方（偏移 [0, "-30%"]），将数值“92%”放置在正下方（偏移 [0, "30%"]），并将仪表盘半径设置为“70%”。请写出关键配置代码。

点击查看参考答案

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

chart = Gauge()
chart.add(
    series_name="",
    data_pair=[("用户满意度", 92)],
    title_label_opts=opts.GaugeTitleOpts(
        offset_center=[0, "-30%"],  # 标签在上方
        font_size=16
    ),
    detail_label_opts=opts.GaugeDetailOpts(
        offset_center=[0, "30%"],   # 数值在下方
        font_size=24,
        formatter="{value}%"
    ),
    radius="70%"
)
print("已配置：标签偏移 [0, '-30%']，数值偏移 [0, '30%']，半径 70%")

已配置：标签偏移 [0, '-30%']，数值偏移 [0, '30%']，半径 70%

2. 水球图应用：假设有一个“数据存储空间使用率”为78.5%，请用矩形（rect）形状的水球图进行展示，并去掉外边框（设置 is_outline_show=False）。

from pyecharts.charts import Liquid

chart = Liquid()
chart.add(
    series_name="存储使用率",
    data=[0.785],  # 78.5%
    shape="rect",
    is_outline_show=False  # 不显示外边框
)
print("已创建矩形水球图，并关闭外边框")

已创建矩形水球图，并关闭外边框

本章小结

本节我们学习了两种用于突出显示关键指标的特种图表：仪表盘（Gauge）和水球图（Liquid）。它们虽然绘制的数据量小，但在数据大屏和报告的关键位置扮演着“画龙点睛”的角色。同时，我们也掌握了通过 InitOpts 设置全局主题的方法，能够快速统一和切换可视化项目的视觉风格。

📋 行动清单

• 掌握配置：能够独立配置仪表盘的标签和数值位置，解决默认重叠问题。
• 正确选型：根据“展示精确刻度位置”或“展示动态百分比进度”的需求，在仪表盘和水球图之间做出合适选择。
• 应用主题：在创建图表时，尝试使用至少两种不同的内置主题（如 LIGHT 和 DARK），观察其对图表整体风格的影响。

—— 小象教研组