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

perf(projects): echarts loading style

Browse Source
This commit is contained in:
Soybean 2024-01-26 02:10:00 +08:00
parent b5477e8996
commit 456c318ac6
1 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/hooks/chart/use-echarts.ts
View File

@ -80,17 +80,7 @@ interface ChartHooks {
* @param optionsFactory echarts options factory function * @param optionsFactory echarts options factory function
* @param darkMode dark mode * @param darkMode dark mode
*/ */
export function useEcharts<T extends ECOption>( export function useEcharts<T extends ECOption>(optionsFactory: () => T, hooks: ChartHooks = {}) {
optionsFactory: () => T,
hooks: ChartHooks = {
onRender(chart) {
chart.showLoading();
},
onUpdated(chart) {
chart.hideLoading();
}
}
) {
const scope = effectScope(); const scope = effectScope();
const themeStore = useThemeStore(); const themeStore = useThemeStore();
@ -103,6 +93,24 @@ export function useEcharts<T extends ECOption>(
let chart: echarts.ECharts | null = null; let chart: echarts.ECharts | null = null;
const chartOptions: T = optionsFactory(); const chartOptions: T = optionsFactory();
const {
onRender = instance => {
const textColor = darkMode.value ? 'rgb(224, 224, 224)' : 'rgb(31, 31, 31)';
const maskColor = darkMode.value ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.8)';
instance.showLoading({
color: themeStore.themeColor,
textColor,
fontSize: 14,
maskColor
});
},
onUpdated = instance => {
instance.hideLoading();
},
onDestroy
} = hooks;
/** /**
* whether can render chart * whether can render chart
* *
@ -135,7 +143,7 @@ export function useEcharts<T extends ECOption>(
chart?.setOption({ ...updatedOpts, backgroundColor: 'transparent' }); chart?.setOption({ ...updatedOpts, backgroundColor: 'transparent' });
await hooks?.onUpdated?.(chart!); await onUpdated?.(chart!);
} }
/** render chart */ /** render chart */
@ -149,7 +157,7 @@ export function useEcharts<T extends ECOption>(
chart.setOption({ ...chartOptions, backgroundColor: 'transparent' }); chart.setOption({ ...chartOptions, backgroundColor: 'transparent' });
await hooks?.onRender?.(chart); await onRender?.(chart);
} }
} }
@ -162,7 +170,7 @@ export function useEcharts<T extends ECOption>(
async function destroy() { async function destroy() {
if (!chart) return; if (!chart) return;
await hooks?.onDestroy?.(chart); await onDestroy?.(chart);
chart?.dispose(); chart?.dispose();
chart = null; chart = null;
} }
@ -171,7 +179,7 @@ export function useEcharts<T extends ECOption>(
async function changeTheme() { async function changeTheme() {
await destroy(); await destroy();
await render(); await render();
await hooks?.onUpdated?.(chart!); await onUpdated?.(chart!);
} }
/** /**