A very simple echarts(v3.0) wrapper for react.
npm install --save echarts-for-react
How to run the demo:
git clone [email protected]:hustcc/echarts-for-react.git
npm install
npm start
then open http://127.0.0.1:8080/ in your browser. or see http://git.hust.cc/echarts-for-react/
Code of a simple demo code showed below. For more example can see: http://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} />
If you have only used bar chart (or others), you can import echarts modules manually to reduce bundle file size, e.g.
import React from 'react';
// import the core library.
import ReactEchartsCore from 'echarts-for-react/lib/core';
// then import echarts modules those you have used manually.
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
// The usage of ReactEchartsCore are same with above.
<ReactEchartsCore
echarts={echarts}
option={this.getOption()}
notMerge={true}
lazyUpdate={true}
theme={"theme_name"}
onChartReady={this.onChartReadyCallback}
onEvents={EventsDict} />
option
(required, object)
the echarts option config, can see http://echarts.baidu.com/option.html#title.
notMerge
(required, object)
when setOption
, not merge the data, default is false
. See http://echarts.baidu.com/api.html#echartsInstance.setOption.
lazyUpdate
(required, object)
when setOption
, lazy update the data, default is false
. See http://echarts.baidu.com/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 http://echarts.baidu.com/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:
let onEvents = {
'click': this.onChartClick,
'legendselectchanged': this.onChartLegendselectchanged
}
...
<ReactEcharts
option={this.getOption()}
style={{height: '300px', width: '100%'}}
onEvents={onEvents} />
for more event key name, see: http://echarts.baidu.com/api.html#events
the Component only has one API
named getEchartsInstance
.
getEchartsInstance()
: get the echarts instance object, then you can use anyAPI of echarts
.
for example:
// render the echarts component below with rel
<ReactEcharts ref={(e) => { this.echarts_react = e; }}
option={this.getOption()} />
// then get the `ReactEcharts` use this.echarts_react
let echarts_instance = this.echarts_react.getEchartsInstance();
// then you can use any API of echarts.
let base64 = echarts_instance.getDataURL();
About API of echarts, can see http://echarts.baidu.com/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.
MIT@hustcc.