企业级 AI 网关的监控可视化，链路是从指标采集到前端大盘的完整闭环：后端按请求维度埋点并聚合，前端用 Vue3 + ECharts 把数据渲染成实时大盘，核心指标包括请求量、响应延迟、Token 用量、模型分布与错误率。实现上最要紧的不是图表的样式，而是三件事：指标口径先定清楚、实时通道选对方式、图表实例做好生命周期管理。下面按采集、传输、渲染三层拆解我在网关项目里的做法。
一、先定指标，再做图表
可视化是最后一步，指标没定明白，图再好看也是噪声。网关监控指标按使用对象分三层：
| 指标层 | 指标举例 | 关注者 |
|---|---|---|
| 业务层 | 请求量、Token 消耗、模型调用分布、成功率 | 产品、运营 |
| 性能层 | 首 token 时间、总耗时、网关路由耗时 | 开发、架构 |
| 资源层 | QPS、并发连接数、内存、GC 停顿 | 运维 |
三个口径特别容易踩坑。第一，”请求量”要区分网关入口请求和模型 API 调用，一次对话可能触发多次模型调用，混在一起对不上账。第二，延迟要拆”首 token 时间”和”总耗时”，用户感知的是首包速度，后端排障看的是总耗时。第三，Token 用量按模型分别统计，不同模型单价差异大，混合统计会导致成本归因失真。指标口径在埋点时就打上模型、渠道、用户维度标签，聚合查询才有据可依。
二、数据采集：埋点、聚合与传输
2.1 后端埋点
网关在统一请求处理器里做埋点，不散落在各业务代码中。每个请求经过时记录开始时间、模型、token 计数、结果状态，请求结束时汇总写入监控存储。网关层统一埋点比模型插件各自埋点更可靠——插件只负责模型适配，埋点位置固定，漏埋的可能性小得多。
2.2 实时传输通道对比
大盘数据要实时刷新，前端有三种拿数方式：
| 方式 | 实时性 | 实现成本 | 适用场景 |
|---|---|---|---|
| 定时轮询 | 秒级 | 最低 | 指标大盘、历史趋势 |
| SSE 推送 | 毫秒级 | 中 | 实时指标、告警滚动 |
| WebSocket | 毫秒级 | 高 | 双向交互式看板 |
网关大盘的请求量、延迟这类指标秒级刷新足够，我默认用轮询，接口按时间窗口聚合返回；只有”当前在途请求”这种需要即时感知的模块改用 SSE 推送。轮询的代价是空转请求多，用轻量聚合接口把响应压到几 KB 以内，比维护长连接省心。
三、前端大盘架构：Vue3 + ECharts
3.1 布局与数据流
大盘页面用栅格布局切四个区域：顶部是 KPI 统计卡片，中部左侧放请求量趋势折线图，中部右侧放模型调用分布饼图，底部放错误率与延迟的柱状图。数据流是单向的：请求层拿到聚合数据 → Pinia 存原始数据 → computed 派生图表需要的 option 结构 → 组件调用 setOption 更新。
3.2 图表组件封装
每个图表抽成独立组件，接收原始数据、内部完成 option 组装，父组件不感知 ECharts 细节。关键点是图表实例只创建一次，数据更新走 setOption 而非重新 init：
const chart = echarts.init(el.value, 'dark')
function update(data) {
chart.setOption(
{
series: [{ name: '请求量', type: 'line', data }]
},
{ replaceMerge: ['series'] }
)
}replaceMerge 只替换 series 数据，图例、坐标轴、主题配置保留，避免每次刷新重建整张图。图表主题跟随全局明暗切换，切换时更新实例主题并重绘。
四、实时刷新的实现细节
4.1 轮询更新
轮询由一个组合式函数统一管理，提供启动、停止、错误重试，页面挂载时开启、卸载时关闭：
const { data, pause, resume } = usePolling(
() => api.getGatewayMetrics({ range: '5m' }),
{ interval: 5000, retry: 3 }
)4.2 滚动条与时间窗
时间窗固定取最近 5 分钟，新数据进来往右推，旧数据滑出。实现上在更新时对数组做窗口截断，图表 x 轴用时间序列对齐。慢查询场景下，接口偶发延迟会打乱刷新节奏，轮询回调里做”上次未返回不并发请求”的互斥，避免请求堆积。
4.3 历史趋势与下钻
大盘只是实时快照，排查问题还得能往回翻。顶部时间范围选择器切换 5 分钟、1 小时、24 小时三个粒度，切换时后端按时间粒度降采样返回，前端重建 series。点折线图上的异常点，可以下钻到该时间窗口的请求明细列表，逐条看模型、延迟、错误码，把”数字异常”落到”具体请求”。下钻列表和图表共用同一个 Pinia 数据源，选中点写入选中状态，列表组件按它过滤，联动不靠事件总线，状态驱动更干净。
4.4 阈值与告警联动
图表只负责呈现，异常要有人看才闭环。网关在聚合接口里同时返回每条指标的阈值与命中状态，前端在超阈值的数据点上标红，KPI 卡片数字变红并出现告警角标。告警规则维护在后端配置，前端只读渲染，避免把业务规则写死在图表组件里。
五、生命周期与性能防护
ECharts 实例挂在组件上，最常出问题的是内存泄漏。三个必做的清理动作：组件卸载时调用实例的 dispose 释放 canvas；轮询定时器与 SSE 连接在卸载钩子里统一关闭；图表 resize 监听用防抖包裹并随组件销毁解绑。大盘长期挂机，漏一处清理，内存就会一路涨到浏览器卡死。
另外一个容易被忽略的点：大盘图例过多时，ECharts 默认渲染会把 tooltip 和 legend 都堆出来，加载明显变慢。只对 top 5 模型展示图例，其余并入”其他”分类，视觉和性能都更稳。图表数量多时按需加载 echarts 的核心模块，而不是全量引入，首屏时间能省下一截。
常见问题（FAQ）
Q1：监控大盘用轮询还是 SSE？
指标秒级刷新用轮询足够；在途请求等需即时感知的场景才用 SSE。
Q2：图表数据更新为什么用 setOption 而不是重新 init？
重新 init 会销毁重建整个实例，造成闪烁与性能损耗，setOption 局部更新。
Q3：大盘挂久了内存上涨怎么办？
卸载时 dispose 图表、关闭轮询与连接、解绑 resize 监听，三处清理缺一不可。
