Matarialize中文社区- Prometheus 数据集成到 ECharts 中进行可视化

Prometheus 数据集成到 ECharts 中进行可视化

梦会成真的 2024-07-24 10:44:22

211 Prometheus,ECharts 分享

将 Prometheus 数据集成到 ECharts 中进行可视化，可以通过以下几个步骤实现。这将包括从 Prometheus 获取数据、在前端使用 ECharts 绘制图表，并根据需要进行图表的更新和交互。

步骤概述

设置 Prometheus
创建一个后端服务来获取 Prometheus 数据
前端集成 ECharts
在 ECharts 中展示数据

1. 设置 Prometheus

确保已经安装和运行 Prometheus，并且配置了正确的数据源。可以在 prometheus.yml 中定义需要监控的指标。例如，监控一个 Node Exporter：

scrape_configs:
  - job_name: 'node_exporter'
    static_configs:
      - targets: ['localhost:9100']

启动 Prometheus：

prometheus --config.file=prometheus.yml

2. 创建一个后端服务来获取 Prometheus 数据

我们可以使用 Node.js 创建一个简单的 API 服务器来从 Prometheus 拉取数据，并将其转发给前端。

使用 Express.js 创建后端服务

安装依赖：

npm install express axios

创建 server.js 文件：

const express = require('express');
const axios = require('axios');

const app = express();
const PROMETHEUS_URL = 'http://localhost:9090'; // 修改为你的 Prometheus 地址

app.get('/api/metrics', async (req, res) => {
  try {
    const { data } = await axios.get(`${PROMETHEUS_URL}/api/v1/query`, {
      params: {
        query: 'up' // 你要查询的指标
      }
    });

    res.json(data.data.result);
  } catch (error) {
    console.error('Error fetching metrics:', error);
    res.status(500).send('Error fetching metrics');
  }
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

这个简单的服务器会从 Prometheus 查询 up 指标，你可以根据需要更改查询。

3. 前端集成 ECharts

在前端，我们将使用 ECharts 来展示从 Prometheus 获取的数据。

HTML 文件

创建一个简单的 HTML 文件，包含 ECharts 的基本配置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Prometheus ECharts Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 100%; height: 500px;"></div>
  <script src="app.js"></script>
</body>
</html>

JavaScript 文件 (`app.js`)

在这个文件中，我们将从后端获取数据并使用 ECharts 展示。

const chartDom = document.getElementById('chart');
const myChart = echarts.init(chartDom);

async function fetchMetrics() {
  try {
    const response = await fetch('/api/metrics');
    const data = await response.json();

    // 解析 Prometheus 数据
    const seriesData = data.map(item => {
      return {
        name: item.metric.instance,
        value: [item.metric.instance, parseFloat(item.value[1])]
      };
    });

    const option = {
      title: {
        text: 'Prometheus Metrics'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: seriesData.map(item => item.name)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: seriesData.map(item => item.value[1]),
          type: 'bar',
          smooth: true
        }
      ]
    };

    myChart.setOption(option);
  } catch (error) {
    console.error('Error fetching metrics:', error);
  }
}

// 初始化数据
fetchMetrics();

// 设置定时器定时刷新数据
setInterval(fetchMetrics, 10000); // 每10秒刷新一次