<script setup lang="ts">
import { type EChartsOption, type EChartsType, init, registerMap } from 'echarts'

import china from '@/assets/china.json'
import 'echarts-gl'

const props = defineProps<{
  options: EChartsOption
}>()

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
registerMap('china', china)

const chartEle = shallowRef<HTMLDivElement>()
const chart = shallowRef<EChartsType>()

let listener: any

onMounted(() => {
  chart.value = init(chartEle.value!)

  listener = window.addEventListener('resize', () => {
    chart.value?.resize()
  })
})

effect(() => {
  console.log('chart options update', props.options)
  props.options && chart.value?.setOption(props.options)
})

onDeactivated(() => {
  window.removeEventListener('resize', listener)
})
</script>

<template>
  <div style="height:100%">
    <div ref="chartEle" style="height: 100%;" />
  </div>
</template>
