企业官网建设流程全解析

bottom CPU 图形组件（CPU Graph Widget）完全指南：图例切换、缩放绑定与配置项解析

【免费下载链接】bottomYet another cross-platform graphical process/system monitor.项目地址: https://gitcode.com/GitHub_Trending/bo/bottom

bottom（Yet another cross-platform graphical process/system monitor）的 CPU Widget 用于将 CPU 使用率以百分比折线图的形式随时间绘制出来，是本项目中最常用的可视化组件之一。本文将基于官方使用文档与仓库源码，系统讲解 CPU Widget 的组成结构、键盘/鼠标交互绑定，以及[cpu]配置节下全部参数的默认值与取值，帮助你快速掌握从"查看多核曲线"到"定制默认图例项"的完整玩法。

CPU Widget 的组成：图（Graph）与图例（Legend）

CPU Widget 由两个部分组成：

• 图（Graph）：以百分比形式展示当前选中条目的使用率随时间变化的数据，纵轴为使用率百分比，横轴为时间。
• 图例（Legend）：列出所有可展示在图上的条目，并附带每个条目的最近一次使用率百分比（"All" 选项除外）。

图例的条目与数据组织在源码中定义得非常清晰。在 src/widgets/cpu_graph.rs 中，图例数据被建模为CpuWidgetTableData枚举：

pub enum CpuWidgetTableData { All, Entry { data_type: CpuDataType, usage: f32 }, }

其中All对应列表最顶部的"全部"选项，Entry则对应每个 CPU 核心/线程或平均（AVG）条目，usage记录的是该条目最后一次采集到的使用率。set_legend_data方法（见 src/widgets/cpu_graph.rs）会把"All"选项与各 CPU 条目拼接成完整图例数据源。

图例中每个条目的显示文本由to_cell_text决定（见 src/widgets/cpu_graph.rs）：Avg条目显示为 "AVG"，单个核心条目在宽度足够时显示为 "CPU0""CPU1" 等，空间不足时（宽度小于断点值 5）退化为只显示索引数字；使用率列则依据show_decimal配置格式化为带一位小数或不带小数的百分比。此外，图例条目的颜色由style_row分配（src/widgets/cpu_graph.rs）：All使用all_cpu_colour（默认绿色），Avg使用avg_cpu_colour（默认红色），各核心则按顺序循环使用cpu_colour_styles调色板，在 src/options/config/style/themes/default.rs 中可以看到默认调色板是一组 LightMagenta、LightYellow、LightCyan、LightGreen、LightBlue、Cyan、Green、Blue 的颜色轮换。

选择要显示的条目

用户既可以用键盘也可以用鼠标在图例中滚动，选择要显示在曲线图上的条目：

• 图例中每个 CPU 核心/线程以及 "AVG"（平均）条目都可被单独选中，曲线图上只绘制当前选中条目。
• 选中 "All" 选项时，所有条目会同时绘制在图上。如果你拥有大量核心/线程，全部叠加显示可能会变得难以分辨——这正是官方文档特别提示的注意点。

在图例顶部固定存在一个 "All" 行，其后才依次排列各 CPU 条目，这与源码中的ALL_POSITION: usize = 0、AVG_POSITION: usize = 1两个常量（见 src/canvas/widgets/cpu_graph.rs）以及generate_points的索引偏移逻辑（src/canvas/widgets/cpu_graph.rs）完全对应：当选中 "All"（索引 0）时绘制全部时间序列曲线；否则只绘制current_scroll_position - 1对应的那一条曲线，并据show_avg_cpu决定是否对 AVG 条目应用独立配色。

调整显示的时间范围

CPU 曲线图的横轴时间范围同样支持通过键盘或鼠标调整，范围从30 秒到 600 秒。

时间范围的底层实现位于时间序列组件中。CPU Widget 在创建状态时会通过TimeseriesConfig读取全局配置（见 src/widgets/cpu_graph.rs）：

let ts_config = TimeseriesConfig { time_interval: config.time_interval, retention_ms: config.retention_ms, autohide_time: config.autohide_time, default_time_value: config.default_time_value, };

其中default_time_value控制初始时间跨度（示例配置中为"60s"），time_delta控制每次缩放操作的增减量（示例配置中为15000毫秒，即 15 秒），retention控制数据保留时长（示例配置为"10m"）。这些参数均来自 src/options/config/flags.rs，可在配置文件的全局节中修改。

键盘绑定（Key bindings）

注意：bottom 的键位绑定通常是区分大小写的。

曲线图（Graph）区

