- 为环形图组件添加数据标签显示功能 (dataLabel: true) - 完善图例配置,默认显示在右侧并设置行高 - 为示例组件添加标题和副标题配置 - 将配置项从 `extra.pie` 迁移至 `extra.ring` 以明确图表类型 - 简化环形宽度配置,移除冗余的 `ringWidthRatio` 属性
@@ -46,19 +46,23 @@ export const RingChart: React.FC<RingChartProps> = (props) => {
color: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444'],
padding: [5, 5, 5, 5],
enableScroll: false,
- legend: {},
+ dataLabel: true,
+ legend: {
+ show: true,
+ position: "right",
+ lineHeight: 25
+ },
extra: {
- pie: {
+ ring: {
+ ringWidth: ringWidth,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 0,
labelWidth: 15,
- ringWidth: ringWidth,
- ringWidthRatio: ringWidth,
border: false,
borderWidth: 3,
borderColor: "#FFFFFF",
- ...config.extra?.pie,
+ ...config.extra?.ring,
},
...config.extra,
@@ -49,14 +49,29 @@ function RingChartFCComponent(props: RingChartFCExampleProps) {
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [5,5,5,5],
+ title: {
+ name: "在职状态",
+ fontSize: 15,
+ color: "#666666"
+ subtitle: {
+ name: "70%",
+ fontSize: 25,
+ color: "#7cb5ec"
+ ringWidth: 60,
- ringWidth: 0.6,
- ringWidthRatio: 0.6,
borderColor: "#FFFFFF"