Grafana引入Echarts的原理

Grafana一直以来都是云原生领域中做图表展示的扛把子。 其内置的图表已经可以满足大部分场景了，但说实话，Grafana的图表使用率最高的莫过于Line(折线图)了。 其他图适用场景有限，不如折线图使用广泛。

但即便如此，折线图有时也无法适用所有场景。 有时我们想使用第三方图表，却受限于Grafana有限的Plugins机制造成无法低成本引入。 好在，Grafana 8官方支持了Echarts图表。

Grafana支持Echarts图表原理不难理解，Grafana通过Query从数据源查询数据，然后将数据作为function (data, theme, echartsInstance, echarts) {}的参数传入到一段js代码中。 这个函数需要返回echarts实例，grafana再使用返回的这个实例进行UI渲染。

也就是说，Grafana引入Echarts的原理大致如下:

// data 是query查询到的数据
function (data, theme, echartsInstance, echarts) {
    // logic code

    return {
        // echarts instance
    }
}

我们如果想使用echarts，那么只需要完成两件事：

1. 对data进行数据整合处理
2. 返回echarts实例对象

数据模型

为了尽可能简单描述问题，我们以基础折线图为例。

最终效果如下:

为了实现这样的效果，我们首先来看一下数据结构。 再原始数据库中保存的数据如下所示：

time是datetime类型，用来筛选时间段。 month是x轴用来进行分类的字段，value则是最终需要显示的值。

query语句可以这样组织:

SELECT
    (intDiv(toUInt32(date), 10800) * 10800) * 1000 as t,
    month,
    max(value)
FROM default.grafana2

WHERE date >= toDateTime(1631111854) AND date <= toDateTime(1646750254)

group by t, month
ORDER BY t

如此这般操作之后，grafana就会从数据库中查询到数据。 然后grafana需要将数据作为参数放入echarts函数中。

那么在echarts中，data应该是什么样的呢？

我们在函数中，输出一下data：

可以看到，在series中保存的便是我们在数据库中的数据。 其中name是我们用来准备做X轴分类展示的month，而fields则保存的是每个时间点所对应的具体value。

通过观察也可以看到，在value的数组中，只有相对应的时间戳中才会出现值。也就是说第一组是[13000, null, null, null, null]，第二组是[null, 14300, null, null, null]

而我们准备实现的echarts图表需要的数据是这样的：

{
  xAxis: {
    type: 'category',
    boundaryGap: false,
    // data 是X轴数据
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      // data 是Y轴数据
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      areaStyle: {}
    }
  ]
}

所以我们需要将grafana传入的data数据进行拆分，转化成echarts可以识别的数据。

逻辑处理

grafana的数据是耦合在data对象里面的，所以需要遍历data分别取出X轴和Y轴的数据。代码如下:

let id=[];
let value=[];
const series = data.series.map((s) => {
  const sData = s.fields.find((f) => f.type === 'number').values.buffer;
  const sTime = s.fields.find((f) => f.type === 'time').values.buffer;
    
  id.push(s.name);
  sData.map((d, i) => {
      if (d){
        value.push(d)
      }
    })
});

id保存的是X轴数据， value保存的是Y轴数据。 根据echarts的要求，就可以分别传入X轴和Y轴了。

return {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: id,
        tooltip: {
            show: true,
        },
        axisPointer: {
            type: 'shadow'
        }
    },
    series: [{
        data: value,
        type: 'line',
        seriesLayoutBy: 'row',
        label: {
            show: true,
            position: 'top'
        },
        areaStyle: {},
        emphasis: {
            focus: 'series'
        },
    }]
}

通过这样已经可以实现echarts的折线图了。 但我们还可以继续再往前走一走。 参考echarts的参数说明 可以添加tooltip、toolbox的feature、legend等。 完整配置如下:

let id=[];
let value=[];
const series = data.series.map((s) => {
  const sData = s.fields.find((f) => f.type === 'number').values.buffer;
  const sTime = s.fields.find((f) => f.type === 'time').values.buffer;
    
  id.push(s.name);
  sData.map((d, i) => {
      if (d){
        value.push(d)
      }
    })
});

return {
  darkMode: 'auto',
  color:'#0f8ad1',
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data:id,
    tooltip:{
        show:true,
    },
    axisPointer: {
        type: 'shadow'
      }
  },
  yAxis: {
    type: 'value'
  },
  legend: {
    data: id,
  },
  series: [
    {
      data: value,
      type: 'line',
      seriesLayoutBy: 'row',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
    }
  ]
};

事后总结

Grafana引入echarts的关键在于数据转换。只要将grafana的数据剥离开，分成X轴和Y轴数据，然后按照echarts的规范赋值就可以完成引入了。