Unverified 提交 5eecec03 作者: Pom 提交者: GitHub

perf: Update useApexCharts.ts (#139)

1、setOptions增加callback方法,返回chartInstance,以便于对图表进行再操作,例如调用updateOptions方法更新图表;
2、新增调用ApexCharts的updateOptions方法更新图表
上级 877311f9
......@@ -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,
};
}
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论