A simple chart components based on React and Echarts(3.x & 4.x)
Install
npm install --save echarts @cany/r-charts
Usage
to use directly
import React from 'react';
import RCharts from '@cany/r-charts';
import 'echarts/lib/chart/line';
// import 'echarts/lib/chart/bar';
// import 'echarts/lib/chart/pie';
// ....
<RCharts
option={this.getOption()}
theme={'ThemeName'}
events={this.events}
/>
inherit
// ReLine.js
import RCharts from '@cany/r-charts';
import 'echarts/lib/chart/line';
export default class ReLine extends RCharts {};
// main.js
<ReLine
option={this.getOption()}
theme={'ThemeName'}
events={this.events}
/>
Component Props
-
option
(required, object)the echarts option config, can see option.
-
style
(optional, object)the
style
of echarts container. it is{ height: 300 }
by default. -
className
(optional, string)the
class
of echarts container. -
theme
(optional, string)the
theme
of echarts, should use registerTheme before using it -
events
(optional, object)binding the echarts event, it will be invoked with the
echarts event object
as paramters.let events = { 'click': this.onChartClick, ... } <RCharts option={ this.getOption() } style={{ height: 300 }} events={ events } />
for more events, see events
-
initOptions
(optional, object)the third options when create an echarts instance by invoking the echart.init api
-
setOptionOpts
(optional, object)the second options as object, when set echarts instance by invoking the echartsInstance.setOption api
Component API
-
getEchartsInstance()
get the echarts instance, then you can use any
API of echarts
. e.g:<RCharts ref={ inst => { this.rcharts = inst } } option={ this.getOption() } /> const echarts = this.rcharts..getEchartsInstance() echarts.resize()
About API of echarts instance, can see echartsInstance.
Licensee
MIT@kimozhang.