label style

Author: Imiss-U1025

client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts

@@ -77,6 +77,12 @@ export function getSeriesConfig(props: EchartsConfigProps) {
       endAngle: s.getView().endAngle,
       name: s.getView().seriesName,
       selectedMode: "single",
+      label: {
+        position: s.getView().labelPosition,
+        alignTo: s.getView().labelAlignTo,
+        bleedMargin: s.getView().labelBleedMargin,
+        edgeDistance: s.getView().labelEdgeDistance,
+      },
       encode: {
         itemName: props.xAxisKey,
         value: s.getView().columnName,

client/packages/lowcoder-comps/src/comps/pieChartComp/seriesComp.tsx

@@ -33,55 +33,61 @@ export function newSeries(name: string, columnName: string): SeriesDataType {
   };
 }
 
-export function newMarkLine(type: string): MarkLineDataType {
-  return {
-    type,
-    dataIndex: genRandomKey(),
-  };
-}
-
-export const MarkLineTypeOptions = [
+export const RoseTypeOptions = [
   {
-    label: trans("pieChart.max"),
-    value: "max",
+    label: trans("pieChart.radius"),
+    value: "radius",
   },
   {
-    label: trans("pieChart.average"),
-    value: "average",
+    label: trans("pieChart.area"),
+    value: "area",
   },
   {
-    label: trans("pieChart.min"),
-    value: "min",
+    label: trans("pieChart.none"),
+    value: "none",
   },
 ] as const;
 
-export const RoseTypeOptions = [
+export const LabelAlignToOptions = [
   {
-    label: trans("pieChart.radius"),
-    value: "radius",
+    label: trans("pieChart.none"),
+    value: "none",
   },
   {
-    label: trans("pieChart.area"),
-    value: "area",
+    label: trans("pieChart.labelLine"),
+    value: "labelLine",
   },
   {
-    label: trans("pieChart.none"),
-    value: "none",
+    label: trans("pieChart.edge"),
+    value: "edge",
   },
 ] as const;
 
-export function newMarkArea(): MarkLineDataType {
-  return {
-    dataIndex: genRandomKey(),
-  };
-}
+export const LabelPositionOptions = [
+  {
+    label: trans("pieChart.outer"),
+    value: "outer",
+  },
+  {
+    label: trans("pieChart.inner"),
+    value: "inner",
+  },
+  {
+    label: trans("pieChart.center"),
+    value: "center",
+  },
+] as const;
 
 const seriesChildrenMap = {
   columnName: StringControl,
   seriesName: StringControl,
   startAngle: withDefault(NumberControl, 0),
   endAngle: withDefault(NumberControl, 360),
   roseType: dropdownControl(RoseTypeOptions, "none"),
+  labelAlignTo: dropdownControl(LabelAlignToOptions, "none"),
+  labelPosition: dropdownControl(LabelPositionOptions, "outer"),
+  labelBleedMargin: withDefault(NumberControl, 5),
+  labelEdgeDistance: withDefault(StringControl, '25%'),
   hide: BoolControl,
   // unique key, for sort
   dataIndex: valueComp<string>(""),
@@ -119,6 +125,18 @@ class SeriesComp extends SeriesTmpComp {
         {this.children.roseType.propertyView({
           label: trans("pieChart.roseType"),
         })}
+        {this.children.labelPosition.propertyView({
+          label: trans("pieChart.labelPosition"),
+        })}
+        {this.children.labelAlignTo.propertyView({
+          label: trans("pieChart.labelAlignTo"),
+        })}
+        {this.children.labelBleedMargin.propertyView({
+          label: trans("pieChart.labelBleedMargin"),
+        })}
+        {this.children.labelEdgeDistance.propertyView({
+          label: trans("pieChart.labelEdgeDistance"),
+        })}
       </>
     );
   }

client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts

@@ -352,6 +352,17 @@ export const en = {
     area: "Area",
     radius: "Radius",
     none: "None",
+    labelPosition: "Position",
+    labelAlignTo: "AlignTo",
+    labelBleedMargin: "Bleed Margin",
+    labelEdgeDistance: "Edge Distance",
+    labelLine: "Label Line",
+    edge: "Edge",
+    outside: "Outside",
+    outer: "Outer",
+    inside: "Inside",
+    inner: "Inner",
+    center: "Center",
   },
   barChart: {
     title: 'Title',