事件描述
时间紧急、性能数据采集改造、后端近期无法直接提供数据接口，希望通过grafana直接作为可视化监控，做一层包装且尽可能的伪装。
技术选型
1. Grafana v6.3
2. Vue
安装Grafana
在初次部署的时候，我是使用docker安装，由于后面需要修改配置文件，要把这些文件和数据挂载出来，就遇到一些问题。
所以建议使用本地安装，因为后续修改配置文件比较方便。
安装完成
安装好后的数据源配置之类的自行解决，今天主要说的是关于iframe嵌套解决方案。
修改配置：
grafana配置文件默认在/etc/grafana/grafana.ini，修改以下内容
免登录.png
iframe.jpg
修改loading图标：
loading.png
edit-loading.png
需对/usr/share/grafana/public/views/index.html文件进行如下修改
更换svg，如不需要删除即可。
loading-css.png
更换文字
loading-text.png
使用过的都知道iframe是通过Grafana的share功能生成iframe。
grafana.jpg
share可以大致分为两种：
方案一、 整个dashboard页分享（page）
page.gif
kiosk参数（隐藏工具条，按ESC可返回（必要时候可以禁用按键））
隐藏左侧：http://localhost:3000/d/EgbXS25Zk/xc-dashboard?orgId=1&kiosk=tv
隐藏左侧+上方：http://localhost:3000/d/EgbXS25Zk/xc-dashboard?orgId=1&kiosk
由于禁用esc按键在捕获事件冒泡的时候会被拦截，可以通过postMessage通信修改样式，方法如下：
1.在源文件（/usr/share/grafana/public/views/index.html）添加以下代码
addEvent.jpg
2.自己项目内通过给iframe标签添加@load做后续操作
load.png
特点
- 加载快（因为只有一个iframe，资源文件只需加载一次）
- 配置方便（一个dashboard内有N个panel，只需配置一个dashboard地址即可）
- 整个dashboard内的panel是联动的
方案二、单个panel分享（item）
item.gif
特点
- 可控制加载顺序（@load）
- 不会联动（较好伪装）
问题
- 资源文件多次加载可参考
后面即可根据方案进行组件封装了
