import { ref } from 'vue'
import * as echarts from 'echarts'
import { guid } from '@/utils/util'

export function useEchart() {
  let chart = ref(null)
  let id = ref(guid())
  const initChart = () => {
    const dom = document.getElementById(id.value)
    chart.value = echarts.init(dom)
  }
  const setOption = (params) => {
    chart.value.setOption(params)
  }
  const resize = () => {
    if (chart) {
      chart.dispose()
      chart = null
      initChart()
    }
  }
  onMounted(() => {
    // 监听窗口大小变化
    window.addEventListener('resize', resize)
  })

  return { id, chart, setOption, initChart }
}