react中recharts使用的示例

项目中安装recharts

javascript 复制代码

npm install recharts

示例代码

javascript 复制代码

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

代码解读

代码结构和用法

导入依赖

javascript 复制代码

import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts'
import { STAT_COLORS } from '../../../constant'

导入 recharts 库的饼图相关组件

◦ 导入项目中定义的统计颜色常量

2.数据定义

javascript 复制代码

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.组件渲染

javascript 复制代码

<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 提供鼠标悬停时的提示信息

组件特点

响应式设计：使用 ResponsiveContainer 使饼图能够自适应容器大小
自定义颜色：通过 Cell 组件为每个扇形设置不同的颜色
交互功能：通过 Tooltip 提供鼠标悬停时的数据提示
标签显示：饼图扇形上显示名称和值的标签

使用场景

这个组件主要用于：

问卷统计页面的图表展示
数据分布的可视化表示
演示饼图功能的示例组件

如何使用

在其他组件中可以这样引入使用：

javascript 复制代码

import PieDemo from './PieDemo'

// 在JSX中
<PieDemo />

样式设置

• 容器大小为 300px 宽度和 400px 高度

• 饼图居中显示（cx="50%"，cy="50%"）

• 外半径为 50 像素

• 标签格式为 "名称: 值"