echarts詳細教程（在Grafana中使用Echarts的方式）

2023-05-18 02:26:30 2

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，那麼只需要完成兩件事：

為了儘可能簡單描述問題，我們以基礎折線圖為例。

最終效果如下:

為了實現這樣的效果，我們首先來看一下數據結構。 再原始資料庫中保存的數據如下所示：

time是datetime類型，用來篩選時間段。 month是x軸用來進行分類的欄位，value則是最終需要顯示的值。

query語句可以這樣組織:

SELECT (intDiv(toUInt32(date), 10800) * 10800) * 1000 as t, month, max(value)FROM default.grafana2WHERE date >= toDateTime(1631111854) AND date { 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的規範賦值就可以完成引入了。