visual Map

Author: Imiss-U1025

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

@@ -3,6 +3,7 @@ import {
   dropdownControl,
   BoolControl,
   NumberControl,
+  ColorControl,
   withDefault,
   showLabelPropertyView,
 } from "lowcoder-sdk";
@@ -44,6 +45,12 @@ export const ScatterChartConfig = (function () {
       shape: dropdownControl(ScatterShapeOptions, "circle"),
       singleAxis: BoolControl,
       boundaryGap: withDefault(BoolControl, true),
+      visualMap: BoolControl,
+      visualMapMin: NumberControl,
+      visualMapMax: NumberControl,
+      visualMapDimension: NumberControl,
+      visualMapColorMin: ColorControl,
+      visualMapColorMax: ColorControl,
     },
     (props): ScatterSeriesOption => {
       return {
@@ -71,6 +78,14 @@ export const ScatterChartConfig = (function () {
         },
         singleAxis: props.singleAxis,
         boundaryGap: props.boundaryGap,
+        visualMapData: {
+          visualMap: props.visualMap,
+          visualMapMin: props.visualMapMin,
+          visualMapMax: props.visualMapMax,
+          visualMapDimension: props.visualMapDimension,
+          visualMapColorMin: props.visualMapColorMin,
+          visualMapColorMax: props.visualMapColorMax,
+        }
       };
     }
   )
@@ -89,6 +104,24 @@ export const ScatterChartConfig = (function () {
         {children.singleAxis.propertyView({
           label: trans("scatterChart.singleAxis"),
         })}
+        {children.visualMap.propertyView({
+          label: trans("scatterChart.visualMap"),
+        })}
+        {children.visualMap.getView() && children.visualMapMin.propertyView({
+          label: trans("scatterChart.visualMapMin"),
+        })}
+        {children.visualMap.getView() && children.visualMapMax.propertyView({
+          label: trans("scatterChart.visualMapMax"),
+        })}
+        {children.visualMap.getView() && children.visualMapDimension.propertyView({
+          label: trans("scatterChart.visualMapDimension"),
+        })}
+        {children.visualMap.getView() && children.visualMapColorMin.propertyView({
+          label: trans("scatterChart.visualMapColorMin"),
+        })}
+        {children.visualMap.getView() && children.visualMapColorMax.propertyView({
+          label: trans("scatterChart.visualMapColorMax"),
+        })}
       </>
     ))
     .build();

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

@@ -236,6 +236,22 @@ export function getEchartsConfig(
     }));
   }
 
+  if(props.chartConfig.visualMapData.visualMap) {
+    config.visualMap = {
+      min: props.chartConfig.visualMapData.visualMapMin,
+      max: props.chartConfig.visualMapData.visualMapMax,
+      dimension: props.chartConfig.visualMapData.visualMapDimension,
+      orient: 'vertical',
+      right: 10,
+      top: 'center',
+      text: ['HIGH', 'LOW'],
+      calculable: true,
+      inRange: {
+        color: [props.chartConfig.visualMapData.visualMapColorMin, props.chartConfig.visualMapData.visualMapColorMax]
+      }
+    }
+  }
+
   console.log("Echarts transformedData and config", transformedData, config);
   return config;
 }

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

@@ -379,6 +379,12 @@ export const en = {
     labelLineLength2: "Label Line Length2",
   },
   scatterChart: {
+    visualMap: "Visual Map",
+    visualMapMin: "Visual Map Min",
+    visualMapMax: "Visual Map Max",
+    visualMapDimension: "Visual Map Dimension",
+    visualMapColorMin: "Visual Map Color Min",
+    visualMapColorMax: "Visual Map Color Max",
     boundaryGap: "Boundary Gap",
     labelIndex: "Label Column Index",
     dynamicSize: "Dynamic Size",