diff --git a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx index df7fc0623..7b64f0f6c 100644 --- a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx @@ -61,6 +61,8 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => { const [chartSize, setChartSize] = useState(); const firstResize = useRef(true); const theme = useContext(ThemeContext); + const [chartKey, setChartKey] = useState(0); + const prevRaceMode = useRef(); const defaultChartTheme = { color: chartColorPalette, backgroundColor: "#fff", @@ -73,6 +75,16 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => { log.error('theme chart error: ', error); } + // Detect race mode changes and force chart recreation + const currentRaceMode = comp.children.chartConfig?.children?.comp?.children?.race?.getView(); + useEffect(() => { + if (prevRaceMode.current !== undefined && prevRaceMode.current !== currentRaceMode) { + // Force chart recreation when race mode changes + setChartKey(prev => prev + 1); + } + prevRaceMode.current = currentRaceMode; + }, [currentRaceMode]); + const triggerClickEvent = async (dispatch: any, action: CompAction) => { await getPromiseAfterDispatch( dispatch, @@ -176,10 +188,11 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => { return (
(echartsCompRef.current = e)} style={{ height: "100%" }} - notMerge - lazyUpdate + notMerge={!currentRaceMode} + lazyUpdate={!currentRaceMode} opts={{ locale: getEchartsLocale() }} option={option} mode={mode} diff --git a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartUtils.ts b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartUtils.ts index 72abe79f7..84b4ea05c 100644 --- a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartUtils.ts @@ -201,6 +201,15 @@ export function getEchartsConfig( animationEasing: 'linear', animationEasingUpdate: 'linear', } + } else { + // Ensure proper animation settings when race is disabled + config = { + ...config, + animationDuration: 1000, + animationDurationUpdate: 1000, + animationEasing: 'cubicOut', + animationEasingUpdate: 'cubicOut', + } } if (props.data.length <= 0) { // no data @@ -333,6 +342,21 @@ export function getEchartsConfig( animationDurationUpdate: 300 }, } + } else { + // Reset axis animations when race is disabled + config = { + ...config, + xAxis: { + ...config.xAxis, + animationDuration: undefined, + animationDurationUpdate: undefined + }, + yAxis: { + ...config.yAxis, + animationDuration: undefined, + animationDurationUpdate: undefined + }, + } } } // console.log("Echarts transformedData and config", transformedData, config); diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx index dd7a36993..d1450007a 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx @@ -53,7 +53,7 @@ export const BarChartConfig = (function () { type: "bar", subtype: props.type, realtimeSort: props.race, - seriesLayoutBy: props.race?'column':undefined, + seriesLayoutBy: props.race?'column':'row', label: { show: props.showLabel, position: "top",