最新消息:

Grafana中echarts插件使用

IT技术 ipcpu 41浏览 0评论

Grafana插件使用.md

概述

Grafana拥有丰富的图标功能,能很方便的从Prometheus、Zabbix、MySQL中读取相关的数据,对于运维人员来讲,是每日必看的站点。
但是对于一些复杂的图形,他的处理功能就比较弱了,这时我们想到了百度的echarts,有没有类似插件呢?还真被我们找到了。
官网地址是: https://github.com/Billiballa/bilibala-echarts-panel

echarts插件简单介绍

这个插件目前支持echarts 4.9 ,根据echarts的文档,我们只需要给出option, 就可以做出图形,如下,

这个插件也很简单,就提供了一个Echarts Option,可以自行编写一些函数,最终return echarts中option内容就可以了。

注意:官方还在Echarts Option上方提供FollowGrafanaTheme 开关,没什么用,占页面地盘,被我删掉了。

使用echarts制作大盘

经过一番了解,发现插件自带的第一个函数用于从数据源查询出来的time和value数据传递,因为我们的数据不是时序型数据,很难通过这个方法传递。
后来又发现这个插件支持ajax,可以发起ajax请求获取远程的数据,因此我们直接调用了远程数据。

最终我们做出的大盘如上图,主要用来分析阿里云OSS存储的账单,那一项花费比较多,哪个bucket花费比较多,哪个计费项花费比较多,可以一目了然。
我们的代码如下

option = {
         title: [ 
    {text: '本月OSS总费用',x: '2%',y: '0%',
             textStyle: {fontSize: 16, color: "#bd9f00"}},
    {text: '',x: '12%',y: '0%',
              textStyle: {fontSize: 16, color: "#ffdd29"}},
     {text: '计费项占比',x: '49%',y: '47%',
                textStyle: {fontSize: 18, color: "#fff"}},
],
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
     grid: [
         {left: '2%', // 网格部分
             right: '65%',
             top: '10%',
             bottom: '2%',
             containLabel: true
         },
         {left: '75%', // 网格部分
             right: '2%',
             top: '10%',
             bottom: '45%',
             containLabel: true
         },
         {left: '75%', // 网格部分
             right: '2%',
             top: '65%',
             bottom: '0%',
             containLabel: true
         },
           ],
    xAxis: [
        {gridIndex: 0,type: 'value',axisLabel: {
                    textStyle: {
                        color: '#c9c9ca'
                    }
                },splitLine: {
              lineStyle: {
                type: "dotted"
              }
            }},
        {gridIndex: 1,type: 'value',  position: 'top', inverse:true, axisLabel: {
                    textStyle: {
                        color: '#c9c9ca'
                    }
                },splitLine: {
              lineStyle: {
                type: "dotted"
              }
            }},
        {gridIndex: 2,type: 'value',  position: 'top', inverse:true, axisLabel: {
                    textStyle: {
                        color: '#c9c9ca'
                    }
                },splitLine: {
              lineStyle: {
                type: "dotted"
              }
            }},
    ],
    yAxis: [
        {gridIndex: 0, type: 'category' ,position: 'top'},  
        {gridIndex: 1, type: 'category' , inverse:true, }, 
        {gridIndex: 2, type: 'category' , inverse:false, },  
    ],
    color: ["#87f7cf", "#f7f494", "#72ccff", "#f7c5a0", "#fc97af", "#d4a4eb", "#d2f5a6", "#76f2f2"],
    series: [
        {
            name: '费用类别',
            type: 'pie',
            center: ['54%', '50%'],
            radius: ['35%', '60%'],
            avoidLabelOverlap: true,
            color: [ "#f7f494", "#72ccff", "#f7c5a0", "#87f7cf","#fc97af", "#d4a4eb", "#d2f5a6", "#76f2f2"],
            label: {
                show: true,
                position: 'outside',
                formatter: '{a|{b}:{d}%}\n{hr|}',
                rich: {
                    hr: {
                        borderRadius: 3,
                        width: 3,
                        height: 3,
                        padding: [3, 3, 0, -12]
                    },
                    a: {
                        padding: [-30, 15, -20, 15]
                    }
                 }
            },
            labelLine: {
                normal: {
                    length: 20,
                    length2: 30,
                    lineStyle: {
                        width: 1,
                        color: '#fff'
                    }
                }
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: true
            }
        },
        {
            name:'费用类别',
            type: 'bar', 
            xAxisIndex: 0, 
            yAxisIndex: 0,
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b} {c}'
                }
            }
        },
        {
            name:'费用类别',
            type: 'bar', 
            color: [  "#72ccff", "#f7c5a0", "#f7f494","#87f7cf","#fc97af", "#d4a4eb", "#d2f5a6", "#76f2f2"],
            xAxisIndex: 1, 
            yAxisIndex: 1,
            label: {
                normal: {
                    show: true,
                    position: 'left',
                    formatter: '{b} {c}'
                }
            }
        },
         {
            name:'费用类别',
            type: 'bar', 
            color: [  "#e0cfeb", "#d2f5a6", "#76f2f2"],
            xAxisIndex: 2,  
            yAxisIndex: 2,
            label: {
                normal: {
                    show: true,
                    position: 'left',
                    formatter: '{b} {c}'
                }
            }
        },
    ]
};

$.ajax({
    url: "https://json.ipcpu.com/json/ossdata.json",
  type: 'GET',
    dataType: 'json',
    error: function (request, error) {
        console.log(" Can't do because: " + error);
  },
  success: function (res) {
      if (res) {
      option.series[0].data = res.itemdata;
      option.series[1].data = res.itemdata;
      option.series[2].data = res.bucketdata.slice(0,5);
      option.series[3].data = res.detaildata.slice(0,5);
      option.title[1].text = res.totalfee;
      echartsInstance.setOption(option)
    }
}
});

代码第一部分,option用来定义了echarts图表的属性;第二部分是调用了ajax获取远程的json数据来对图表进行绘制。

总结

时序型数据(time series data) 有多个Time-Value(时间戳和值的组合)构成,Grafana、Prometheus就是专门处理这种数据的;在处理其他数据的时候就非常不友好了。
本例中我们通过ajax获取的json数据,使用echarts图形组件进行展示,仅仅是在Grafana上加了一个页面,与Grafana本身关系不大,我们实现的功能可以很容易的挪到其他HTML页面上。

转载请注明:IPCPU-网络之路 » Grafana中echarts插件使用

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址