grafana echarts实现复杂图表可视化

导言

之前尝试用echarts构建了一个基于ClickHouse查询的桑基图:Clickhouse桑基图
基于echarts的图表，可以利用grafana+echarts插件实现快速可视化。

快速上手

查询与展示这两部分就不用说了，grafana的基操。

这里讲一下echarts代码:

• 1.echarts插件代码

• 2.随手copy一个echarts示例内的代码

  copy_from:https://echarts.apache.org/examples/zh/editor.html?c=line-smooth

  

  option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  };
  

• 3.grafana实现

  在查询面板构造两个数组

  SELECT ['a','b','c','d'] as x
  

  SELECT [10,20,30,40] as y
  

  grafana内的echarts代码:

  /*x轴数据*/
  const x=data.series[0].fields.find((f)=>f.name==='x').values.buffer[0]; 
  console.log(data.series[0].fields) 
  console.log(x) 
  /*y轴数据*/
  const y=data.series[1].fields.find((f)=>f.name==='y').values.buffer[0];
  console.log(data.series[1].fields) 
  console.log(y) 
  option = {
    xAxis: {
      type: 'category',
      data: x
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: y,
        type: 'line',
        smooth: true
      }
    ]
  };
  /*option生效*/
  echartsInstance.setOption(option)
  

• 4.结果展示

• 5.配置项参考