目录
使用场景
如何使用
项目中安装recharts
npm install recharts示例代码
import React, { FC } from 'react' // 导入recharts图表库的相关组件 import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts' // 导入统计颜色常量 import { STAT_COLORS } from '../../../constant' // 定义饼图的示例数据 const data01 = [ { name: 'Group A', value: 400 }, { name: 'Group B', value: 300 }, { name: 'Group C', value: 300 }, { name: 'Group D', value: 200 }, { name: 'Group E', value: 278 }, { name: 'Group F', value: 189 }, ] // 饼图演示组件 const PieDemo: FC = () => { return ( // 容器div，设置宽度和高度 <div style={{ width: '300px', height: '400px' }}> {/* 响应式容器，使图表能够自适应容器大小 */} <ResponsiveContainer width="100%" height="100%"> {/* 饼图组件 */} <PieChart> {/* 饼图数据配置 */} <Pie dataKey="value" // 指定数据中用于计算扇形大小的字段 data={data01} // 饼图的数据源 cx="50%" // x 轴的偏移，居中显示 cy="50%" // y 轴的偏移，居中显示 outerRadius={50} // 饼图的外半径 fill="#8884d8" // 饼图的默认填充色 label={i => `${i.name}: ${i.value}`} // 设置标签格式，显示名称和值 > {/* 为每个扇形设置不同的颜色 */} {data01.map((i, index) => { return <Cell key={index} fill={STAT_COLORS[index]} /> // 使用预定义的颜色数组 })} </Pie> {/* 鼠标悬停提示框 */} <Tooltip /> </PieChart> </ResponsiveContainer> </div> ) } export default PieDemo代码解读
代码结构和用法
1. 导入依赖
import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts' import { STAT_COLORS } from '../../../constant'导入 recharts 库的饼图相关组件
◦ 导入项目中定义的统计颜色常量
2.数据定义
const data01 = [ { name: 'Group A', value: 400 }, { name: 'Group B', value: 300 }, { name: 'Group C', value: 300 }, { name: 'Group D', value: 200 }, { name: 'Group E', value: 278 }, { name: 'Group F', value: 189 }, ]3.组件渲染
<div style={{ width: '300px', height: '400px' }}> <ResponsiveContainer width="100%" height="100%"> <PieChart> <Pie ...> {data01.map((i, index) => { return <Cell key={index} fill={STAT_COLORS[index]} /> })} </Pie> <Tooltip /> </PieChart> </ResponsiveContainer> </div>使用 ResponsiveContainer 确保图表自适应容器大小
◦ PieChart 是饼图的主容器
◦ Pie 定义饼图的配置，如数据源、半径、标签等
◦ Cell 为每个扇形设置不同颜色
◦ Tooltip 提供鼠标悬停时的提示信息
组件特点
1. 响应式设计：使用 ResponsiveContainer 使饼图能够自适应容器大小
2. 自定义颜色：通过 Cell 组件为每个扇形设置不同的颜色
3. 交互功能：通过 Tooltip 提供鼠标悬停时的数据提示
4. 标签显示：饼图扇形上显示名称和值的标签
使用场景
这个组件主要用于：
- 问卷统计页面的图表展示
- 数据分布的可视化表示
- 演示饼图功能的示例组件
如何使用
在其他组件中可以这样引入使用：
import PieDemo from './PieDemo' // 在JSX中 <PieDemo />样式设置
• 容器大小为 300px 宽度和 400px 高度
• 饼图居中显示（cx="50%"，cy="50%"）
• 外半径为 50 像素
• 标签格式为 "名称: 值"
