aldehyde 0.2.290 → 0.2.292

package/src/aldehyde/lowcode-components/border/border2/index.tsx

@@ -15,9 +15,10 @@ export interface ComponentRef {
     updateConfig: (config: ComponentProps) => void;
 }
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const [width, setWidth] = useState<number>(320);
-    const [height, setHeight] = useState<number>(200);
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 320);
+    const [height, setHeight] = useState<number>(defBase?.height || 200);
     const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
 
     useImperativeHandle(ref, () => ({

package/src/aldehyde/lowcode-components/border/border3/index.tsx

@@ -15,9 +15,10 @@ export interface ComponentRef {
     updateConfig: (config: ComponentProps) => void;
 }
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const [width, setWidth] = useState<number>(320);
-    const [height, setHeight] = useState<number>(200);
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 320);
+    const [height, setHeight] = useState<number>(defBase?.height || 200);
     const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
 
     useImperativeHandle(ref, () => ({

package/src/aldehyde/lowcode-components/border/border4/index.tsx

@@ -16,9 +16,10 @@ export interface ComponentRef {
     updateConfig: (config: ComponentProps) => void;
 }
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const [width, setWidth] = useState<number>(320);
-    const [height, setHeight] = useState<number>(200);
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 320);
+    const [height, setHeight] = useState<number>(defBase?.height || 200);
     const { mainColor = "#83BFF6", subColor = "#00CED1", reverse } = style || {};
 
     useImperativeHandle(ref, () => ({

package/src/aldehyde/lowcode-components/border/border5/index.tsx

@@ -16,9 +16,10 @@ export interface ComponentRef {
     updateConfig: (config: ComponentProps) => void;
 }
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const [width, setWidth] = useState<number>(320);
-    const [height, setHeight] = useState<number>(200);
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 320);
+    const [height, setHeight] = useState<number>(defBase?.height || 200);
     const { mainColor = "#83BFF6", subColor = "#00CED1", reverse } = style || {};
 
     useImperativeHandle(ref, () => ({

package/src/aldehyde/lowcode-components/border/border6/index.tsx

@@ -15,9 +15,10 @@ export interface ComponentRef {
     updateConfig: (config: ComponentProps) => void;
 }
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const [width, setWidth] = useState<number>(320);
-    const [height, setHeight] = useState<number>(200);
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 320);
+    const [height, setHeight] = useState<number>(defBase?.height || 200);
     const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
 
     useImperativeHandle(ref, () => ({

package/src/aldehyde/lowcode-components/border/border7/index.tsx

@@ -15,9 +15,10 @@ export interface ComponentRef {
     updateConfig: (config: ComponentProps) => void;
 }
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const [width, setWidth] = useState<number>(320);
-    const [height, setHeight] = useState<number>(200);
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 320);
+    const [height, setHeight] = useState<number>(defBase?.height || 200);
     const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
 
     useImperativeHandle(ref, () => ({

package/src/aldehyde/lowcode-components/border/border8/index.tsx

@@ -16,9 +16,10 @@ export interface ComponentRef {
     updateConfig: (config: ComponentProps) => void;
 }
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const [width, setWidth] = useState<number>(320);
-    const [height, setHeight] = useState<number>(200);
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 320);
+    const [height, setHeight] = useState<number>(defBase?.height || 200);
     const { mainColor = "#83BFF6", subColor = "#00CED1", reverse } = style || {};
 
     const [{ path, gradient, mask }] = useState(() => {

package/src/aldehyde/lowcode-components/border/border9/index.tsx

@@ -15,9 +15,10 @@ export interface ComponentRef {
     updateConfig: (config: ComponentProps) => void;
 }
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const [width, setWidth] = useState<number>(320);
-    const [height, setHeight] = useState<number>(200);
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 320);
+    const [height, setHeight] = useState<number>(defBase?.height || 200);
     const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
 
     useImperativeHandle(ref, () => ({

package/src/aldehyde/lowcode-components/capsule-bar-chart/index.tsx

@@ -87,6 +87,7 @@ export interface ComponentStyle {
     legend?: { [key: string]: any };
     barMaxWidth?: number;
     label?: { [key: string]: any };
+    renderer?: "canvas" | "svg";
 }
 
 export interface ComponentProps {
@@ -104,6 +105,7 @@ export interface ComponentRef {
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
     const { style, data: propsData, isDesignMode } = props;
     const [config, setConfig] = useState<ComponentStyle>(style || {});
+    const [renderType, setRenderType] = useState<"canvas" | "svg">(style?.renderer || "svg"); // 渲染模式
     const [size, setSize] = useState<{ width: number, height: number }>();
     const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
     const [data, setData] = useState<{ name: string, data: any }[]>([]);
@@ -114,7 +116,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const handleDestroy = () => {
         pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
         window.removeEventListener('resize', handleResize);
-        chart.current.dispose();
+        chart.current && chart.current.dispose();
     };
 
     useImperativeHandle(ref, () => ({
@@ -123,6 +125,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             setConfig({ ...(newStyle || {}) });
             setSize({ width: base.width, height: base.height });
             setDataConfig(newDataConfig);
+            setRenderType(newStyle?.renderer || "svg");
         },
         destroy: handleDestroy,
     }));
@@ -133,13 +136,17 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     };
 
     useEffect(() => {
-        chart.current = echarts.init(chartRef.current);
-        window.addEventListener('resize', handleResize);
         return () => {
             handleDestroy();
         }
     }, []);
 
+    useEffect(() => {
+        handleDestroy();
+        chart.current = echarts.init(chartRef.current, null, { renderer: renderType });
+        window.addEventListener('resize', handleResize);
+    }, [renderType]);
+
 
     // 请求数据
     const getData = async () => {

package/src/aldehyde/lowcode-components/circular-progress-chart/index.tsx

@@ -79,6 +79,7 @@ export interface ComponentStyle {
     barWidth?: number;
     color?: string;
     backgroundColor?: string;
+    renderer?: "canvas" | "svg";
 }
 
 export interface ComponentProps {
@@ -96,6 +97,7 @@ export interface ComponentRef {
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
     const { style, data: propsData, isDesignMode } = props;
     const [config, setConfig] = useState<ComponentStyle>(style || {});
+    const [renderType, setRenderType] = useState<"canvas" | "svg">(style?.renderer || "svg"); // 渲染模式
     const [size, setSize] = useState<{ width: number, height: number }>();
     const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
     const [data, setData] = useState<number>(0);
@@ -106,7 +108,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const handleDestroy = () => {
         pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
         window.removeEventListener('resize', handleResize);
-        chart.current.dispose();
+        chart.current && chart.current.dispose();
     };
 
     useImperativeHandle(ref, () => ({
@@ -115,6 +117,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             setConfig({ ...(newStyle || {}) });
             setSize({ width: base.width, height: base.height });
             setDataConfig(newDataConfig);
+            setRenderType(newStyle?.renderer || "svg");
         },
         destroy: handleDestroy,
     }));
@@ -125,13 +128,18 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     };
 
     useEffect(() => {
-        chart.current = echarts.init(chartRef.current);
-        window.addEventListener('resize', handleResize);
         return () => {
             handleDestroy();
         }
     }, []);
 
+    useEffect(() => {
+        handleDestroy();
+        chart.current = echarts.init(chartRef.current, null, { renderer: renderType });
+        window.addEventListener('resize', handleResize);
+    }, [renderType]);
+
+
     // 请求数据
     const getData = async () => {
         const { entities: { config, value } } = await HydrocarbonService.requestMstrucLtmplQueryTop(null, dataConfig?.sourceId, null) || {};

package/src/aldehyde/lowcode-components/column-chart/index.tsx

@@ -91,6 +91,7 @@ export interface ComponentStyle {
     yAxis?: { [key: string]: any };
     legend?: { [key: string]: any };
     barMaxWidth?: number;
+    renderer?: "canvas" | "svg";
 }
 
 export interface ComponentProps {
@@ -108,6 +109,7 @@ export interface ComponentRef {
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
     const { style, base: { type: componentType }, data: propsData, isDesignMode } = props;
     const [config, setConfig] = useState<ComponentStyle>(style || {});
+    const [renderType, setRenderType] = useState<"canvas" | "svg">(style?.renderer || "svg"); // 渲染模式
     const [size, setSize] = useState<{ width: number, height: number }>();
     const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
     const [data, setData] = useState<{ name: string, data: any }[]>([]);
@@ -118,7 +120,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const handleDestroy = () => {
         pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
         window.removeEventListener('resize', handleResize);
-        chart.current.dispose();
+        chart.current && chart.current.dispose();
     };
 
     useImperativeHandle(ref, () => ({
@@ -127,6 +129,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             setConfig({ ...(newStyle || {}) });
             setSize({ width: base.width, height: base.height });
             setDataConfig(newDataConfig);
+            setRenderType(newStyle?.renderer || "svg");
         },
         destroy: handleDestroy,
     }));
@@ -137,13 +140,16 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     };
 
     useEffect(() => {
-        chart.current = echarts.init(chartRef.current);
-        window.addEventListener('resize', handleResize);
         return () => {
             handleDestroy();
         }
     }, []);
 
+    useEffect(() => {
+        handleDestroy();
+        chart.current = echarts.init(chartRef.current, null, { renderer: renderType });
+        window.addEventListener('resize', handleResize);
+    }, [renderType]);
 
     // 请求数据
     const getData = async () => {

package/src/aldehyde/lowcode-components/data-number/index.tsx

@@ -14,9 +14,10 @@ const rules = {
 };
 
 interface EnumeProps {
-    rule: string,
-    num: number,
-    value: string
+    rule: string;
+    num: number;
+    value: string;
+    color?: string
 }
 
 export interface ComponentStyle {
@@ -113,9 +114,10 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const value = useMemo(() => {
         if (enume?.length > 0) { // 枚举
             const temEnume = enume.filter(item => item.rule && (item.num || item.num === 0));
-            return temEnume.find((item) => eval(`${data} ${rules[item.rule]} ${item.num}`))?.value || data;
+            const item = temEnume.find((item) => eval(`${Number(data)} ${rules[item.rule]} ${item.num}`));
+            return item ? { data: item.value, color: item.color || config?.color } : { data, color: config?.color };
         } else {
-            return data;
+            return { data, color: config?.color };
         }
     }, [data, enume]);
 
@@ -126,9 +128,10 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
                 ...config,
                 WebkitTextStrokeWidth: config?.strokeWidth,
                 WebkitTextStrokeColor: config?.strokeColor,
+                color: value?.color,
             }}
         >
-            {value}
+            {value?.data}
         </div>
     );
 });

package/src/aldehyde/lowcode-components/decoration/decoration1/index.tsx

@@ -36,9 +36,10 @@ export interface ComponentRef {
     updateConfig: (config: ComponentProps) => void;
 }
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const [width, setWidth] = useState<number>(300);
-    const [height, setHeight] = useState<number>(100);
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 300);
+    const [height, setHeight] = useState<number>(defBase?.height || 100);
     const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
 
     useImperativeHandle(ref, () => ({

package/src/aldehyde/lowcode-components/decoration/decoration10/index.tsx

@@ -15,9 +15,10 @@ export interface ComponentRef {
     updateConfig: (config: ComponentProps) => void;
 }
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const [width, setWidth] = useState<number>(300)
-    const [height, setHeight] = useState<number>(100);
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 300);
+    const [height, setHeight] = useState<number>(defBase?.height || 100);
     const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
 
 

package/src/aldehyde/lowcode-components/decoration/decoration11/index.tsx

@@ -22,11 +22,12 @@ export interface ComponentRef {
     updateConfig: (config: ComponentProps) => void;
 }
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const gId = `decoration-11-g-${props.base.id}`;
-    const gradientId = `decoration-11-gradient-${props.base.id}`;
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const [width, setWidth] = useState<number>(200);
-    const [height, setHeight] = useState<number>(200);
+    const { style: defStyle, base: defBase } = props;
+    const gId = `decoration-11-g-${defBase.id}`;
+    const gradientId = `decoration-11-gradient-${defBase.id}`;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 200);
+    const [height, setHeight] = useState<number>(defBase?.height || 200);
     const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
 
     useImperativeHandle(ref, () => ({

package/src/aldehyde/lowcode-components/decoration/decoration2/index.tsx

@@ -15,9 +15,10 @@ export interface ComponentRef {
     updateConfig: (config: ComponentProps) => void;
 }
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const [width, setWidth] = useState<number>(300);
-    const [height, setHeight] = useState<number>(100);
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 300);
+    const [height, setHeight] = useState<number>(defBase?.height || 100);
     const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
 
     useImperativeHandle(ref, () => ({

package/src/aldehyde/lowcode-components/decoration/decoration3/index.tsx

@@ -35,9 +35,10 @@ export interface ComponentRef {
     updateConfig: (config: ComponentProps) => void;
 }
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const [width, setWidth] = useState<number>(300);
-    const [height, setHeight] = useState<number>(100);
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 300);
+    const [height, setHeight] = useState<number>(defBase?.height || 100);
     const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
 
     useImperativeHandle(ref, () => ({

package/src/aldehyde/lowcode-components/decoration/decoration4/index.tsx

@@ -15,8 +15,9 @@ export interface ComponentRef {
     updateConfig: (config: ComponentProps) => void;
 }
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const [width, setWidth] = useState<number>(300);
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 300);
     const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
 
     useImperativeHandle(ref, () => ({

package/src/aldehyde/lowcode-components/decoration/decoration5/index.tsx

@@ -27,9 +27,10 @@ export interface ComponentRef {
     updateConfig: (config: ComponentProps) => void;
 }
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const [width, setWidth] = useState<number>(300)
-    const [height, setHeight] = useState<number>(100);
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 300);
+    const [height, setHeight] = useState<number>(defBase?.height || 100);
     const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
 
     useImperativeHandle(ref, () => ({

package/src/aldehyde/lowcode-components/decoration/decoration6/index.tsx

@@ -53,9 +53,10 @@ export interface ComponentRef {
     updateConfig: (config: ComponentProps) => void;
 }
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const [width, setWidth] = useState<number>(300)
-    const [height, setHeight] = useState<number>(100);
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 300);
+    const [height, setHeight] = useState<number>(defBase?.height || 100);
     const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
 
     useImperativeHandle(ref, () => ({

package/src/aldehyde/lowcode-components/decoration/decoration7/index.tsx

@@ -16,9 +16,10 @@ export interface ComponentRef {
     updateConfig: (config: ComponentProps) => void;
 }
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const [width, setWidth] = useState<number>(300)
-    const [height, setHeight] = useState<number>(100);
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 300);
+    const [height, setHeight] = useState<number>(defBase?.height || 100);
     const { mainColor = "#83BFF6", subColor = "#00CED1", reverse } = style || {};
 
     useImperativeHandle(ref, () => ({

package/src/aldehyde/lowcode-components/decoration/decoration8/index.tsx

@@ -15,10 +15,11 @@ export interface ComponentRef {
     updateConfig: (config: ComponentProps) => void;
 }
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const polygonId = `decoration-8-polygon-${props.base?.id}`
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const [width, setWidth] = useState<number>(200)
-    const [height, setHeight] = useState<number>(200);
+    const { style: defStyle, base: defBase } = props;
+    const polygonId = `decoration-8-polygon-${defBase?.id}`
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 200);
+    const [height, setHeight] = useState<number>(defBase?.height || 200);
     const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
 
     useImperativeHandle(ref, () => ({

package/src/aldehyde/lowcode-components/decoration/decoration9/index.tsx

@@ -15,9 +15,10 @@ export interface ComponentRef {
     updateConfig: (config: ComponentProps) => void;
 }
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const [width, setWidth] = useState<number>(300)
-    const [height, setHeight] = useState<number>(100);
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 300);
+    const [height, setHeight] = useState<number>(defBase?.height || 100);
     const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
     const {
         animationId1,
@@ -28,13 +29,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         animationId6,
         animationId7
     } = useRef({
-        animationId1: `d9ani1${props.base?.id}`,
-        animationId2: `d9ani2${props.base?.id}`,
-        animationId3: `d9ani3${props.base?.id}`,
-        animationId4: `d9ani4${props.base?.id}`,
-        animationId5: `d9ani5${props.base?.id}`,
-        animationId6: `d9ani6${props.base?.id}`,
-        animationId7: `d9ani7${props.base?.id}`
+        animationId1: `d9ani1${defBase?.id}`,
+        animationId2: `d9ani2${defBase?.id}`,
+        animationId3: `d9ani3${defBase?.id}`,
+        animationId4: `d9ani4${defBase?.id}`,
+        animationId5: `d9ani5${defBase?.id}`,
+        animationId6: `d9ani6${defBase?.id}`,
+        animationId7: `d9ani7${defBase?.id}`
     }).current
 
     useImperativeHandle(ref, () => ({

package/src/aldehyde/lowcode-components/gauge-chart/index.tsx

@@ -35,6 +35,7 @@ export interface ComponentStyle {
     detail?: { [key: string]: any };
     progress?: { show: boolean, [key: string]: any };
     center?: { x: number, y: number };
+    renderer?: "canvas" | "svg";
 }
 
 export interface ComponentProps {
@@ -52,6 +53,7 @@ export interface ComponentRef {
 const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
     const { style, data: propsData, isDesignMode } = props;
     const [config, setConfig] = useState<ComponentStyle>(style || {});
+    const [renderType, setRenderType] = useState<"canvas" | "svg">(style?.renderer || "svg"); // 渲染模式
     const [size, setSize] = useState<{ width: number, height: number }>();
     const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
     const [data, setData] = useState<number>(0);
@@ -62,7 +64,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const handleDestroy = () => {
         pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
         window.removeEventListener('resize', handleResize);
-        chart.current.dispose();
+        chart.current && chart.current.dispose();
     };
 
     useImperativeHandle(ref, () => ({
@@ -71,6 +73,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             setConfig({ ...(newStyle || {}) });
             setSize({ width: base.width, height: base.height });
             setDataConfig(newDataConfig);
+            setRenderType(newStyle?.renderer || "svg");
         },
         destroy: handleDestroy,
     }));
@@ -81,13 +84,16 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     };
 
     useEffect(() => {
-        chart.current = echarts.init(chartRef.current);
-        window.addEventListener('resize', handleResize);
         return () => {
             handleDestroy();
         }
     }, []);
 
+    useEffect(() => {
+        handleDestroy();
+        chart.current = echarts.init(chartRef.current, null, { renderer: renderType });
+        window.addEventListener('resize', handleResize);
+    }, [renderType]);
 
     // 请求数据
     const getData = async () => {

package/src/aldehyde/lowcode-components/index.ts

@@ -41,6 +41,7 @@ import TextScroller from "./text-scroller";
 import CapsuleBarChart from "./capsule-bar-chart";
 import CircularProgressChart from "./circular-progress-chart";
 import ActTable from "./act-table";
+import ProgressChart from "./progress-chart";
 
 
 type CompoundedComponent = {
@@ -86,7 +87,8 @@ type CompoundedComponent = {
     TextScroller?: typeof TextScroller;
     CapsuleBarChart?: typeof CapsuleBarChart;
     CircularProgressChart?: typeof CircularProgressChart;
-    ActTable?: typeof ActTable
+    ActTable?: typeof ActTable,
+    ProgressChart?: typeof ProgressChart
 };
 
 const LowcodeComponents: CompoundedComponent = {
@@ -97,7 +99,7 @@ const LowcodeComponents: CompoundedComponent = {
     Border7, Border8, Border9, Border10, Border11, Border12, Border13,
     Decoration1, Decoration2, Decoration3, Decoration4, Decoration5,
     Decoration6, Decoration7, Decoration8, Decoration9, Decoration10, Decoration11,
-    BaseTable, TextScroller, CapsuleBarChart, CircularProgressChart, ActTable
+    BaseTable, TextScroller, CapsuleBarChart, CircularProgressChart, ActTable, ProgressChart
 };
 
 export default LowcodeComponents;