react-native-animation-pieChart

react-native-animation-pieChart

带有动画效果的绘制扇形图，可以绘制边线为虚线。

PropTypes

// 饼图数据
percentArray: PropTypes.array.isRequired,
// 饼图颜色
colorArray: PropTypes.array.isRequired,
// 饼图内直径
innerRadius: PropTypes.number,
// 饼图外直径
outerRadius: PropTypes.number.isRequired,
// 动画执行方式
animationType: PropTypes.oneOf(['sequence', 'synchron']),
// 开始动画的角度
rotation:PropTypes.number,
// 动画执行方向，是否为顺时针
isClockwise: PropTypes.bool,
// 动画执行时间
duration: PropTypes.number,
// 配置, eg: [,{stroke:'red',strokeWidth:1,strokeDash:[2,5]},,{stroke:'black',strokeWidth:1,strokeDash:[2,5]}]
configArray: PropTypes.array,
// 动画结束时的回调函数
animationEndCallBack: PropTypes.func,

example

简单的例子

import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'
import { PieChart } from '../PieChart'

export default class PieChartView extends Component {

    constructor(props) {
        super(props);


    }

    componentDidMount() {

    }



    render() {
        return (
            <View style={privateStyle.bgStyle}>
                <View style={privateStyle.pieStyle}>
                    <PieChart
                        percentArray={[0.2,0.1, 0.4,0.3]}
                        colorArray={['#4d84eb', '#fca63e','green','yellow']}
                        outerRadius={40}
                        innerRadius={25}
                    />
                </View>
            </View>
        );
    }
}

var privateStyle = StyleSheet.create({
    bgStyle: {
        flex: 1,
    },
    pieStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },

})

更多的用法请参照： https://github.com/zramals/react-native-animation-pieChart/blob/master/demo/index.js