hailin
/
dv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: force full ECharts re-mount on wordcloud config change 

React key now includes shape+size+gridSize+customImage, ensuring
the echarts instance is fully destroyed and recreated when switching
shapes. This bypasses the wordcloud plugin's internal mask cache.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hailin 2026-04-05 22:00:29 -07:00
parent abe696deb5
commit 95bd6c4f55
2 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/adapters/gateways/EChartsOptionBuilder/wordcloudOptionBuilder.ts
View File

@ -272,8 +272,11 @@ export function buildWordcloudOption(
data: wordData, data: wordData,
}; };
// Always set maskImage explicitly — undefined clears previous mask if (maskImage) {
series.maskImage = maskImage ?? undefined; series.maskImage = maskImage;
}
// For rectangle: no maskImage, no shape — pure default fills the container
// For other shapes with mask: maskImage handles the shape
option.series = [series]; option.series = [series];
return option; return option;

8
frontend/src/frameworks/components/charts/ChartRenderer.tsx
View File

@ -38,9 +38,11 @@ export const ChartRenderer: React.FC<ChartRendererProps> = ({ chart, data, chart
default: default:
const borderRadius = chart.style?.background?.borderRadius ?? 0; const borderRadius = chart.style?.background?.borderRadius ?? 0;
const overflow = borderRadius > 0 ? 'hidden' as const : undefined; const overflow = borderRadius > 0 ? 'hidden' as const : undefined;
// Force re-mount when wordcloud shape changes (plugin caches mask internally) // Force re-mount when wordcloud config changes (plugin caches mask internally)
const wcShape = (chart.style as any)?.wordcloud?.shape ?? 'default'; const wcConfig = (chart.style as any)?.wordcloud;
const echartsKey = chart.type === 'wordcloud' ? `${chartId}-${wcShape}` : chartId; const echartsKey = chart.type === 'wordcloud' && wcConfig
? `${chartId}-${wcConfig.shape}-${wcConfig.sizeMin}-${wcConfig.sizeMax}-${wcConfig.gridSize}-${wcConfig.customImageUrl ? 'img' : 'no'}`
: chartId;
return echartsOption return echartsOption
? <EChartsBase key={echartsKey} chartId={chartId} option={echartsOption} style={{ width: '100%', height: '100%', minHeight: 250, borderRadius, overflow }} /> ? <EChartsBase key={echartsKey} chartId={chartId} option={echartsOption} style={{ width: '100%', height: '100%', minHeight: 250, borderRadius, overflow }} />
: <div style={{ padding: 16, color: '#999', textAlign: 'center' }}>请绑定数据字段</div>; : <div style={{ padding: 16, color: '#999', textAlign: 'center' }}>请绑定数据字段</div>;