github_mirrors/vben-admin-thin-next
1
0
Fork 0
mirror of https://github.com/vbenjs/vben-admin-thin-next.git synced 2025-01-24 10:33:47 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: Update useApexCharts.ts (#139)

Browse Source 
1、setOptions增加callback方法，返回chartInstance，以便于对图表进行再操作，例如调用updateOptions方法更新图表；
2、新增调用ApexCharts的updateOptions方法更新图表
This commit is contained in:
Pom 2020-12-21 08:06:51 -06:00 committed by GitHub
parent 877311f9df
commit 5eecec0312
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/hooks/web/useApexCharts.ts
View File

@ -7,7 +7,7 @@ import ApexCharts from 'apexcharts';
export function useApexCharts(elRef: Ref<HTMLDivElement>) {
let chartInstance: Nullable<ApexCharts> = null;
function setOptions(options: any) {
function setOptions(options: any, callback) {
nextTick(() => {
useTimeoutFn(() => {
const el = unref(elRef);
@ -16,9 +16,38 @@ export function useApexCharts(elRef: Ref<HTMLDivElement>) {
chartInstance = new ApexCharts(el, options);
chartInstance && chartInstance.render();
// setOptions增加callback方法，返回chartInstance，以便于对图表进行再操作，例如调用updateOptions方法更新图表
callback && callback(chartInstance);
}, 30);
});
}
// 新增调用ApexCharts的updateOptions方法更新图表
function updateOptions(
chartInstance: Nullable<ApexCharts>,
options,
redraw = false,
animate = true,
updateSyncedCharts = true,
overwriteInitialConfig = true,
callback) {
nextTick(() => {
useTimeoutFn(() => {
chartInstance && chartInstance.updateOptions(
options,
redraw,
animate,
updateSyncedCharts,
overwriteInitialConfig);
callback && callback(chartInstance);
}, 30);
});
}
tryOnUnmounted(() => {
if (!chartInstance) return;
@ -28,5 +57,6 @@ export function useApexCharts(elRef: Ref<HTMLDivElement>) {
return {
setOptions,
updateOptions,
};
}