npm install react-chartjs-2 chart.js

import React from 'react';
import { Pie } from 'react-chartjs-2';

const PieChart = () => {
  const data = {
    labels: ['标签1', '标签2', '标签3'],
    datasets: [
      {
        data: [30, 50, 20], // 变量数据
        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], // 饼图各部分的颜色
        hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], // 鼠标悬停时的颜色
      },
    ],
  };

  return (
    <div>
      <Pie data={data} />
    </div>
  );
};

const App = () => {
  return (
    <div>
      <h1>变量数据饼图</h1>
      <PieChart />
    </div>
  );
};