react recharts饼图 及配置项

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

    • data:设置图表使用的数据数组。
    • dataKey:指定用于饼图切片面积计算的数据字段。
    • nameKey:指定用于显示在图例和提示框中的数据字段。
    • cxcy:设置饼图中心的位置。
    • 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}>
      <Pie
        data={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;
相关推荐
Mike_jia4 分钟前
Icinga 2:开源监控领域的全能选手——从零构建企业级智能运维体系
前端
wuxuanok5 分钟前
Web前端开发-HTML、CSS
前端·css·html
Mike_jia6 分钟前
Dish:套接字监控领域的「听诊器」——轻量级网络健康守护神深度解析
前端
独立开阀者_FwtCoder15 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士15 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
南岸月明15 分钟前
不聊主业,聊聊你们眼中的副业是什么样的?
前端
Kevin在掘金9201420 分钟前
c#、.net、Fluent UI Blazor
前端
LovelyAqaurius21 分钟前
RSA加密算法:从数学魔法到现实守护
前端
Hilaku23 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
星语卿23 分钟前
Js事件循环
javascript