使用Recharts实现循环进度条

npm install recharts

yarn add recharts

import React from 'react';
import { RadialBarChart, RadialBar, Legend } from 'recharts';

const data = [
  { name: '任务1', uv: 31.47, pv: 2400, fill: '#8884d8' },
  { name: '任务2', uv: 26.69, pv: 4567, fill: '#83a6ed' },
  { name: '任务3', uv: 15.69, pv: 1398, fill: '#8dd1e1' },
  { name: '任务4', uv: 8.22, pv: 9800, fill: '#82ca9d' },
  { name: '任务5', uv: 8.63, pv: 3908, fill: '#a4de6c' },
  { name: '任务6', uv: 2.63, pv: 4800, fill: '#d0ed57' },
  { name: '任务7', uv: 6.67, pv: 4800, fill: '#ffc658' },
  { name: '任务8', uv: 9.99, pv: 4800, fill: '#ffa726' },
  { name: '任务9', uv: 13.33, pv: 4800, fill: '#ff7315' },
  { name: '任务10', uv: 19.99, pv: 4800, fill: '#ff4500' },
];

const ProgressChart = () => {
  return (
    <RadialBarChart width={500} height={300} cx={150} cy={150} innerRadius={20} outerRadius={140} barSize={10} data={data}>
      <RadialBar minAngle={15} label={{ position: 'insideStart', fill: '#fff' }} background clockWise dataKey="uv" />
      <Legend iconSize={10} width={120} height={140} layout="vertical" verticalAlign="middle" align="right" />
    </RadialBarChart>
  );
};

export default ProgressChart;