Fixed legend option of funnel charts

Author: Imiss-U1025

client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx

@@ -5,7 +5,7 @@ import {
   dropdownControl,
   MultiCompBuilder,
 } from "lowcoder-sdk";
-import {FunnelSeriesOption, LegendComponentOption} from "echarts";
+import { LegendComponentOption } from "echarts";
 import { trans } from "i18n/comps";
 
 const FunnelLegnedAlignOptions = [
@@ -28,9 +28,10 @@ export const EchartsLegendAlignConfig = (function () {
     {
       legendAlign: dropdownControl(FunnelLegnedAlignOptions, "center"),
     },
-    (props): FunnelSeriesOption => {
-      const config: FunnelSeriesOption = {
-        left: "center",
+    (props): LegendComponentOption => {
+      const config: LegendComponentOption = {
+        left: "right",
+        type: "scroll",
       };
       config.left = props.legendAlign
       return config;

client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendLayoutConfig.tsx

@@ -25,7 +25,8 @@ export const EchartsLegendLayoutConfig = (function () {
     },
     (props): LegendComponentOption => {
       const config: LegendComponentOption = {
-        orient: "horizontal",
+        orient: "vertical",
+        type: "scroll"
       };
       config.orient = props.legendLayout
       return config;

client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx

@@ -34,9 +34,9 @@ export function funnelChartPropertyView(
         {children.legendVisibility.getView()&& children.echartsLegendConfig.getPropertyView()}
         {children.echartsSortingConfig.getPropertyView()}
         {children.label.getView()&& children.echartsLabelConfig.getPropertyView()}
-        {children.echartsLegendLayoutConfig.getPropertyView()}
-        {children.echartsLegendAlignConfig.getPropertyView()}
-        {children.echartsConfig.getPropertyView()}
+        {children.echartsFunnelAlignConfig.getPropertyView()}
+        {children.legendVisibility.getView() && children.echartsLegendLayoutConfig.getPropertyView()}
+        {children.legendVisibility.getView() && children.echartsLegendAlignConfig.getPropertyView()}
         {children.echartsTitleConfig.getPropertyView()}
         {children.left.propertyView({ label: trans("funnelChart.left") })}
         {children.top.propertyView({ label: trans("funnelChart.top") })}

client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts

@@ -175,7 +175,7 @@ export function getEchartsConfig(
         "data": props.echartsOption.data?.map(data=>data.name),
         "top": props.echartsLegendConfig.top,
         "left": props.echartsLegendAlignConfig.left,
-        "orient": props.echartsLegendAlignConfig.orient,
+        "orient": props.echartsLegendLayoutConfig.orient,
         "textStyle": {
           "fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily,
           "fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize,