fix(hooks): correct chart rendering logic in useEcharts

This commit is contained in:
Soybean
2025-07-19 20:08:54 +08:00
parent c962f7b2c5
commit 8a7cd5934b

View File

@ -113,7 +113,7 @@ export function useEcharts<T extends ECOption>(optionsFactory: () => T, hooks: C
/** is chart rendered */
function isRendered() {
return Boolean(domRef.value && chart);
return Boolean(domRef.value && chart.value);
}
/**
@ -122,12 +122,14 @@ export function useEcharts<T extends ECOption>(optionsFactory: () => T, hooks: C
* @param callback callback function
*/
async function updateOptions(callback: (opts: T, optsFactory: () => T) => ECOption = () => chartOptions) {
if (!isRendered()) return;
const updatedOpts = callback(chartOptions, optionsFactory);
Object.assign(chartOptions, updatedOpts);
await nextTick();
if (!isRendered()) return;
if (isRendered()) {
chart.value?.clear();
}
@ -147,8 +149,6 @@ export function useEcharts<T extends ECOption>(optionsFactory: () => T, hooks: C
const chartTheme = darkMode.value ? 'dark' : 'light';
await nextTick();
chart.value = echarts.init(domRef.value, chartTheme);
chart.value?.setOption({ ...chartOptions, backgroundColor: 'transparent' });
@ -190,12 +190,16 @@ export function useEcharts<T extends ECOption>(optionsFactory: () => T, hooks: C
// resize chart
if (isRendered()) {
resize();
return;
}
// render chart
await render();
await onUpdated?.(chart.value!);
if (chart.value) {
await onUpdated?.(chart.value);
}
}
scope.run(() => {