<script setup lang="ts">
// 引入 vue-echarts 组件
import VChart from 'vue-echarts'

import { registerMap, use } from 'echarts/core'
import { EffectScatterChart, ScatterChart } from 'echarts/charts'
import {
  GeoComponent,
  LegendComponent,
  TitleComponent,
  TooltipComponent,
} from 'echarts/components'
import chinaMap from '../china.json'

const props = defineProps<{
  data: {
    value: number
    name: string
  }[]
}>()

use([
  ScatterChart,
  EffectScatterChart,
  GeoComponent,
  TitleComponent,
  LegendComponent,
  TooltipComponent,
])

const colorMode = useColorMode()

registerMap('china', chinaMap)

const option = shallowRef(getData())
const map = shallowRef(null)
const open = shallowRef(false)

const img = null
</script>

<template>
  <ClientOnly fallback-tag="div" fallback="Loading comments...">
    <VChart
      ref="map" autoresize
      class="chart" :option="option"
    />
  </ClientOnly>
</template>

<style scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>
