Package Exports
- echarts-for-react
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (echarts-for-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
echarts-for-react
A very simple echarts(v3.0) wrapper for react.
install
npm install echarts-for-react
How to run the demo:
git clone git@github.com: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/
usage
Simple demo code. for more example can see: http://git.hust.cc/echarts-for-react/
import React from 'react';
import ReactEcharts from 'echarts-for-react';
<ReactEcharts
option={this.getOtion()}
height={300}
theme={"theme_name"}
onChartReady={this.onChartReadyCallback}
onEvents={EventsDict} />
component props
option
the echarts option config, can see http://echarts.baidu.com/option.html#title.
height
the height
of echarts. number
, with px
as it's unit.
theme
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.getOtion()}
height={300}
theme='my_theme' />
onChartReady
when the chart is ready, will callback the function with the echarts object
as it's paramter.
onEvents
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.getOtion()}
height={300}
onEvents={onEvents} />
for more event key name, see: http://echarts.baidu.com/api.html#events
TODO
- echart API
LICENSE
MIT