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} 
{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)' } } } ] };

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 (
            
                 this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
                />
            
        );
}

效果展示
react-native-echarts.png

你可能感兴趣的:(react-native echarts(Android))