react native 饼状图
时间: 2023-09-04 10:06:45 浏览: 47
要在 React Native 中实现饼状图,你可以使用以下步骤:
1. 安装 `react-native-svg` 模块,用于在 React Native 中渲染 SVG 图形。
```
npm install react-native-svg --save
```
2. 导入 `PieChart` 和 `Pie` 组件。
```javascript
import { PieChart, Pie } from 'react-native-svg-charts';
import { View } from 'react-native';
```
3. 在渲染函数中使用 `PieChart` 和 `Pie` 组件。
```javascript
render() {
const data = [
{
key: 1,
value: 50,
svg: { fill: 'red' },
},
{
key: 2,
value: 30,
svg: { fill: 'green' },
},
{
key: 3,
value: 20,
svg: { fill: 'blue' },
},
];
return (
<View style={{ flex: 1 }}>
<PieChart style={{ height: 200 }} data={data}>
<Pie
data={data}
innerRadius={0}
outerRadius={80}
animate={true}
animationDuration={1500}
valueAccessor={({ item }) => item.value}
/>
</PieChart>
</View>
);
}
```
以上代码将创建一个包含三个扇形的饼状图,每个扇形的颜色分别为红色、绿色和蓝色,大小比例分别为 50:30:20。你可以根据自己的需求修改数据和样式。