admin/src/hooks/web/useApexCharts.ts

import { useTimeoutFn } from '/@/hooks/core/useTimeout';
import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
import { unref, Ref, nextTick } from 'vue';

import ApexCharts from 'apexcharts';

export function useApexCharts(elRef: Ref<HTMLDivElement>) {
  let chartInstance: Nullable<ApexCharts> = null;

  function setOptions(options: any, callback) {
    nextTick(() => {
      useTimeoutFn(() => {
        const el = unref(elRef);

        if (!el || !unref(el)) return;
        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;
    chartInstance?.destroy?.();
    chartInstance = null;
  });

  return {
    setOptions,
    updateOptions,
  };
}