Grafana Echarts Panel

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.

How Use

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

Tips

1. 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 {...}
}

2. 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

1. Install dependencies

yarn install

2. Build plugin in development mode or run in watch mode

yarn dev

or

yarn watch

3. 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