智能错误检测 + 提示版本（原生 HTML + JS + ECharts），这样：
( V$ R# O& ]" T5 b; m( t3 j如果数据为空或 metricId 未定义，会显示 “暂无监控数据”；
1 T5 Y& Q+ J0 k% i* E) W9 g
如果 Gnocchi API 401（Token 过期），会提示 “Token 无效”；
) S5 J+ L& |: x5 a. a如果取到数据，则正常绘图。
" J8 k9 K% H- Q9 b, ~
✅ 完整示例（直接可替换你的前端代码）
5 w4 F/ |0 e, W# D% N. r( m0 t假设你模板变量是 metrics 和 token：
* p1 d& A1 t9 D. S( [, A5 H
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>资源监控</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<style>
.chart-box {
width: 48%;
height: 300px;
display: inline-block;
margin: 10px;
border: 1px solid #eee;
position: relative;
}
.chart-error {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
color: #888;
font-size: 14px;
}
</style>
</head>
<body>
<h2>资源监控</h2>
3 j; S3 Z3 m [! S( N1 R
<div id="cpu" class="chart-box"></div>
<div id="memory" class="chart-box"></div>
<div id="disk" class="chart-box"></div>
<div id="network" class="chart-box"></div>
) B8 ^; P; h! A' G& z/ X' V
<script>
const metrics = {
cpu: "{{ metrics.cpu }}",
memory: "{{ metrics.memory.usage }}",
disk: "{{ metrics.disk.root.size }}",
network: "{{ metrics.compute.instance.booting.time }}"
};
: n$ I& q+ _4 E, n
const token = "{{ token }}"; // 后端传入 Keystone Token
& M3 w0 `+ f9 b! ?6 s- Q% _
const charts = {
cpu: echarts.init(document.getElementById('cpu')),
memory: echarts.init(document.getElementById('memory')),
disk: echarts.init(document.getElementById('disk')),
network: echarts.init(document.getElementById('network'))
};
: P0 d+ o2 Y) I" \# b
const titles = {
cpu: "CPU 使用率",
memory: "内存使用率",
disk: "磁盘 I/O",
network: "网络活动"
};
! P0 n$ O* y; K
const colors = {
cpu: "#e74c3c",
memory: "#3498db",
disk: "#2ecc71",
network: "#9b59b6"
};
! v3 R5 l- b0 C1 i async function loadMetric(chart, metricId, title, color) {
// 没有 metricId，直接提示
if (!metricId || metricId === 'None' || metricId === 'undefined') {
chart.clear();
chart.getDom().innerHTML = `<div class="chart-error">⚠️ 暂无监控数据</div>`;
return;
}
( ]* V! U% [- {& E6 a1 o- f! E Z- f
try {
const res = await fetch(`http://controller:8041/v1/metric/${metricId}/measures`, {
headers: { "X-Auth-Token": token }
});
3 ~/ R( i. |7 y" {0 E
if (res.status === 401) {
chart.getDom().innerHTML = `<div class="chart-error">
/4 
|返回首页|Archiver|小黑屋|易陆发现技术论坛
( 蜀ICP备2026014127号-1 )
窥视卡
雷达卡
发表于 2025-11-9 21:17:28
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