rn-bd-echarts

Baidu echarts for React Native

Installation

$ npm install --save rn-bd-echarts
or
$ yarn add rn-bd-echarts

Automatic Install

react-native link rn-bd-echarts

Manual Install

Android

1. Add the following lines to android/settings.gradle:

   include ':rn-bd-echarts'
   project(':rn-bd-echarts').projectDir = new File(settingsDir, '../node_modules/rn-bd-echarts/android')

2. Add the compile line to the dependencies in android/app/build.gradle:

   dependencies {
       ...
       compile project(':rn-bd-echarts')
   }

3. Add the import and link the package in MainApplication.java:

   import com.rnbdecharts.RnBdEchartsPackage; // <-- add this import 
    
   public class MainApplication extends Application implements ReactApplication {
       @Override
       protected List<ReactPackage> getPackages() {
           return Arrays.<ReactPackage>asList(
               new MainReactPackage(),
               new RnBdEchartsPackage() // <-- add this line 
           );
       }
   }

Usage

/**
    The formatter does not support function in the configuration items
    support `formatter: '{b}: {c}'`
    not support `formatter: function(){}`
**/
import RNECharts from 'rn-bd-echarts';
class ChartTest extends Component{
    render(){
        return (
            <RNECharts
                ref={charts => this.charts = charts} 
                option={this.state.option}
            />
        )
    }
}

Methods

• setOption
• getOption
• dispatchAction
• showLoading
• hideLoading
• on
• off

Actions

• Baidu ECharts Actions

this.charts.dispatchAction({type: 'highlight',seriesIndex: 2});

Events

• Baidu ECharts Events

this.charts.on('click', (e) => {console.log(e)});
this.charts.off('click');

License

MIT