react-native echarts(Android)

附地址：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: '生长记录统计',
                x: 'center',
                top: 6
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            color: ['#f5222d', '#1890ff', '#52c41a', '#F6BE0F'],
            legend: {
                orient: 'vertical',
                left: 6,
                top: 6,
                data: ['尚未记录', '记录中', '待收获', '已收获']
            },
            series: [
                {
                    name: '生长记录统计',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    label: {
                        normal: {
                            formatter: "{b} : {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复制到android/app/src/main/assets下面
// 修改render方法中source
// 如果打包后图表可以上下左右拖动，将scalesPageToFit设为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