feat: dount add pielabel

src/Donut/components/PieLabel/index.tsx

@@ -0,0 +1,47 @@
+import React, { FC } from 'react';
+import {
+  Chart,
+  Geometry,
+  Tooltip,
+  Legend,
+  Coordinate,
+  // Axis,
+  Guide,
+  px2hd,
+  PieLabel,
+  F2,
+} from '@alitajs/f2';
+
+const TableLegend: FC<any> = props => {
+  const { x, y, total } = props;
+  return (
+    <PieLabel
+      {...props}
+      inflectionOffset={20}
+      sidePadding={15}
+      label1={function label1(data) {
+        const text = !isNaN(Number(data[x]))
+          ? `${data[x]}/${((parseInt(data[x], 10) / total) * 100).toFixed(0)}%`
+          : data[x];
+        return {
+          text,
+          fill: '#808080',
+          fontSize: px2hd(22),
+        };
+      }}
+      label2={function label2(data) {
+        const text = !isNaN(Number(data[y]))
+          ? `${data[y]}/${((parseInt(data[y], 10) / total) * 100).toFixed(0)}%`
+          : data[y];
+        return {
+          fill: '#000000',
+          text,
+          fontWeight: px2hd(500),
+          fontSize: px2hd(20),
+        };
+      }}
+    />
+  );
+};
+
+export default TableLegend;

src/Donut/components/index.ts

@@ -2,3 +2,4 @@ export { default as RightLegend } from './RightLegend';
 export { default as TableLegend } from './TableLegend';
 export { default as CustomTableLegend } from './CustomTableLegend';
 export { default as CustomLegend } from './CustomLegend';
+export { default as PieLabel } from './PieLabel';

src/Donut/index.tsx

@@ -22,6 +22,7 @@ import {
   RightLegend,
   CustomTableLegend,
   CustomLegend,
+  PieLabel,
 } from './components';
 import { CustomLegendProps } from './components/CustomLegend';
 import './index.less';
@@ -73,7 +74,8 @@ export interface DountProps {
     | 'singleLeg'
     | 'customTable'
     | 'custom'
-    | 'progress';
+    | 'progress'
+    | 'pieLabel';
   /**
    * 对数据进行单属性过滤，比如展示数值加上单位
    */
@@ -170,7 +172,7 @@ export interface DountProps {
 interface TableLegendProps
   extends Omit<
     DountProps,
-    'type' | 'title' | 'colDefs' | 'sumText' | 'sumTitle'
+    'type' | 'title' | 'colDefs' | 'sumText' | 'sumTitle' | 'pieLabel'
   > {
   chart?: ChartProps;
   total: number;
@@ -301,6 +303,7 @@ const Donut: React.FC<DountProps> = props => {
   const isCustomTableLegend = type === 'customTable';
   const isCustomLegend = type === 'custom';
   const isProgressLegend = type === 'progress';
+  const isPieLabel = type === 'pieLabel';
 
   if (!data) {
     return <p>data is undefined!</p>;
@@ -503,6 +506,29 @@ const Donut: React.FC<DountProps> = props => {
             renderLegend={renderLegend}
           />
         )}
+        {isPieLabel && (
+          <PieLabel
+            {...props}
+            total={total}
+            sidePadding={40}
+            label1={function label1(data) {
+              return {
+                text: data[x],
+                fill: '#808080',
+                fontWeight: px2hd(700),
+                fontSize: px2hd(24),
+              };
+            }}
+            label2={function label2(data) {
+              return {
+                fill: '#000000',
+                text: data[y]?.toFixed(2),
+                fontWeight: px2hd(700),
+                fontSize: px2hd(24),
+              };
+            }}
+          />
+        )}
       </Chart>
     </div>
   );