1
import type { ECharts } from 'echarts/core'
2
import type { EChartsOptions } from '@/plugins/echarts'
3
import { debounce } from 'es-toolkit'
4
import echarts from '@/plugins/echarts'
5

6
export interface UseEChartsOptions {
7
  /**
8
   * echarts初始化选项
9
   */
10
  initOptions?: echarts.EChartsInitOpts
11
  /**
12
   * 是否自动调整尺寸
13
   */
14
  autoResize?: boolean
15
  /**
16
   * 是否开启动画
17
   */
18
  animation?: boolean
19
  /**
20
   * resize防抖时间
21
   */
22
  resizeDebounce?: number
23
  /**
24
   * 是否默认初始化options
25
   */
26
  defaultInit?: boolean
27
}
28

29
export function useECharts(
30
  domRef: Ref<HTMLElement | null>,
31
  chartOptions: EChartsOptions,
32
  options?: UseEChartsOptions,
33
) {
34
  const {
35
    initOptions,
36
    autoResize = true,
37
    animation = true,
38
    resizeDebounce = 300,
39
    defaultInit = true,
40
  } = options ?? {}
41

42
  let chartInst: ECharts | null
43

44
  // 初始化
45
  function init() {
46
    if (!domRef.value) {
47
      return
48
    }
49
    chartInst = echarts.init(domRef.value, undefined, initOptions)
50
  }
51

52
  // 设置选项
53
  function setOption(
54
    options: EChartsOptions,
55
    notMerge?: boolean,
56
    lazyUpdate?: boolean,
57
  ) {
58
    if (!chartInst) {
59
      return
60
    }
61
    nextTick(() => {
62
      // @ts-expect-error initialized
63
      chartInst.setOption(options, {
64
        notMerge,
65
        lazyUpdate,
66
        silent: !animation,
67
      })
68
    })
69
  }
70

71
  // 自动调整尺寸函数
72
  const resize = debounce(
73
    () => {
74
      if (!chartInst) {
75
        return
76
      }
77
      chartInst.resize({
78
        animation: animation
79
          ? {
80
              duration: 300,
81
            }
82
          : undefined,
83
      })
84
    },
85
    resizeDebounce,
86
    { edges: ['leading', 'trailing'] },
87
  )
88

89
  // 自动调整尺寸
90
  if (autoResize) {
91
    window.addEventListener('resize', resize)
92
  }
93

94
  // 销毁实例
95
  function destroy() {
96
    if (chartInst) {
97
      chartInst?.dispose()
98
      chartInst = null
99
    }
100
    window.removeEventListener('resize', resize)
101
  }
102

103
  onMounted(() => {
104
    nextTick(() => {
105
      init()
106
      if (defaultInit) {
107
        setOption(chartOptions)
108
      }
109
    })
110
  })
111

112
  onUnmounted(() => {
113
    destroy()
114
  })
115

116
  return {
117
    init,
118
    // @ts-expect-error initialized
119
    chartInst,
120
    setOption,
121
    destroy,
122
    resize,
123
  }
124
}