react recharts饼图 及配置项

本文主要是介绍react recharts饼图 及配置项，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

• <Pie>：指定饼图的数据和样式。

  • data：设置图表使用的数据数组。
  • dataKey：指定用于饼图切片面积计算的数据字段。
  • nameKey：指定用于显示在图例和提示框中的数据字段。
  • cx 和 cy：设置饼图中心的位置。
  • outerRadius：设置饼图的外半径。
  • fill：设置饼图的颜色。
  • label：设置是否显示切片标签。

• <Cell>：为每个切片设置自定义颜色。可以根据需要为每个数据项选择不同的颜色。

• <Legend>：设置图例的样式和位置。

• <Tooltip>：设置鼠标悬停时显示的提示框。

import React from 'react';
import { PieChart, Pie, Cell, Legend, Tooltip } from 'recharts';const data = [{ name: 'A', value: 400 },{ name: 'B', value: 300 },{ name: 'C', value: 200 },{ name: 'D', value: 100 },
];const colors = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];const PieChartComponent = () => {return (<PieChart width={400} height={400}><Piedata={data}dataKey="value"nameKey="name"cx="50%"cy="50%"outerRadius={80}fill="#8884d8"label>{data.map((entry, index) => (<Cell key={`cell-${index}`} fill={colors[index % colors.length]} />))}</Pie><Legend verticalAlign="bottom" height={36} /><Tooltip /></PieChart>);
};export default PieChartComponent;

这篇关于react recharts饼图 及配置项的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---