itemStyle

Author: Imiss-U1025

client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/lineChartConfig.tsx

@@ -3,15 +3,11 @@ import {
   MultiCompBuilder,
   BoolControl,
   dropdownControl,
-  list,
-  Option,
-  valueComp,
-  genRandomKey,
   jsonControl,
   toArray,
   showLabelPropertyView,
   withContext,
-  RedButton,
+  ColorControl,
   StringControl,
   NumberControl,
   withDefault,
@@ -71,6 +67,21 @@ export const SymbolOptions = [
   },
 ] as const;
 
+export const BorderTypeOptions = [
+  {
+    label: trans("lineChart.solid"),
+    value: "solid",
+  },
+  {
+    label: trans("lineChart.dashed"),
+    value: "dashed",
+  },
+  {
+    label: trans("lineChart.dotted"),
+    value: "dotted",
+  },
+] as const;
+
 export const LineChartConfig = (function () {
   return new MultiCompBuilder(
     {
@@ -90,6 +101,10 @@ export const LineChartConfig = (function () {
       polarEndAngle: withDefault(NumberControl, -180),
       polarIsTangent: withDefault(BoolControl, false),
       labelData: jsonControl(toArray, []),
+      //series-line.itemStyle
+      borderColor: ColorControl,
+      borderWidth: NumberControl,
+      borderType: dropdownControl(BorderTypeOptions, 'solid'),
     },
     (props): LineSeriesOption => {
       const config: LineSeriesOption = {
@@ -116,6 +131,9 @@ export const LineChartConfig = (function () {
             }
             return color;
           },
+          borderColor: props.borderColor,
+          borderWidth: props.borderWidth,
+          borderType: props.borderType,
         },
         polarData: {
           polar: props.polar,
@@ -194,6 +212,15 @@ export const LineChartConfig = (function () {
           label: trans("lineChart.symbolSize"),
         })}
         {children.itemColor.getPropertyView()}
+        {children.borderColor.propertyView({
+          label: trans("lineChart.borderColor"),
+        })}
+        {children.borderWidth.propertyView({
+          label: trans("lineChart.borderWidth"),
+        })}
+        {children.borderType.propertyView({
+          label: trans("lineChart.borderType"),
+        })}
       </>
     ))
     .build();

client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartUtils.ts

@@ -157,6 +157,7 @@ export function getEchartsConfig(
     bottom: `${props?.bottom}%`,
     top: `${props?.top}%`,
   };
+
   let config: any = {
     title: {
       text: props.title,
@@ -267,14 +268,15 @@ export function getEchartsConfig(
       },
       itemStyle: {
         ...series.itemStyle,
-        ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+        // ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
       },
       lineStyle: {
         ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
       },
       data: transformedData.map((i: any) => i[series.name])
     })),
   };
+  console.log("config11", getSeriesConfig(props));
   if (axisChart) {
     // pure chart's size except the margin around
     let chartRealSize;

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

@@ -338,6 +338,12 @@ export const en = {
     end: "End",
     step: "Step",
     polar: "Polar Chart",
+    solid: "Solid",
+    dashed: "Dashed",
+    dotted: "Dotted",
+    borderColor: "Border Color",
+    borderWidth: "Border Width",
+    borderType: "Border Type",
   },
   barChart: {
     title: 'Title',