Fixed an issue thant chart break when JSON data is invalid.

Author: Imiss-U1025

client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartPropertyView.tsx

@@ -45,8 +45,8 @@ export function themeriverChartPropertyView(
         {children.top.propertyView({ label: trans("themeriverChart.top"), tooltip: trans("echarts.topTooltip") })}
         {children.bottom.propertyView({ label: trans("themeriverChart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
 
-        {children.legendVisibility.propertyView({label: trans("echarts.legendVisibility")})}
-        {children.tooltip.propertyView({label: trans("themeriverChart.tooltip")})}
+        {children.legendVisibility.propertyView({label: trans("echarts.legendVisibility"), tooltip: trans("echarts.legendVisibilityTooltip")})}
+        {children.tooltip.propertyView({label: trans("themeriverChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
       </Section>
       <Section name={sectionNames.interaction}>
         {children.onEvent.propertyView()}

client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts

@@ -136,7 +136,9 @@ export function getEchartsConfig(
   theme?: any,
 ): EChartsOptionWithMap {
   if (props.mode === "json") {
-    let opt={
+
+    console.log(props.echartsOption)
+    let opt= props.echartsOption && {
       title: {
         text: props?.echartsTitle,
         top: props?.echartsTitleVerticalConfig.top,
@@ -146,67 +148,68 @@ export function getEchartsConfig(
         }
       },
       backgroundColor: parseBackground(props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
-  "tooltip": props.tooltip&&{
-    "trigger": "axis",
-    "axisPointer": {
-      "type": "line",
-      "lineStyle": {
-        "color": "rgba(0,0,0,0.2)",
-        "width": 2,
-        "type": "solid"
-      }
-    }
-  },
+      "tooltip": props.tooltip&&{
+        "trigger": "axis",
+        "axisPointer": {
+          "type": "line",
+          "lineStyle": {
+            "color": "rgba(0,0,0,0.2)",
+            "width": 2,
+            "type": "solid"
+          }
+        }
+      },
       legend: props.legendVisibility && {
         "top": props.echartsLegendConfig.top,
         "left": props.echartsLegendAlignConfig.left,
         "orient": props.echartsLegendOrientConfig.orient,
-        data: Array.from(new Set(props.echartsOption.data.map(item => item[2]))),
+        data: props?.echartsOption?.data && Array.from(new Set((props.echartsOption.data).map(item => item[2]))),
         textStyle: {
           ...styleWrapper(props?.legendStyle, theme?.legendStyle, 13)
         }
       },
-  "singleAxis": {
-    left: `${props?.left}%`,
-    right: `${props?.right}%`,
-    bottom: `${props?.bottom}%`,
-    top: `${props?.top}%`,
-    "type": "time",
-    "axisTick": {},
-    "axisLabel": {
-      ...styleWrapper(props?.axisStyle, theme?.axisStyle, 13)
-    },
-    "splitLine": {},
-    "axisPointer": {
-      "animation": true,
-      "label": {
-        "show": true,
-        "color": "#fff"
-      }
-    },
-    "splitNumber": props?.splitNumber
-  },
-  "series": [
-    {
-      "type": props.echartsConfig.type,
-      "data": props.echartsOption.data,
-      "label": {
-        "show": true,
-        "position": "top",
-        "fontSize": 12
-      },
-      itemStyle: {
-        ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle),
+      "singleAxis": {
+        left: `${props?.left}%`,
+        right: `${props?.right}%`,
+        bottom: `${props?.bottom}%`,
+        top: `${props?.top}%`,
+        "type": "time",
+        "axisTick": {},
+        "axisLabel": {
+          ...styleWrapper(props?.axisStyle, theme?.axisStyle, 13)
+        },
+        "splitLine": {},
+        "axisPointer": {
+          "animation": true,
+          "label": {
+            "show": true,
+            "color": "#fff"
+          }
+        },
+        "splitNumber": props?.splitNumber
       },
-      "emphasis": {
-        "itemStyle": {
-          "shadowBlur": 20,
-          "shadowColor": "rgba(0, 0, 0, 0.8)"
-        }
-      }
+      "series": [
+        {
+          "type": props.echartsConfig.type,
+          "data": props.echartsOption.data,
+          "label": {
+            "show": true,
+            "position": "top",
+            "fontSize": 12
+          },
+          itemStyle: {
+            ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle),
+          },
+          "emphasis": {
+            "itemStyle": {
+              "shadowBlur": 20,
+              "shadowColor": "rgba(0, 0, 0, 0.8)"
+            }
+          },
+          color: props.echartsOption?.color && props.echartsOption.color
+        },
+      ]
     }
-  ]
-}
 
     return props.echartsOption ? opt : {};
 

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

@@ -19,7 +19,7 @@ export const en = {
     bottom: 'Bottom',
     defaultBottom:'20',
     splitNumber: 'Split Number',
-    defaultSplitNumber: '3'
+    defaultSplitNumber: '4'
   },
   sunburstChart: {
     sunburstType: 'Sunburst Chart Type',

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

@@ -492,6 +492,7 @@ export const enObj: I18nObjects = {
       ]
   },
   defaultThemeriverChartOption: {
+    color: ['#5470C6', '#91CC75', '#FAC858', '#6b51a1'],
     data: [
       ['2025-01-01', 12, 'Product A'],
       ['2025-01-01', 10, 'Product B'],
@@ -513,7 +514,7 @@ export const enObj: I18nObjects = {
       ['2025-01-05', 13, 'Product B'],
       ['2025-01-05', 20, 'Product C'],
       ['2025-01-05', 11, 'Product D']
-    ]
+    ],
   },
 
   defaultMapJsonOption: defaultMapData,