智能错误检测 + 提示版本（原生 HTML + JS + ECharts）

admin · 发表于 2025-11-9 21:17:28

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？开始注册

x

智能错误检测 + 提示版本（原生 HTML + JS + ECharts），这样：

如果数据为空或 metricId 未定义，会显示 “暂无监控数据”；

如果 Gnocchi API 401（Token 过期），会提示 “Token 无效”；

如果取到数据，则正常绘图。

✅ 完整示例（直接可替换你的前端代码）

假设你模板变量是 metrics 和 token：

<!DOCTYPE html>

<head>

<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>

const metrics = {

cpu: "{{ metrics.cpu }}",

memory: "{{ metrics.memory.usage }}",

disk: "{{ metrics.disk.root.size }}",

network: "{{ metrics.compute.instance.booting.time }}"

};

const token = "{{ token }}"; // 后端传入 Keystone Token

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'))

};

const titles = {

cpu: "CPU 使用率",

memory: "内存使用率",

disk: "磁盘 I/O",

network: "网络活动"

};

const colors = {

cpu: "#e74c3c",

memory: "#3498db",

disk: "#2ecc71",

network: "#9b59b6"

};

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;

}

try {

const res = await fetch(`http://controller:8041/v1/metric/${metricId}/measures`, {

headers: { "X-Auth-Token": token }

});

if (res.status === 401) {

chart.getDom().innerHTML = `<div class="chart-error">

账号		自动登录	找回密码
密码			开始注册

智能错误检测 + 提示版本（原生 HTML + JS + ECharts）

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

站长推荐 /4