图例（Legend）区

鼠标绑定（Mouse bindings）

曲线图（Graph）区

图例（Legend）区

通过配置文件定制 CPU Widget

如果你希望改变 CPU 图形组件的默认行为，可以在配置文件中的[cpu]节下进行配置。以下参数均定义于 src/options/config/cpu.rs 的CpuConfig结构体，并在 sample_configs/default_config.toml 中给出了完整示例。

cpu.default：默认选中的曲线

通过cpu.default可配置启动时默认显示哪条 CPU 曲线。默认值为"all"（显示所有条目）。

[cpu] # "all"（默认）、"average"/"avg" 三选一 default = "average"

从源码看，该字段由CpuDefault枚举解析（src/options/config/cpu.rs），serde的alias = "avg"使其同时接受"average"与"avg"两种写法，并在default = "all"时使用默认变体。选中"average"时，CpuWidgetState::new会将表格的初始绘制索引设为 1（即 AVG 位置），实现启动即显示平均曲线（src/widgets/cpu_graph.rs）。对应的解析测试覆盖了空配置、"all"、"avg"、"average"四种情形（src/options/config/cpu.rs）。

cpu.show_decimal：使用率是否显示小数

通过cpu.show_decimal控制 CPU 使用率数值是否显示一位小数。默认值为false。

[cpu] show_decimal = true

该值在构建图例"Use"列时传入CpuWidgetColumn::Use { show_decimal }（src/widgets/cpu_graph.rs），格式化时若为true则输出{:.1}%保留一位小数，否则输出{:.0}%取整（src/widgets/cpu_graph.rs）。

cpu.hide_avg_cpu：隐藏平均 CPU 条目

通过cpu.hide_avg_cpu完全隐藏平均 CPU 条目。默认值为false。

[cpu] hide_avg_cpu = true

该配置会影响曲线图的生成：在generate_points中，show_avg_cpu决定 AVG 条目是否占用独立的图例位置偏移（AVG_POSITION），隐藏后核心条目的颜色索引不再为平均值留出偏移位（src/canvas/widgets/cpu_graph.rs）。注意：该选项与全局的hide_avg_cpu相关，后者已标记为废弃，见 src/options/config/flags.rs 与 sample_configs/default_config.toml。

cpu.left_legend：图例是否置于左侧

通过cpu.left_legend将 CPU 曲线图图例放置到左侧。默认值为false（图例在右侧）。

[cpu] left_legend = true

绘制逻辑中，draw_cpu会将组件宽度按 15% 的比例分配给图例（legend_width = draw_loc.width * 0.15），并根据该配置交换图例与曲线的水平布局顺序（src/canvas/widgets/cpu_graph.rs）；当可用宽度过小（图例宽度小于 6 个字符）时会直接跳过图例绘制（src/canvas/widgets/cpu_graph.rs）。

cpu.basic_average_cpu_row：基础模式下平均 CPU 独立成行

在基础模式（basic mode）下，通过cpu.basic_average_cpu_row为平均 CPU 条目分配专属行。默认值为false。

[cpu] basic_average_cpu_row = true

该参数对应源码中标记为废弃的average_cpu_row（src/options/config/flags.rs），在 sample_configs/default_config.toml 中明确注释为"已废弃，请改用 cpu.basic_average_cpu_row"。

配置文件的存放位置

以上所有配置都需要写入 bottom 的配置文件bottom.toml。若未通过命令行参数指定，bottom 会自动在以下默认位置查找（参见 docs/content/configuration/config-file/index.md）：

如果配置文件不存在，bottom 会自动在该位置生成一份包含默认值的配置文件；同时项目还提供了 JSON Schema 支持（位于 schema 目录，按版本组织），配合 IDE 可实现配置项的自动补全与校验。

小结

CPU Widget 是 bottom 中最直观的实时负载可视化入口：左侧（或右侧）图例负责条目选择与最近使用率展示，曲线区负责时间序列渲染，配合+/-/=、j/k、gg/G等键位与鼠标滚轮即可快速完成放大、缩小、切换核心等操作。若希望改变默认体验，只需在bottom.toml的[cpu]节中设置default、show_decimal、hide_avg_cpu、left_legend、basic_average_cpu_row五个选项即可——完整可参考 sample_configs/default_config.toml，实现细节可从 src/widgets/cpu_graph.rs 与 src/canvas/widgets/cpu_graph.rs 中继续深入。

【免费下载链接】bottomYet another cross-platform graphical process/system monitor.项目地址: https://gitcode.com/GitHub_Trending/bo/bottom