《Grafana进阶教程-使用百度地图》

本文介绍了如何在grafana中使用business-charts插件，展现百度地图，在配置数据源和js代码前需要申请百度地图的密钥

一、Business Charts Panel介绍

Business Charts Panel是Business Suite中的一个组件。

介绍：

• 业务图表面板允许您将Apache ECarts库创建的图表和图形集成到Grafana仪表板中。
• Apache ECharts是一个功能强大、通用的数据可视化库，提供了广泛的图表类型，包括统计功能。它是用纯JavaScript编写的，基于zrender，一个用于图表渲染的轻量级图形库。
• Business Charts插件提供了一种简单的方法，可以将直观，交互式和高度可定制的图表添加到您的Grafana仪表板。

要求：

• 业务图表面板6.X需要Grafana 10或Grafana 11。
• Apache ECharts panel 5.X需要Grafana 9或Grafana 10。
• Apache ECharts面板3.X和4.X需要Grafana 8.5或Grafana 9。

二、获取密钥

百度地图通过 API v3 加载，需要访问密钥。
您可以在 https://lbsyun.baidu.com/apiconsole/key#/home 获取访问密钥。

• 点击创建应用，创建一个浏览器端应用
  
  复制你的密钥

三、Grafana配置

• 百度地图的加载大约需要 2-3 秒。
  

我在测试表中存放了地市和销量数据

select value as value,name as name from city

接下来配置js代码

const series = data.series.find(s => s.refId === 'A');
if (!series) {console.error('未找到refId为A的series');return {};
}// 使用正确的字段名（注意全大写）
const valueField = series.fields.find(f => f.name === 'value');
const nameField = series.fields.find(f => f.name === 'name');// 添加字段存在性检查
if (!valueField || !nameField) {console.error('缺少必要字段:', {valueFieldExists: !!valueField,nameFieldExists: !!nameField});return {};
}// 处理values（Grafana 9.0+使用buffer结构）
const values = valueField.values.buffer ? valueField.values.buffer : valueField.values;
const names = nameField.values.buffer ? nameField.values.buffer : nameField.values;// 构建数据数组（带数据校验）
const data_arr = [];
if (values && names && values.length === names.length) {for (let i = 0; i < values.length; i