Quellcode durchsuchen

✨ feat(charts): 优化环形图组件配置

- 为环形图组件添加数据标签显示功能 (dataLabel: true)
- 完善图例配置,默认显示在右侧并设置行高
- 为示例组件添加标题和副标题配置
- 将配置项从 `extra.pie` 迁移至 `extra.ring` 以明确图表类型
- 简化环形宽度配置,移除冗余的 `ringWidthRatio` 属性
yourname vor 2 Wochen
Ursprung
Commit
45e73ecd43

+ 9 - 5
mini-ui-packages/mini-charts/src/components/RingChart.tsx

@@ -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,
     },

+ 18 - 3
mini-ui-packages/mini-charts/src/components/RingChartFCExample.tsx

@@ -49,14 +49,29 @@ function RingChartFCComponent(props: RingChartFCExampleProps) {
           color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
           padding: [5,5,5,5],
           enableScroll: false,
+          dataLabel: true,
+          legend: {
+            show: true,
+            position: "right",
+            lineHeight: 25
+          },
+          title: {
+            name: "在职状态",
+            fontSize: 15,
+            color: "#666666"
+          },
+          subtitle: {
+            name: "70%",
+            fontSize: 25,
+            color: "#7cb5ec"
+          },
           extra: {
-            pie: {
+            ring: {
+              ringWidth: 60,
               activeOpacity: 0.5,
               activeRadius: 10,
               offsetAngle: 0,
               labelWidth: 15,
-              ringWidth: 0.6,
-              ringWidthRatio: 0.6,
               border: false,
               borderWidth: 3,
               borderColor: "#FFFFFF"