React Native Echarts

Installation

Using npm:

$ npm i react-native-ycharts -S

Using yarn:

$ yarn add react-native-ycharts

Usage

/**
|--------------------------------------------------
| react-native-ycharts demo
|--------------------------------------------------
*/
import React from 'react';
import { View, Text, StyleSheet, PixelRatio } from 'react-native';

import Ycharts from 'react-native-ycharts';
import { PieOptions } from '../../utils/echarts/PieConfig';

class YchartsDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            inventoryRadionOptions: {}
        }
    }

    componentDidMount() {
        this._handlerPie()
    }

    _handlerPie() {
        PieOptions.series[0].data = [
            { value: 10, name: '北京' },
            { value: 5, name: '上海' },
            { value: 15, name: '深圳' },
            { value: 20, name: '南阳' },
        ]
        PieOptions.series[0].labelLine.normal.length2 = PixelRatio.get() > 2 ? 60 : 40
        this.state.inventoryRadionOptions = PieOptions
        // this.setState({
        //     inventoryRadionOptions: PieOptions
        // })
        //ref Partial refresh
        this.irChart.invokeReload(this.state.inventoryRadionOptions)
    }

    _irClick(d) {
        console.log(d.data, 'item')
    }

    render() {
        return (
            <View style={styles.container}>
               <Ycharts ref={(ir) => this.irChart = ir} onPress={(d) => this._irClick(d)} option={this.state.inventoryRadionOptions} height={120} />

            </View>
        );
    }
}

// define your styles
const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: '26%',
        // justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ccc',
    }
});

export default YchartsDemo;