Echarts

Overview
Installation
Change log
Related content

Grafana Echarts Panel

release issues

Echarts panel for grafana 6.3+ & 7.0+, coding with react.

Code editor is attached in the edit panel to configure the option of Apache ECharts (incubating).

Support echarts-wordcloud, echarts-liquidfill and echarts-gl.

screenshot

How Use

Download the packaged plugin.
Or clone this repo and run yarn build.
Move folder to "/grafana_path/data/plugins".
Restart grafana.

Tips

Echarts option in the edit panel will execute when the data from grafana is refreshed, so you should avoid side effects or ensure that the side effects of the last execution can be cleared.

function (data, theme, echartsInstance, echarts) {
  echartsInstance.off('click') // clear side effects
  echartsInstance.on('click', () => {
    console.log('Click!');
  })
  return {...}
}

Add Map: clone repo, add YourMap.json to src/map and run yarn build, panel will auto register it(echarts.registerMap('YourMap', {...})).

Custom

This plugin build with @grafana/toolkit. For more information about panels, refer to the documentation on Panels

Install dependencies

yarn install

Build plugin in development mode or run in watch mode

yarn dev

yarn watch

Build plugin in production mode

yarn build

Learn more

Build a panel plugin tutorial
Grafana documentation
Grafana Tutorials - Grafana Tutorials are step-by-step guides that help you make the most of Grafana
Grafana UI Library - UI components to help you build interfaces using Grafana Design System