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;
相关推荐
小桥风满袖1 天前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心1 天前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode
少年阿闯~~1 天前
CSS3的新特性
前端·javascript·css3
IT_陈寒1 天前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
智能化咨询1 天前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang1 天前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼1 天前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥1 天前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师1 天前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js