grafana 配置 echarts

grafana配置echarts样例

grafana版本为：v9.4.7

1.添加一个panel

在这里插入图片描述

2.配置页面后，选择对应的 Apache Echarts

在这里插入图片描述

3.选择完成后后续在 Function出进行编码修改

在这里插入图片描述

4.登录https://echarts.volkovlabs.io/ 在Examples处选择需求的echarts图形

在这里插入图片描述

5.进入详情页面获取相应代码，替换第三步中 function下的代码

在这里插入图片描述

6.grafana配置查询语句

选择数据源
选择查询方式
配置查询语句

在这里插入图片描述

7.查看数据集，获取数据格式

在这里插入图片描述

8.数据集关键字段说明及使用方法（具体数据结构详情可参考样例中对应的附件）

1.关键元素说明
{
    // 数据结果集,元素类型：列表套字典。
    "series": [
     {   
         // 查询配置中query名称
         "refId": ""
         // 执行的查询语句
         "meta": {}
    	 // 查询语句的结果集
         "fields"：[{
    		// 当前refId查询结果的名称（别名）
    		"name":""
    		// 当前refId查询结果数据
    		"values":[]
			"state"：{
                // 针对values中的详细信息，主要包含最大最小值，平均值，首位末尾元素，总数等
                 "calcs":{}
            }
			// values长度
    		"length"：1
    	}]
     }
 ] 
}

2.数据使用
// 使用map方法 遍历series中元素获取相应数据
data.series.map((s) => {
    // 例如 获取name值为value的values数据
    value = s.fields.find((f) => f.name === 'value').values.buffer;
	
})

9.修改function下代码，编写相关程序获取对应数据，进行页面渲染

配置样例：

1.统计各个分区前一天处理任务总数

**datasource：**mysql

**echarts：**饼状图

grafana配置

1.选择mysql数据源，配置对应查询语句以及查询列表。

注意事项

1.饼状图显示的名称取自队列名称

2.查询别名尽量一样，多条查询语句方便获取对应数据，亦可根据实际场景自行定义
在这里插入图片描述

3.获取对应字段数据，获取模板代码，进行编码、渲染，替换function下代码。


let values_list = []
data.series.map((s) => {
  jobnum = s.fields.find((f) => f.name === 'jobnum').values.buffer;
  jobs = s.refId;
  values_list.push({ value: jobnum[0], name: jobs })
});
// console.log(values_list)
return {
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '80%',
      data: values_list,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

效果展示：

在这里插入图片描述