瀏覽代碼

perf: Update useApexCharts.ts (#139)

1、setOptions增加callback方法,返回chartInstance,以便于对图表进行再操作,例如调用updateOptions方法更新图表;
2、新增调用ApexCharts的updateOptions方法更新图表
Pom 4 年之前
父節點
當前提交
5eecec0312
共有 1 個文件被更改,包括 31 次插入1 次删除
  1. 31 1
      src/hooks/web/useApexCharts.ts

+ 31 - 1
src/hooks/web/useApexCharts.ts

@@ -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,
   };
 }