Added axis style to Gauge chart.

Author: Imiss-U1025

client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx

@@ -287,6 +287,7 @@ if (EchartsStyle) {
     titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
     labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'),
     legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
+    axisLabelStyle: styleControl(EchartDefaultTextStyle, 'axisLabelStyle'),
   }
 }
 const chartMapModeChildren = {

client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx

@@ -67,6 +67,9 @@ export function gaugeChartPropertyView(
       <Section name={sectionNames.detailStyle}>
         {children.legendStyle?.getPropertyView()}
       </Section>
+      <Section name={sectionNames.axisLabelStyle}>
+        {children.axisLabelStyle?.getPropertyView()}
+      </Section>
       <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
     </>
   );

client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts

@@ -217,6 +217,18 @@ export function getEchartsConfig(
               "width": props?.progressBarWidth
             }
           },
+          "axisLabel": {
+            "distance": props?.progressBarWidth + "10", // Distance of the labels from the axis
+            "fontFamily": props?.axixLabelStyle?.chartFontFamily || theme?.axixLabelStyle?.fontFamily,
+            "fontSize": props?.axixLabelStyle?.chartTextSize || theme?.axixLabelStyle?.fontSize || 12,
+            "fontWeight": props?.axixLabelStyle?.chartTextWeight || theme?.axixLabelStyle?.fontWeight,
+            "color": props?.axixLabelStyle?.chartTextColor || theme?.axixLabelStyle?.fontColor || "#000000",
+            "fontStyle": props?.axixLabelStyle?.chartFontStyle || theme?.axixLabelStyle?.fontStyle,
+            "textShadowColor": props?.axixLabelStyle?.chartShadowColor || theme?.axixLabelStyle?.shadowColor,
+            "textShadowBlur": props?.axixLabelStyle?.chartBoxShadow?.split('px')[0] || theme?.axixLabelStyle?.boxShadow?.split('px')[0],
+            "textShadowOffsetX": props?.axixLabelStyle?.chartBoxShadow?.split('px')[1] || theme?.axixLabelStyle?.boxShadow?.split('px')[1],
+            "textShadowOffsetY": props?.axixLabelStyle?.chartBoxShadow?.split('px')[2] || theme?.axixLabelStyle?.boxShadow?.split('px')[2]
+          },
           'detail': {
             "fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily,
             "fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize || 16,

client/packages/lowcoder-design/src/components/Section.tsx

@@ -191,4 +191,5 @@ export const sectionNames = {
   titleStyle:trans("prop.titleStyle"),
   legendStyle:trans("prop.legendStyle"),
   detailStyle:trans("prop.detailStyle"),
+  axisLabelStyle:trans("prop.axisLabelStyle"),
 };

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

@@ -44,6 +44,7 @@ export const en = {
     titleStyle: "Title Style",
     legendStyle: "Legend Style",
     detailStyle: "Detail Style",
+    axisLabelStyle: "Axis Label Style"
   },
   passwordInput: {
     label: "Password:",