perf: Update useApexCharts.ts (#139)
1、setOptions增加callback方法,返回chartInstance,以便于对图表进行再操作,例如调用updateOptions方法更新图表; 2、新增调用ApexCharts的updateOptions方法更新图表
This commit is contained in:
parent
877311f9df
commit
5eecec0312
|
|
@ -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,9 +16,38 @@ 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);
|
}, 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(() => {
|
tryOnUnmounted(() => {
|
||||||
if (!chartInstance) return;
|
if (!chartInstance) return;
|
||||||
|
|
@ -28,5 +57,6 @@ export function useApexCharts(elRef: Ref<HTMLDivElement>) {
|
||||||
|
|
||||||
return {
|
return {
|
||||||
setOptions,
|
setOptions,
|
||||||
|
updateOptions,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue