echarts-for-react

echarts-for-react

The simplest, and the best React wrapper for Apache ECharts. Using visualization with MCP Server mcp-server-chart.

Install

$ npm install --save echarts-for-react

# `echarts` is the peerDependence of `echarts-for-react`, you can install echarts with your own version.
$ npm install --save echarts

Then use it.

import ReactECharts from 'echarts-for-react';

// render echarts option.
<ReactECharts option={this.getOption()} />

You can run website.

$ git clone [email protected]:hustcc/echarts-for-react.git

$ npm install

$ npm start

Then open http://127.0.0.1:8081/ in your browser. or see https://git.hust.cc/echarts-for-react/ which is deploy on gh-pages.

Usage

Code of a simple demo code showed below. For more example can see: https://git.hust.cc/echarts-for-react/

import React from 'react';
import ReactECharts from 'echarts-for-react';  // or var ReactECharts = require('echarts-for-react');

<ReactECharts
  option={this.getOption()}
  notMerge={true}
  lazyUpdate={true}
  theme={"theme_name"}
  onChartReady={this.onChartReadyCallback}
  onEvents={EventsDict}
  opts={}
/>

Import ECharts.js modules manually to reduce bundle size

With Echarts.js v5 or v6:

…

With Echarts.js v3 or v4:

…

For Next.js user, code transpilation is needed. For Next.js 13.1 or higher, as all next-transpile-modules features are natively built-in and the package has been deprecated, so please add transpilePackages: ['echarts', 'zrender'] into nextConfig object:

// next.config.js
/** @type {import('next').NextConfig} */

const nextConfig = {
  // ...existing properties,
  transpilePackages: ['echarts', 'zrender'],
}

module.exports = nextConfig

For Next.js with version < 13.1:

// next.config.js
const withTM = require("next-transpile-modules")(["echarts", "zrender"]);

module.exports = withTM({})

Props of Component

• option (required, object)

the echarts option config, can see https://echarts.apache.org/option.html#title.

• notMerge (optional, object)

when setOption, not merge the data, default is false. See https://echarts.apache.org/api.html#echartsInstance.setOption.

• replaceMerge (optional, string | string[])

when setOption, default is null. See https://echarts.apache.org/api.html#echartsInstance.setOption.

• lazyUpdate (optional, object)

when setOption, lazy update the data, default is false. See https://echarts.apache.org/api.html#echartsInstance.setOption.

• style (optional, object)

the style of echarts div. object, default is {height: '300px'}.

• className (optional, string)

the class of echarts div. you can setting the css style of charts by class name.

• theme (optional, string)

the theme of echarts. string, should registerTheme before use it (theme object format: https://github.com/ecomfe/echarts/blob/master/theme/dark.js). e.g.

// import echarts
import echarts from 'echarts';
...
// register theme object
echarts.registerTheme('my_theme', {
  backgroundColor: '#f4cccc'
});
...
// render the echarts use option `theme`
<ReactECharts
  option={this.getOption()}
  style={{height: '300px', width: '100%'}}
  className='echarts-for-echarts'
  theme='my_theme' />

• onChartReady (optional, function)

when the chart is ready, will callback the function with the echarts object as it's paramter.

• loadingOption (optional, object)

the echarts loading option config, can see https://echarts.apache.org/api.html#echartsInstance.showLoading.

• showLoading (optional, bool, default: false)

bool, when the chart is rendering, show the loading mask.

• onEvents (optional, array(string=>function) )

binding the echarts event, will callback with the echarts event object, and the echart object as it's paramters. e.g:

const onEvents = {
  'click': this.onChartClick,
  'legendselectchanged': this.onChartLegendselectchanged
}
...
<ReactECharts
  option={this.getOption()}
  style={{ height: '300px', width: '100%' }}
  onEvents={onEvents}
/>

for more event key name, see: https://echarts.apache.org/api.html#events

• opts (optional, object)

the opts of echarts. object, will be used when initial echarts instance by echarts.init. Document here.

<ReactECharts
  option={this.getOption()}
  style={{ height: '300px' }}
  opts={{renderer: 'svg'}} // use svg to render the chart.
/>

• autoResize (optional, boolean)

decide whether to trigger this.resize when window resize. default is true.

Component API & Echarts API

the Component only has one API named getEchartsInstance.

• getEchartsInstance() : get the echarts instance object, then you can use any API of echarts.

for example:

// render the echarts component below with rel
<ReactECharts
  ref={(e) => { this.echartRef = e; }}
  option={this.getOption()}
/>

// then get the `ReactECharts` use this.echarts_react

const echartInstance = this.echartRef.getEchartsInstance();
// then you can use any API of echarts.
const base64 = echartInstance.getDataURL();

TypeScript and useRef() example:

const getOption = () => {/** */};

export default function App() {
	const echartsRef = useRef<InstanceType<typeof ReactEcharts>>(null);

	useEffect(() => {
		if (echartsRef.current) {
			const echartsInstance = echartsRef.current.getEchartsInstance();
			// do something
			echartsInstance.resize();
		}
	}, []);
	return <ReactEcharts ref={echartsRef} option={getOption()} />;
}

About API of echarts, can see https://echarts.apache.org/api.html#echartsInstance.

You can use the API to do:

1. binding / unbinding event.
2. dynamic charts with dynamic data.
3. get the echarts dom / dataURL / base64, save the chart to png.
4. release the charts.

FAQ

How to render the chart with svg when using echarts 4.x

Use the props opts of component with renderer = 'svg'. For example:

<ReactECharts
  option={this.getOption()}
  style={{height: '300px'}}
  opts={{renderer: 'svg'}} // use svg to render the chart.
/>

How to resolve Error Component series.scatter3D not exists. Load it first.

Install and import echarts-gl module when you want to create a GL instance

npm install --save echarts-gl

import 'echarts-gl'
import ReactECharts from "echarts-for-react";

<ReactECharts
  option={GL_OPTION}
/>

LICENSE

MIT@hustcc.