Javascript 如何在react中制作半圆图？

我有一个数据，比如

  {
    "initial": {
      "unit": "GB",
      "value": 2
    },
    "remaining": {
      "unit": "GB",
      "value": 0.2
    },
    "type": "Internet",
  }

其中，

初始

值是移动数据的总gb，

剩余

由剩余可用数据组成

要求：

我的要求如下图所示

我曾经尝试过纯HTML和CSS，但这里的问题是所有内容都是硬编码的。。因此，如果我们有一些百分比，那么我们需要相应地调整css类

.sc percentage

body{背景色：#555888；字体系列：无衬线；颜色：#fff；文本对齐：中间}
代码{显示：内联块；最大宽度：600px；填充：80px 0；行高：1.5；字体系列：单空格；颜色：#ccc}
.sc仪表{宽度：200px；高度：200px；边距：200px自动；}
.sc背景{位置：相对；高度：100px；页边距底部：10px；背景颜色：#fff；边框半径：150px 150px 0 0；溢出：隐藏；文本对齐：中心；}
.sc掩码{位置：绝对；顶部：20px；右侧：20px；左侧：20px；高度：80px；背景色：#555888；边框半径：150px 150px 0}
.sc百分比{位置：绝对；顶部：100px；左侧：-200%；宽度：400%；高度：400%；左边距：100px；背景色：#00aeef；}
.sc百分比{变换：旋转（25度）；变换原点：顶部中心；}
.sc min{float:left；}
.sc max{float:right；}
.sc值{位置：绝对；顶部：50%；左侧：0；宽度：100%；字体大小：48px；字体重量：700}

要更改仪表的当前值，需要在HTML部分中将88更改为其他值，并将.sc百分比旋转值从158deg更新为其他值。
这将是简单图表库的一部分。

0.2
0
2.

反应组件：

const数据={
“首字母”：{
“单位”：“GB”，
“价值”：2
},
“剩余”：{
“单位”：“GB”，
“价值”：0.9
},
“类型”：“互联网”，
};
函数半圆图（{min，max，value}）{
常数角=（值/最大值）*180；
常量样式={'--angle'：angle+'deg'}；
返回(
{value}
{min}
{max}
)
}
ReactDOM.render(
,
document.querySelector（“#app”）
);
：根目录{
--角度：90度；
}
身体{
背景色：#555888；
字体系列：无衬线；
颜色：#fff；
文本对齐：居中
}
代码{
显示：内联块；
最大宽度：600px；
填充：0；
线高：1.5；
字体系列：monospace；
颜色：#ccc
}
.sc规{
宽度：200px；
高度：自动；
保证金：20px自动；
}
博士学位背景{
位置：相对位置；
高度：100px；
边缘底部：10px；
背景色：#fff；
边界半径：150px 150px 0；
溢出：隐藏；
文本对齐：居中；
}
.sc面罩{
位置：绝对位置；
顶部：20px；
右：20px；
左：20px；
高度：80px；
背景色：#555888；
边界半径：150px 150px 0
}
.sc百分比{
位置：绝对位置；
顶部：100px；
左-200%；
宽度：400%；
身高：400%；
左边距：100px；
背景色：#00aeef；
}
.sc百分比{
变换：旋转（var（--angle））；
变换原点：顶部中心；
}
.sc min{
浮动：左；
}
.sc最大值{
浮动：对；
}
.sc值{
位置：绝对位置；
最高：50%；
左：0；
宽度：100%；
字体大小：48px；
字号：700
}


这将是简单图表库的一部分。

反应组件：


const数据={
“首字母”：{
“单位”：“GB”，
“价值”：2
},
“剩余”：{
“单位”：“GB”，
“价值”：0.9
},
“类型”：“互联网”，
};
函数半圆图（{min，max，value}）{
常数角=（值/最大值）*180；
常量样式={'--angle'：angle+'deg'}；
返回(
{value}
{min}
{max}
)
}
ReactDOM.render(
,
document.querySelector（“#app”）
);
：根目录{
--角度：90度；
}
身体{
背景色：#555888；
字体系列：无衬线；
颜色：#fff；
文本对齐：居中
}
代码{
显示：内联块；
最大宽度：600px；
填充：0；
线高：1.5；
字体系列：monospace；
颜色：#ccc
}
.sc规{
宽度：200px；
高度：自动；
保证金：20px自动；
}
博士学位背景{
位置：相对位置；
高度：100px；
边缘底部：10px；
背景色：#fff；
边界半径：150px 150px 0；
溢出：隐藏；
文本对齐：居中；
}
.sc面罩{
位置：绝对位置；
顶部：20px；
右：20px；
左：20px；
高度：80px；
背景色：#555888；
边界半径：150px 150px 0
}
.sc百分比{
位置：绝对位置；
顶部：100px；
左-200%；
宽度：400%；
身高：400%；
左边距：100px；
背景色：#00aeef；
}
.sc百分比{
变换：旋转（var（--angle））；
变换原点：顶部中心；
}
.sc min{
浮动：左；
}
.sc最大值{
浮动：对；
}
.sc值{
位置：绝对位置；
最高：50%；
左：0；
宽度：100%；
字体大小：48px；
字号：700
}


这将是简单图表库的一部分。

以下是一个动画示例：

您可以在React中设置样式变量，这就是此Codesandbox的作用：

        <div
          class="sc-percentage"
          style={{ transform: `rotate(${(percent / 100) * 180}deg)` }}
        ></div>

下面是一个动画示例：

您可以在React中设置样式变量，这就是此Codesandbox的作用：

        <div
          class="sc-percentage"
          style={{ transform: `rotate(${(percent / 100) * 180}deg)` }}
        ></div>

看起来在react中，您需要手动将元素上的CSS设置为将
transform:rotate（25度）
设置为表示条形图完成百分比的度数。您可以在React中通过每帧更新度数来设置此动画，也可以使用CSS动画将度数设置为某个值，并让CSS动画处理两帧之间的转换two@AndyRay，谢谢你的评论。。仅仅像上面给出的代码片段那样处理就足够了吗？因为我需要将中间范围也
1
放在顶部。。我可以将
0
和
2
分别放在开始和结束位置，但还需要将中间范围
1
放在顶部。