mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-27 20:38:54 +08:00
perf: Update useApexCharts.ts (#139)
1、setOptions增加callback方法,返回chartInstance,以便于对图表进行再操作,例如调用updateOptions方法更新图表; 2、新增调用ApexCharts的updateOptions方法更新图表
This commit is contained in:
@@ -7,7 +7,7 @@ import ApexCharts from 'apexcharts';
|
|||||||
export function useApexCharts(elRef: Ref<HTMLDivElement>) {
|
export function useApexCharts(elRef: Ref<HTMLDivElement>) {
|
||||||
let chartInstance: Nullable<ApexCharts> = null;
|
let chartInstance: Nullable<ApexCharts> = null;
|
||||||
|
|
||||||
function setOptions(options: any) {
|
function setOptions(options: any, callback) {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
useTimeoutFn(() => {
|
useTimeoutFn(() => {
|
||||||
const el = unref(elRef);
|
const el = unref(elRef);
|
||||||
@@ -16,6 +16,35 @@ export function useApexCharts(elRef: Ref<HTMLDivElement>) {
|
|||||||
chartInstance = new ApexCharts(el, options);
|
chartInstance = new ApexCharts(el, options);
|
||||||
|
|
||||||
chartInstance && chartInstance.render();
|
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);
|
}, 30);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -28,5 +57,6 @@ export function useApexCharts(elRef: Ref<HTMLDivElement>) {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
setOptions,
|
setOptions,
|
||||||
|
updateOptions,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user