当前位置：首页 > VUE

vue嵌套grafana实现

2026-02-10 23:28:23VUE

Vue 中嵌套 Grafana 的实现方法

在 Vue 项目中嵌套 Grafana 通常有两种主流方式：通过 iframe 嵌入或利用 Grafana 的 API 进行深度集成。以下是具体实现方案：

iframe 直接嵌入

适用场景：快速实现 Grafana 面板展示，无需复杂交互。

获取 Grafana 面板的共享链接
- 登录 Grafana，进入目标仪表板，点击顶部菜单的 Share 按钮。
- 选择 Embed 标签页，复制生成的 iframe 代码片段。

在 Vue 组件中嵌入

<template>
  <div class="grafana-container">
    <iframe 
      :src="grafanaUrl"
      width="100%" 
      height="600px"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      grafanaUrl: 'https://your-grafana-domain.com/d/your-dashboard-id?orgId=1&from=now-6h&to=now'
    };
  }
};
</script>

安全配置
- 确保 Grafana 服务端配置允许被 iframe 嵌入：
```
[security]
allow_embedding = true
```

通过 Grafana API 深度集成

适用场景：需要动态控制面板或数据交互。

安装必要依赖
```
npm install axios  # 用于 API 请求
```
获取 API Key
- 在 Grafana 的 Configuration > API Keys 中创建具有 Viewer 或 Admin 权限的 Key。

动态加载面板数据

// 示例：获取面板数据
const fetchGrafanaData = async (panelId) => {
  const response = await axios.get(
    `https://your-grafana-domain.com/api/panels/${panelId}`,
    {
      headers: { Authorization: `Bearer ${apiKey}` }
    }
  );
  return response.data;
};

渲染动态内容

<template>
  <div v-if="panelData">
    <!-- 自定义渲染逻辑 -->
    <div v-html="processedData"></div>
  </div>
</template>

跨域问题解决

Grafana 服务端配置

[security]
allow_embedding = true
strict_transport_security = false

Vue 代理配置（开发环境）

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/grafana': {
        target: 'https://your-grafana-domain.com',
        changeOrigin: true,
        pathRewrite: { '^/grafana': '' }
      }
    }
  }
};