Fixed background Color and built type structure of gauge chart.

Author: Imiss-U1025

client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts

@@ -135,38 +135,62 @@ export function getEchartsConfig(
   chartSize?: ChartSize,
   theme?: any,
 ): EChartsOptionWithMap {
+
+
   if (props.mode === "json") {
     let opt={
       "title": {
         "text": props.echartsTitle,
         'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
-        "left":"center"
+        "left":props.echartsTitleConfig.top,
+        "textStyle": {
+          "fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily,
+          "fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize || '18',
+          "fontWeight": props?.titleStyle?.chartTextWeight || theme?.titleStyle?.fontWeight,
+          "color": props?.titleStyle?.chartTextColor || theme?.titleStyle?.fontColor || "#000000",
+          "fontStyle": props?.titleStyle?.chartFontStyle || theme?.titleStyle?.fontStyle,
+          "textShadowColor": props?.titleStyle?.chartShadowColor || theme?.titleStyle?.shadowColor,
+          "textShadowBlur": props?.titleStyle?.chartBoxShadow?.split('px')[0] || theme?.titleStyle?.boxShadow?.split('px')[0],
+          "textShadowOffsetX": props?.titleStyle?.chartBoxShadow?.split('px')[1] || theme?.titleStyle?.boxShadow?.split('px')[1],
+          "textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2]
+        }
       },
-      "backgroundColor": parseBackground( props?.style?.background || theme?.style?.background || "#FFFFFF"),
-      "color": props.echartsOption.data?.map(data => data.color),
-      "tooltip": props.tooltip&&{
+      "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
+      "color": props?.echartsOption.data?.map(data => data.color),
+      "tooltip": props?.tooltip&&{
         "trigger": "axis",
         "axisPointer": {
           "type": "cross"
         }
       },
       "grid": {
-        "left": "10%",
-        "right": "10%",
-        "bottom": "10%",
+        "left": `${props?.left}%`,
+        "right": `${props?.right}%`,
+        "bottom": `${props?.bottom}%`,
+        "top": `${props?.top}%`,
       },
+      "dataZoom": [
+        {
+          "show": props?.dataZoomVisibility,
+          "type": 'slider',
+          "start": 0,
+          "end": 100,
+          "bottom": props?.dataZoomBottom,
+          'height': props?.dataZoomHeight
+        }
+      ],
       "xAxis": {
         "type": "category",
-        "data": props.echartsOption.xAxis.data
+        "data": props?.echartsOption.xAxis.data
       },
       "yAxis": {
         "type": "value",
         "scale": true
       },
       "series": [
         {
-          "name": props.echartsConfig.type,
-          "type": props.echartsConfig.type,
+          "name": props?.echartsConfig.type,
+          "type": props?.echartsConfig.type,
           "left": "10%",
           "top": 60,
           "bottom": 60,
@@ -176,9 +200,9 @@ export function getEchartsConfig(
           "gap": 2,
           "label": {
             "show": true,
-            "position": props.echartsLabelConfig.top
+            "position": props?.echartsLabelConfig.top
           },
-          "data": props.echartsOption.data,
+          "data": props?.echartsOption.data,
         }
       ]
     }

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

@@ -232,6 +232,41 @@ const EchartsOptionMap = {
   gauge: GaugeChartConfig,
 };
 
+const ChartTypeOptions = [
+  {
+    label: trans("chart.default"),
+    value: "default",
+  },
+  {
+    label: trans("chart.stageGauge"),
+    value: "stageGauge",
+  },
+  {
+    label: trans("chart.gradeGauge"),
+    value: "gradeGauge",
+  },
+  {
+    label: trans("chart.temperatureGauge"),
+    value: "temperatureGauge",
+  },
+  {
+    label: trans("chart.multiGauge"),
+    value: "multiGauge",
+  },
+  {
+    label: trans("chart.ringGauge"),
+    value: "ringGauge",
+  },
+  {
+    label: trans("chart.barometerGauge"),
+    value: "barometerGauge",
+  },
+  {
+    label: trans("chart.clockGauge"),
+    value: "clockGauge",
+  },
+] as const;
+
 const ChartOptionComp = withType(ChartOptionMap, "bar");
 const EchartsOptionComp = withType(EchartsOptionMap, "gauge");
 export type CharOptionCompType = keyof typeof ChartOptionMap;
@@ -251,6 +286,7 @@ export const chartUiModeChildren = {
 
 let chartJsonModeChildren: any = {
   echartsOption: jsonControl(toObject, i18nObjs.defaultGaugeChartOption),
+  chartType: dropdownControl(ChartTypeOptions, trans("chart.default")),
   echartsTitle: withDefault(StringControl, trans("gaugeChart.defaultTitle")),
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,