一、目的

grafana提供时序数据展示，默认提供的模板可能无法满足需求，比如我目前需要一个双层饼图，grafana只能提供最为基础的 PIE chart，而grafana提供了插件开发的功能，故可以把echart相关图表集成到grafana中获取满足自己需求的图表。

产出结果示例：

二、实现案例

案例集成：

数据源：时序数据库Influxdb (可自由调整，都可以兼容，比如Prometheus)
图表模板：echart (大部分图表应该都可以兼容)

grafana集成influxdb很容易，这边不再赘述。

简单贴一下安装过程，方便大家：

grafana安装：

grafana安装：wget https://dl.grafana.com/oss/release/grafana-7.1.0-1.x86_64.rpmsudo yum -y install grafana-7.1.0-1.x86_64.rpm基本命令：
启动：
systemctl start grafana-server
systemctl restart grafana-server查看版本：
grafana-server -v访问：ip:3000 进入控制台,默认账号密码admin

influxdb安装：

influxdb安装：
下载 rpm 文件
wget https://dl.influxdata.com/influxdb/releases/influxdb-1.8.2.x86_64.rpm安装
sudo yum localinstall influxdb-1.8.2.x86_64.rpm启动 InfluxDB：
systemctl start influxdb设为开机启动：
systemctl enable influxdb连接 InfluxDB
( -precision 参数表明了任何返回的时间戳的格式和精度，rfc3339 是让 InfluxDB 返回 RFC339 格式（YYYY-MM-DDTHH:MM:SS.nnnnnnnnnZ）的时间戳。)influx -precision rfc3339创建数据库
CREATE DATABASE mydb

influxdb插入数据：

INSERT cost,name='云服务器' value=1048
INSERT cost,name='负载均衡' value=335
INSERT cost,name='物理机房' value=510
INSERT cost,name='网络带宽' value=251
INSERT cost,name='serverless' value=234
INSERT cost,name='对象存储' value=147
INSERT cost,name='其他费用' value=102

