xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-09-24 20:36:37 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(hooks): correct chart rendering logic in useEcharts

Browse Source
This commit is contained in:
Soybean 2025-07-19 20:08:54 +08:00
parent c962f7b2c5
commit 8a7cd5934b
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/hooks/common/echarts.ts
View File

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