附地址：https://github.com/somonus/react-native-echarts

1摹恨、安裝

npm install native-echarts --save

2筒占、使用

import Echarts from 'native-echarts';

const option = {
            backgroundColor: '#fff',
            title: {
                text: '生長記錄統(tǒng)計',
                x: 'center',
                top: 6
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/> : {c} (ddzvzfx%)"
            },
            color: ['#f5222d', '#1890ff', '#52c41a', '#F6BE0F'],
            legend: {
                orient: 'vertical',
                left: 6,
                top: 6,
                data: ['尚未記錄', '記錄中', '待收獲', '已收獲']
            },
            series: [
                {
                    name: '生長記錄統(tǒng)計',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    label: {
                        normal: {
                            formatter: "梗劫 : {c}批"
                        }
                    },
                    data: [
                        {value: 15, name: '尚未記錄'},
                        {value: 53, name: '記錄中'},
                        {value: 20, name: '待收獲'},
                        {value: 124, name: '已收獲'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

<Echarts option={option} height={300} width={width - 20} scalesPageToFit={true}/>

option是echarts配置届慈，詳見 http://echarts.baidu.com/option.html#title

3、BUG

// Android 打包后文件不顯示
// 將node_modules\native-echarts\src\components\Echarts\tpl.html復(fù)制到android/app/src/main/assets下面
// 修改render方法中source
// 如果打包后圖表可以上下左右拖動憔辫，將scalesPageToFit設(shè)為true
render() {
        return (
            <View style={{flex: 1, height: this.props.height || 400}}>
                <WebView
                    ref="chart"
                    scrollEnabled={false}
                    injectedJavaScript={renderChart(this.props)}
                    style={{
                        height: this.props.height || 400,
                        backgroundColor: this.props.backgroundColor || 'transparent'
                    }}
                    scalesPageToFit={true}
                    source={{uri: 'file:///android_asset/tpl.html'}}
                    onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
                />
            </View>
        );
}

react-native-echarts.png