What is echarts-for-react?
echarts-for-react is a React wrapper for Apache ECharts, a powerful, interactive charting and visualization library. This package allows you to easily integrate ECharts into your React applications, providing a wide range of chart types and customization options.
What are echarts-for-react's main functionalities?
Basic Line Chart
This code demonstrates how to create a basic line chart using echarts-for-react. The chart displays data for each day of the week.
import React from 'react';
import ReactECharts from 'echarts-for-react';
const LineChart = () => {
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
return <ReactECharts option={option} />;
};
export default LineChart;
Bar Chart
This code demonstrates how to create a bar chart using echarts-for-react. The chart displays data for each day of the week.
import React from 'react';
import ReactECharts from 'echarts-for-react';
const BarChart = () => {
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};
return <ReactECharts option={option} />;
};
export default BarChart;
Pie Chart
This code demonstrates how to create a pie chart using echarts-for-react. The chart displays data for different traffic sources.
import React from 'react';
import ReactECharts from 'echarts-for-react';
const PieChart = () => {
const option = {
series: [
{
type: 'pie',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};
return <ReactECharts option={option} />;
};
export default PieChart;
Other packages similar to echarts-for-react
react-chartjs-2
react-chartjs-2 is a React wrapper for Chart.js, a popular charting library. It provides a variety of chart types and is known for its simplicity and ease of use. Compared to echarts-for-react, react-chartjs-2 may have fewer customization options but is often easier to set up and use for basic charts.
recharts
Recharts is a composable charting library built on React components. It is highly customizable and provides a wide range of chart types. Recharts is known for its declarative approach and ease of integration with React applications. Compared to echarts-for-react, Recharts offers a more React-centric API and may be more intuitive for React developers.
victory
Victory is a modular charting library for React and React Native. It provides a wide range of chart types and is designed to be highly customizable and flexible. Victory is known for its robust documentation and active community. Compared to echarts-for-react, Victory offers a more component-based approach and may be more suitable for complex, custom visualizations.
echarts-for-react
The simplest, and the best React wrapper for Apache ECharts.
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';
<ReactECharts option={this.getOption()} />
You can run website.
$ git clone git@github.com: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';
<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:
import React from 'react';
import ReactEChartsCore from 'echarts-for-react/lib/core';
import * as echarts from 'echarts/core';
import {
BarChart,
} from 'echarts/charts';
import {
GridComponent,
TooltipComponent,
TitleComponent,
DatasetComponent,
} from 'echarts/components';
import {
CanvasRenderer,
} from 'echarts/renderers';
echarts.use(
[TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
);
<ReactEChartsCore
echarts={echarts}
option={this.getOption()}
notMerge={true}
lazyUpdate={true}
theme={"theme_name"}
onChartReady={this.onChartReadyCallback}
onEvents={EventsDict}
opts={}
/>
With Echarts.js v3 or v4:
import React from 'react';
import ReactEChartsCore from 'echarts-for-react/lib/core';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
<ReactEChartsCore
echarts={echarts}
option={this.getOption()}
notMerge={true}
lazyUpdate={true}
theme={"theme_name"}
onChartReady={this.onChartReadyCallback}
onEvents={EventsDict}
opts={}
/>
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.
lazyUpdate
(optional, object)
when setOption
, lazy update the data, default is false
. See https://echarts.apache.org/api.html#echartsInstance.setOption.
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.
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 from 'echarts';
...
echarts.registerTheme('my_theme', {
backgroundColor: '#f4cccc'
});
...
<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
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'}}
/>
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:
<ReactECharts
ref={(e) => { this.echartRef = e; }}
option={this.getOption()}
/>
const echartInstance = this.echartRef.getEchartsInstance();
const base64 = echartInstance.getDataURL();
About API of echarts, can see https://echarts.apache.org/api.html#echartsInstance.
You can use the API to do:
binding / unbinding
event.dynamic charts
with dynamic data.- get the echarts dom / dataURL / base64, save the chart to png.
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'}}
/>
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.