新建panel¶

登录数据大屏

仪表盘-新建仪表盘-新建可视化即可创建一个新的panel，在这里 仪表盘相当于一个画布(屏幕)，panel相当画布中的一幅画。

数据源配置¶

grafana支持多种数据源，这里 Data source选的zabbix(IData中的监控数据都记录在zabbix，详情见IData监控系统架构)，示例为各节点实时下载速度的趋势图，所以监控项选择 node_real_time_speed

数据转换 (可选)¶

当前监控项是json格式，需要合并多个时间节点的数据并挑选出需要的数据，可以选择 Extract fields转换模式

{
  "total_worker": 20,
  "online_worker": 6,
  "ylma1_mu01_download": 0,
  "storage_cu06_download": 6.339,
  "storage_mu01_download": 0.0,
  "ssxie1_mu01_download": 5.496,
  "hywang1_mu01_download": 0.0,
  "virtual_02_download": 0
}

点击debug按钮可以在右侧对比转换前后的格式，判断是否符合需求

绘制图表¶

grafana自带了大量的模板，但当前需求的定制化程度较高，我们将使用其支持的echarts插件绘制图形，可以到该插件官网选择合适的图表也可以参考echarts官网。

// 1、获取数据
mytime = context.panel.data.series[0].fields[0].values
mydata = context.panel.data.series[0].fields.slice(4)
mydatetime=[]
for(let i = 0; i < mytime.length; i++) {
    mydatetime.push(new Date(mytime[i]).toLocaleString())
}
// 2、格式化数据
myseries=[]
mylegend=[]
for(let i = 0; i < mydata.length; i++) {
    data_tmp=[]
    for (let j = 0; j < mydatetime.length; j++) {
        data_tmp.push([mydatetime[j],mydata[i].values[j]])
    }
    mylegend.push(mydata[i].name.replace(/_download$/, ''))
    myseries.push({name: mydata[i].name.replace(/_download$/, ''),type: 'line',smooth: true,symbol: 'none',data: data_tmp})
}
// 3、绘制图表
option = {
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      }
    },
    legend: {
      data: mylegend,
      top: 'top',
    },
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'time',
      boundaryGap: false
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%']
    },
    dataZoom: [
      {
        type: 'inside',
        start: 80,
        end: 100
      },
      {
        start: 80,
        end: 100
      }
    ],
    series: myseries
  };
return option

本文阅读量次
本站总访问量次

Authors: Wind