数据源这边ok了，grafana这边需要集成插件到控制台，插件下载地址( https://download.csdn.net/download/qq_37822090/20304362 )。

插件下载完成后，需要上传到grafana插件目录，并进行构建：

#下载grafana插件开发相关node_modules
npm install#构建yarn
yarn install#Build plugin in development mode or run in watch mode
yarn dev#Build plugin in production mode ，可先跳过
yarn build

源码结构图：

构建完成之后，重启grafana：

systemctl restart grafana-server

注意：插件开发构建过程中npm构建失败很常见，yarn构建失败，需要自己联调，一定要构建完成才能使用。

(我这边基于官方grafana插件编写构建失败拖了很长时间，服务器访问github还需要自己修改host，有时候还不成功，这个插件构建时应该没有那种问题，出现问题了一步一步走就ok，我这边都成功了)。

主要引起的原因：

nodejs版本，我这边使用最新的 v12.18.3

grafana版本，github上提示支持 6.3+ & 7.0+，我这边使用的7.1.0

执行构建命令时，root用户可能执行失败，切换下用户，文件授权也需要自行调整

三、Echart集成Grafana

直接去echart上面捞就行，如图：

获取到左边源码图，粘贴到插件funtion位置，自行修改，如图示例：

我这边编写的数据获取使用录入了的influxdb+外部ajax远程请求一个接口完成简单计算，为了试用它的ajax功能，有需要的可以贴过去试用：

if (data.series.length==0) {return
}
let s = 1
$.ajax({type: "GET",async: false,url: "http://10.200.19.43:9041/test1",success: function (res) {s = res}
});
const names = data.series[0].fields.find((f) => f.type === 'number').values.buffer;
const values = data.series[1].fields.find((f) => f.type === 'number').values.buffer;
const result = values.map((a,i) => ({name: names[i], value: a*s}));
console.log(s)console.log(result)
option = {tooltip: {trigger: 'item',formatter: '{a} <br/>{b}: {c} ({d}%)'},legend: {data: ['云服务器', '负载均衡', '对象存储', '网络带宽', '阿里云', '腾讯云', '物理机']},series: [{ name: '费用来源',type: 'pie',selectedMode: 'single',radius: [0, '30%'],label: {position: 'inner',fontSize: 14,},labelLine: {show: false},data: [{value: 1548, name: '阿里云'},{value: 775, name: '腾讯云'},{value: 679, name: '物理机'}]},{name: '费用来源',type: 'pie',radius: ['45%', '60%'],labelLine: {length: 30,},label: {formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',backgroundColor: '#F6F8FC',borderColor: '#8C8D8E',borderWidth: 1,borderRadius: 4,rich: {a: {color: '#6E7079',lineHeight: 22,align: 'center'},hr: {borderColor: '#8C8D8E',width: '100%',borderWidth: 1,height: 0},b: {color: '#4C5058',fontSize: 14,fontWeight: 'bold',lineHeight: 33},per: {color: '#fff',backgroundColor: '#4C5058',padding: [3, 4],borderRadius: 4}}},data: result}]
};echartsInstance.setOption(option);

至此完成一个案例echart集成gragana，结果如图：

influxdb v2.0 跨表集成案例：

console.log(data)if (data.series.length==0) {return
}
let s = 1
// $.ajax({
//     type: "GET",
//     async: false,
//     url: "http://10.200.19.43:9041/test1",
//     success: function (res) {
//       s = res
//     }
// });
//data.series.map((s) =>console.log(s.fields[1]));const names = [];
const values = [];
const totalNames = [];
const totalValues = [];
for (var i = 0; i < data.series.length; i++) {if(data.series[i].refId=='A'){names.push(data.series[i].fields[1].labels.instanceType);values.push(data.series[i].fields[1].state.calcs.lastNotNull);} else if(data.series[i].refId=='B'){totalNames.push(data.series[i].fields[1].labels.name);totalValues.push(data.series[i].fields[1].state.calcs.lastNotNull);} else if(data.series[i].refId=='C'){names.push(data.series[i].fields[1].labels.storageClass);values.push(data.series[i].fields[1].state.calcs.lastNotNull);}
}//data.series.map((s) =>(s.refId==='A'?s.fields[1].labels.instanceType:''));const result = values.map((a,i) => ({name: names[i], value: a*s}));
const totalResult = totalValues.map((a,i) => ({name: totalNames[i], value: a*s}));console.log(s)console.log(result)
option = {tooltip: {trigger: 'item',formatter: '{a} <br/>{b}: {c} ({d}%)'},legend: {data: ["实例", "存储"]},series: [{ name: '费用来源',type: 'pie',selectedMode: 'single',radius: [0, '30%'],label: {position: 'inner',fontSize: 14,},labelLine: {show: false},data: totalResult},{name: '费用来源',type: 'pie',radius: ['45%', '60%'],labelLine: {length: 30,},label: {formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',backgroundColor: '#F6F8FC',borderColor: '#8C8D8E',borderWidth: 1,borderRadius: 4,rich: {a: {color: '#6E7079',lineHeight: 22,align: 'center'},hr: {borderColor: '#8C8D8E',width: '100%',borderWidth: 1,height: 0},b: {color: '#4C5058',fontSize: 14,fontWeight: 'bold',lineHeight: 33},per: {color: '#fff',backgroundColor: '#4C5058',padding: [3, 4],borderRadius: 4}}},data: result}]
};echartsInstance.setOption(option);

四、附录

集成echart插件下载地址：https://download.csdn.net/download/qq_37822090/20304362

echart相关模板地址：Apache ECharts

插件github地址(感谢这位大佬提供的插件)：https://github.com/Billiballa/bilibala-echarts-panel

【Grafana】Grafana集成Echart，基于插件实现自定义数据源+自定义图表

一、目的

二、实现案例

三、Echart集成Grafana

四、附录