pie bg image

Author: Imiss-U1025

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

@@ -115,6 +115,14 @@ export function getSeriesConfig(props: EchartsConfigProps) {
       if(s.roseType !== "none") {
         config.roseType = s.roseType;
       }
+      if(s.itemBg) {
+        config.itemStyle = {
+          color: {
+            image: s.itemBg,
+            repeat: 'repeat',
+          }
+        }
+      }
     } else {
       config.data = s.data;
       config.center = s.date;

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

@@ -12,7 +12,7 @@ import {
   MultiCompBuilder,
   valueComp,
 } from "lowcoder-sdk";
-import { trans } from "i18n/comps";
+import { i18nObjs, trans } from "i18n/comps";
 
 import { ConstructorToComp, ConstructorToDataType, ConstructorToView } from "lowcoder-core";
 import { CompAction, CustomAction, customAction, isMyCustomAction } from "lowcoder-core";
@@ -94,6 +94,7 @@ const seriesChildrenMap = {
   padAngle: withDefault(NumberControl, 0),
   borderRadius: withDefault(NumberControl, 0),
   itemColor: ColorControl,
+  itemBg: StringControl,
   itemShadowBlur: NumberControl,
   itemShadowColor: ColorControl,
   hide: BoolControl,
@@ -166,6 +167,10 @@ class SeriesComp extends SeriesTmpComp {
         {this.children.itemShadowColor.propertyView({
           label: trans("pieChart.itemShadowColor"),
         })}
+        {this.children.itemBg.propertyView({
+          label: trans("pieChart.itemBg"),
+          placeholder: i18nObjs.defaultPieBg,
+        })}
       </>
     );
   }

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

@@ -348,6 +348,7 @@ export const en = {
     borderType: "Border Type",
   },
   pieChart: {
+    itemBg: "Background Image",
     itemColor: "Color",
     itemShadowColor: "Shadow Color",
     itemShadowBlur: "Shadow Blur",

client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx

@@ -561,4 +561,5 @@ export const enObj: I18nObjects = {
   },
 
   defaultMapJsonOption: defaultMapData,
+  defaultPieBg: 'data:image/jpeg;base64,/9j/4AAQS...',
 };

client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx

@@ -27,4 +27,5 @@ export type I18nObjects = {
   defaultMapJsonOption: Record<string, unknown>;
   timeXAxisLabel?: XAXisComponentOption["axisLabel"];
   imageEditorLocale?: Record<string, string>;
+  defaultPieBg: string;
 };