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

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

  return { id, chart, setOption, dispose, initChart }
}