React.js实现环形评分组件求助：现有方案未达预期

我想实现一个类似附件图片的环形评分组件，但尝试了多个组件库（如react-circular-progressbar、react-d3-speedometer）和自定义CSS都没达到预期效果。

以下是我用react-circular-progressbar尝试的代码：

<div className="mt-6 flex justify-center">              
  <div className="w-2/5 item-center">
    <CircularProgressbarWithChildren
      value={80}
      text="8"
      strokeWidth={15}
      circleRatio={0.75}
      styles={
        buildStyles({
          rotation: 1 / 2 + 1 / 8,
          strokeLinecap: 'butt',
        })
      }
    >
      <RadialSeparators
        count={13}
        style={{
          background: '#fff',
          width: '2px',
          height: `${15}%`,
        }}
      />                
    </CircularProgressbarWithChildren>             
  </div>              
</div> 

恳请各位提供实现思路或修改方案。

解决方案：基于react-circular-progressbar调整实现 #

你可以通过调整样式参数、自定义刻度线逻辑来贴近需求，以下是修改后的可运行示例：

import { CircularProgressbarWithChildren, buildStyles } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';

const CustomRatingCircle = () => {
  const score = 8;
  const progressValue = (score / 10) * 100;

  return (
    <div className="mt-6 flex justify-center">
      <div style={{ width: '200px', position: 'relative' }}>
        <CircularProgressbarWithChildren
          value={progressValue}
          text={`${score}`}
          strokeWidth={12}
          circleRatio={0.75}
          styles={buildStyles({
            rotation: 0.375,
            strokeLinecap: 'round',
            pathColor: `rgb(64, 196, 255)`,
            textColor: '#333',
            textSize: '3rem',
            trailColor: '#e0e0e0',
          })}
        >
          {/* 自定义刻度线，区分主次刻度 */}
          {Array.from({ length: 10 }).map((_, index) => {
            const angle = index * 27 + 135;
            return (
              <div
                key={index}
                style={{
                  position: 'absolute',
                  top: '0',
                  left: '50%',
                  width: '2px',
                  height: index % 2 === 0 ? '12%' : '8%',
                  background: '#999',
                  transformOrigin: 'center bottom',
                  transform: `translateX(-50%) rotate(${angle}deg)`,
                }}
              />
            );
          })}
        </CircularProgressbarWithChildren>
      </div>
    </div>
  );
};

export default CustomRatingCircle;

关键调整说明： #

• 起始位置校准：rotation: 0.375让270度环形从左下方起始，匹配仪表盘的视觉布局
• 刻度线自定义：放弃组件自带的RadialSeparators，用绝对定位的div手动生成刻度，可灵活控制长短、数量和颜色
• 进度条细节优化：设置strokeLinecap: 'round'让进度条端点更圆润，调整pathColor和trailColor匹配需求风格
• 评分文本突出：增大textSize让评分数字更醒目

如果需要添加交互（比如点击刻度修改评分），给刻度线绑定点击事件、更新score值即可。

内容的提问来源于stack exchange，提问作者Roshan karn