mark line

Author: Imiss-U1025

client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartUtils.ts

@@ -80,8 +80,45 @@ export function getSeriesConfig(props: EchartsConfigProps) {
         color: s.itemColor,
         shadowColor: s.itemShadowColor,
         shadowBlur: s.itemShadowBlur,
-      }
+      },
+    }
+    let fromArr = [0,0];
+    let toArr = [0,0];
+    try {
+      fromArr = JSON.parse(s.markLineFrom);
+    } catch {}
+    try {
+      toArr = JSON.parse(s.markLineTo);
+    } catch {}
+    if(s.showMarkLine) {
+      config.markLine = {
+        animation: false,
+        label: {
+          formatter: s.markLineDesc,
+          align: 'right'
+        },
+        lineStyle: {
+          type: 'solid'
+        },
+        tooltip: {
+          formatter: s.markLineDesc
+        },
+        data: [
+          [
+            {
+              coord: fromArr,
+              symbol: 'none'
+            },
+            {
+              coord: toArr,
+              symbol: 'none'
+            }
+          ]
+        ]
+      };
     }
+    if(s.effect) config.type = "effectScatter";
+    if(s.symbolSize) config.symbolSize = s.symbolSize;
     return config;
   });
 }

client/packages/lowcoder-comps/src/comps/scatterChartComp/seriesComp.tsx

@@ -5,6 +5,8 @@ import {
   list,
   dropdownControl,
   withDefault,
+  jsonControl,
+  toArray,
   NumberControl,
   isNumeric,
   genRandomKey,
@@ -37,6 +39,12 @@ export function newSeries(name: string, columnName: string): SeriesDataType {
 const seriesChildrenMap = {
   columnName: StringControl,
   seriesName: StringControl,
+  symbolSize: NumberControl,
+  effect: BoolControl,
+  showMarkLine: BoolControl,
+  markLineFrom: withDefault(StringControl, "[0,0]"),
+  markLineTo: withDefault(StringControl, "[1000,1000]"),
+  markLineDesc: StringControl,
   hide: BoolControl,
   // unique key, for sort
   dataIndex: valueComp<string>(""),
@@ -65,6 +73,24 @@ class SeriesComp extends SeriesTmpComp {
             this.children.columnName.dispatchChangeValueAction(value);
           }}
         />
+        {this.children.effect.propertyView({
+          label: trans("scatterChart.effect"),
+        })}
+        {this.children.symbolSize.propertyView({
+          label: trans("scatterChart.symbolSize"),
+        })}
+        {this.children.showMarkLine.propertyView({
+          label: trans("scatterChart.showMarkLine"),
+        })}
+        {this.children.showMarkLine.getView() && this.children.markLineFrom.propertyView({
+          label: trans("scatterChart.from"),
+        })}
+        {this.children.showMarkLine.getView() && this.children.markLineTo.propertyView({
+          label: trans("scatterChart.to"),
+        })}
+        {this.children.showMarkLine.getView() && this.children.markLineDesc.propertyView({
+          label: trans("scatterChart.desc"),
+        })}
       </>
     );
   }

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

@@ -378,6 +378,14 @@ export const en = {
     labelLineLength: "Label Line Length",
     labelLineLength2: "Label Line Length2",
   },
+  scatterChart: {
+    effect: "Effect",
+    symbolSize: "Symbol Size",
+    from: "From",
+    to: "To",
+    showMarkLine: "Show Mark Line",
+    desc: "Description",
+  },
   barChart: {
     title: 'Title',
     barWidth: 'Bar Width(%)',