第 8 章：数据可视化与大屏交互
本章定位
可视化不是只调用 ECharts，而是理解数据转换、坐标系统、渲染性能和交互回放。AI 系统可以用可视化表达 Agent Trace、工具状态和成本。
必须掌握清单
必须掌握
能区分 Canvas、SVG 和 WebGL 的适用场景。
相关答案： SVG 保留可访问的 DOM 节点，适合元素较少且交互精细的图；Canvas 是立即模式像素绘制，适合大量元素和高频重绘，但命中检测需自行实现；WebGL 利用 GPU，适合超大规模点、三维或复杂着色，开发成本最高。
具体例子： 交互式组织架构图可用 SVG，数万点实时波形适合 Canvas，百万粒子或三维地图才考虑 WebGL；普通柱状图不必为追求“性能”直接上 WebGL。
能处理大数据量降采样和视口裁剪。
相关答案： 降采样在保留趋势与极值的前提下减少数据点，视口裁剪只绘制当前可见区域；两者分别降低数据处理量和绘制量。策略必须匹配业务，不能用简单平均抹掉异常峰值。
具体例子： 一天百万个监控点按屏幕像素桶保留最小值和最大值，缩放后重新选择粒度；时间线只渲染可见时间窗内及边界相交的事件。
能设计数据驱动的图形，而不是手写固定 DOM。
相关答案： 数据驱动渲染把数据映射为位置、尺寸、颜色和形状，通过统一的 enter、update、exit 或场景更新处理变化。这样视觉结果由状态决定，便于复用、动画和测试。
具体例子： 柱状图根据
data.map生成柱子并用比例尺计算高度；数据增加时进入新柱，数值变化时更新已有柱，删除时退出，而不是手写十个固定<div>。能表达时间序列中的事件和状态。
相关答案： 事件是发生在某个时刻的离散事实，状态是在一段时间内持续的区间；可视化模型应保留时间戳、持续时间、类别和关联 ID，并支持排序、聚合及时区处理。
具体例子： Agent Trace 中“发起工具调用”是事件，“工具运行中”是从开始到结束的状态区间；同一
toolCallId将开始、结果和错误连接成一条时间线。能让可视化成为调试工具，而不只是展示层。
相关答案： 调试型可视化需要从图形追溯原始数据，支持筛选、缩放、关联高亮和异常定位，并显示足够的标识与时间信息。只有漂亮汇总而无法下钻，不能帮助解释问题。
具体例子： 点击一段高延迟 trace 后显示 request ID、原始事件和耗时分解，同时高亮对应网络请求；开发者可由图跳回日志，而不是只看到一条红色曲线。
原理讲解
Canvas 通过像素绘制，适合大量节点和频繁重绘。SVG 保留 DOM 节点，适合交互性强但节点较少的场景。WebGL 适合真正需要 GPU 的复杂渲染，不应为了一个普通图表引入复杂度。
大数据量下先做数据转换，例如采样、聚合和分段，再交给渲染层。不要试图把十万个点全部变成可交互 DOM。
Agent Trace 是典型的事件时间线，节点类型可以区分用户消息、助手消息、工具调用、工具结果和错误。
代码示例或模板
function drawEvents(
context: CanvasRenderingContext2D,
events: Array<{ time: number; color: string }>,
) {
context.clearRect(0, 0, 800, 200);
for (const event of events) {
context.fillStyle = event.color;
context.fillRect(event.time, 80, 8, 8);
}
}这是最小 Canvas 时间线，真实实现还需要坐标映射、缩放、tooltip 和视口裁剪。
AI Agent 概念对照
- Agent Trace 对应事件时间线。
- 工具状态对应节点颜色。
- token 成本对应数据指标。
- Session 回放对应时间轴播放和缩放。
面试追问
1. 十万个点用 Canvas 还是 SVG？
查看深度解析
标准回答： 通常先选 Canvas 或 WebGL，而不是为十万个点创建十万个 SVG DOM 节点；但最终取决于同时可见点数、更新频率、交互和设备。更优先的是降采样、聚合和视口裁剪。
原理展开： SVG 的 DOM 和布局成本随节点数增加，Canvas 一次绘制更轻但命中检测与可访问性需自建；WebGL 适合更大规模和 GPU 管线。
工程示例： 百万时间序列按像素桶保留极值，屏幕上只绘制约两千点；缩放后重新采样，少量标注再用 DOM 覆盖。
常见误区： 不做数据处理就换渲染技术，十万个交互目标和 tooltip 计算仍然昂贵。
继续追问： Canvas 如何做点击命中？
回答方向： 使用空间索引、离屏颜色拾取或按坐标反算最近数据点，不要每次点击线性遍历全部点。
2. 怎样避免 ECharts 配置变成不可维护的巨石？
查看深度解析
标准回答： 将领域数据转换、视觉 token、通用 option builder 和页面级组合分层；用有类型的小函数生成 series、axis、tooltip，而不是在组件中维护一个包含业务判断的巨大对象。
原理展开： 配置应是派生结果，源数据和交互状态独立保存；统一主题处理颜色字体，事件处理通过稳定适配层绑定。
工程示例： buildLatencySeries(data)、buildTimeAxis(range) 和 chartTheme 分别测试，页面只组合并传入用户筛选状态。
常见误区： 过度抽象成万能 DSL，调用者仍要理解几十个隐藏参数；或深度 merge 旧 option 留下脏状态。
继续追问： option 更新如何避免整图重建？
回答方向： 保持 series id 稳定，明确 replaceMerge/notMerge 策略，只更新变化数据；用性能记录验证，而非猜测。
3. 时间轴动画如何和实际事件顺序一致？
查看深度解析
标准回答： 先按权威时间戳和同时间戳的稳定序号排序，把真实事件时间映射到动画时间；动画只是事件日志的投影，播放、暂停和跳转都从同一事件源重算状态。
原理展开： 分布式时钟可能偏移，因此最好使用服务端序号或因果 ID；动画帧丢失时应跳到正确状态，不应让视觉插值改写事实顺序。
工程示例： Agent trace 使用 sequence 排序，真实 10 秒压缩为 2 秒播放；拖动到任意位置时从 checkpoint 加后续事件重放。
常见误区： 用事件到达浏览器的顺序代替发生顺序，网络重试后时间线会错乱。
继续追问： 两个并发工具没有全局顺序怎么办？
回答方向： 展示并行泳道和各自区间，只对存在因果关系的事件连线，不虚构一个绝对串行顺序。
4. 如何设计一个可交互的 Agent 执行时间线？
查看深度解析
标准回答： 先定义事件模型和调试任务，再设计视图：以 turn/step 或参与者分泳道，区分消息、模型、工具、权限和错误；支持缩放、筛选、关联高亮、详情下钻与原始日志定位。
原理展开： 图形必须保留 event ID、parent/span ID、时间和状态，渲染层只负责映射；大量事件时使用聚合和虚拟化。
工程示例： 点击 tool_failed 节点后同时高亮调用、授权和重试事件，侧栏显示参数摘要、耗时、错误码和 trace 链接。
常见误区： 只画漂亮节点却无法回答哪里慢、谁触发、是否重试；或 tooltip 塞入敏感原始参数。
继续追问： 如何验证时间线不是误导？
回答方向： 用固定 fixture 做事件到图形的快照和顺序断言，并允许从节点追溯原始事件核对。
实践任务
实现一个 Agent 执行时间线或 token 成本图，展示用户消息、工具调用、工具结果和错误节点。
验收标准
- 节点类型能映射为不同颜色或形状。
- 能表达事件时间顺序。
- 能说明大数据量下的性能边界。