定制Grafana UI作为可视化大屏的解决方案

2,046 阅读4分钟

首先认识一下 Grafana

Grafana 是一款开源的、基于Web的数据分析与可视化平台,主要用于监控、度量、分析和可视化数据

----- 优势 -----

数据源支持:Grafana 支持多种数据源,包括常用的InfluxDB、Prometheus、Elasticsearch、Graphite、MySQL等,可以轻松连接多种数据源并集中管理。

丰富的可视化图表:Grafana 提供丰富多样的图表类型,包括折线图、柱状图、饼图、热力图等,用户可以根据数据类型选择合适的图表展示方式。

灵活的查询编辑器:Grafana 提供直观的查询编辑器,允许用户自定义查询条件、过滤条件和聚合方式,实现高度定制化的数据查询。

警报与通知:Grafana 允许用户设置警报规则,当监控指标达到或超过预设的阈值时触发警报,并通过邮件、Slack等途径发送通知。

面板组织:用户可以将多个图表组织在一个面板中,通过自定义布局实现更直观的数据展示。

模板变量:Grafana 允许用户定义模板变量,通过变量在多个图表之间快速切换,实现动态视图展示。

插件支持:Grafana 支持第三方插件,可以通过插件实现更多的功能扩展和定制。

团队协作:支持多用户、多团队的协同工作,可以定义不同的权限和角色。

Grafana 的主要应用领域包括系统监控、应用性能监控、工业自动化、物联网等,广泛应用于IT运维、开发、运营、数据分析等领域。

----- 缺陷 -----

学习曲线陡峭:对于初学者来说,Grafana 的学习曲线可能比较陡峭,特别是对于没有经验的用户。配置复杂查询、理解数据源、设置警报规则等可能需要一些时间来适应和掌握。

性能问题:在处理大量数据时,Grafana 可能会遇到性能问题,尤其是在同时处理多个大型数据源时。这可能导致图表加载速度变慢,甚至影响用户体验。

占用系统资源较多:Grafana 在运行时可能占用相对较多的系统资源,尤其是在处理复杂查询、大量数据或大规模的监控系统时,可能需要更多的服务器资源来确保流畅运行。

缺乏自动调整功能:Grafana 目前在自动调整图表以适应不同的屏幕尺寸和设备方面还有一定的局限性,可能需要手动调整布局和样式以适应不同的显示设备。

警报系统限制:警报系统虽然功能强大,但相对于专门的监控系统,可能在某些方面存在一定的局限性,比如对于复杂的警报逻辑或多级警报的处理可能需要一些额外的配置和工作。

可视化图表类型有限:虽然 Grafana 提供了多种可视化图表类型,但与其他专门的数据可视化工具相比,图表类型和样式可能相对有限,一些特定需求的图表可能无法直接在 Grafana 中实现。

对非时序数据支持不足:Grafana 主要面向时序数据,对于非时序数据的支持不如一些通用的数据分析工具。

尽管存在这些缺陷和局限性,Grafana 仍然是一个广泛使用的强大工具,通过不断的改进和更新,可以期待它变得更加完善和适应更多应用场景。

----- 解决方案 -----

可见优缺点都很明显,grafana 比较擅长于数据的监控采集,但在对于数据的渲染绘制方面略显无力,精细化的数据图表密密麻麻的呈现,一眼就能看出是 grafana 内嵌页面,那么如何在使用 grafana 强大数据源的同时,又能达到绘制图表UI方面的差异化要求,就需要借助 grafana 插件 Apache Echarts 的支持了, 此插件可以创建各种交互式的图表。可以通过 Grafana 插件集成 Apache ECharts 到 Grafana 中,以实现更多图表样式和定制化。

  1. 首先需要在 grafana 管理系统中,下载插件支持 Apache Echarts

截屏2023-10-17 16.39.14.png

  1. 在grafana的dashboard中创建panel并编辑

截屏2023-10-17 16.41.05.png

  1. 编辑图表,在选择图表类型时选择 Apache Echarts 插件,在左侧的配置列表中写语法过滤拿到源数据,然后在右侧编辑框中编写echarts图表配置项,以实现各种图表呈现效果。

截屏2023-10-17 16.41.20.png

  1. 通过使用插件依次编辑定制每个panel,然后组合排列成 dashboard 的形式,完成了grafana 页面的个性化简单定制,后续 iframe 嵌入,根据需求定制的 grafana 在 WebUI 上已经有了相当明显的差异和区别了。

截屏2023-10-17 16.41.28.png