【RFC】New Component: Score 得分图

[Yage-h]

概述 Summary

新增 Score 得分图组件

动机 Motivation

主要用于突出展示一个数值分数的动态效果。

方案设计 Detailed Design

• 通过多个不同 border-radius 的不规则圆圈叠加, 从外到里设置不同的旋转速度，形成中心静止，外侧波动的效果
• 默认 85 <= num 分为优（绿色），70 <= num < 85 为良（蓝色），60 <= num < 70 为中（橙色），NUM < 60 为差（红色）

API

参数	说明	类型	默认值	版本
size	图表大小	string | number	middle	-
color	图表颜色	string	green	-
value	数值	string | number	-	-
valueStyle	数字样式	CSSProperties	-	-
unit	单位	string | boolean	分	-
unitStyle	单位样式	CSSProperties	-	-

基础示例 Basic Example

import React from 'react';
import { Score } from '@oceanbase/charts';

export default () => (
  <Score value={85} />
);