<script setup lang="ts">
// 导入echarts核心模块
import * as echarts from 'echarts/core';
// 导入echarts组件模块
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  GridComponent,
  type TooltipComponentOption,
  type VisualMapComponentOption,
  type ToolboxComponentOption,
  type TitleComponentOption,
  type GeoComponentOption,
} from 'echarts/components';
// 导入地图图表模块
import { MapChart, type MapSeriesOption } from 'echarts/charts';
// 导入Canvas渲染器模块
import { CanvasRenderer } from 'echarts/renderers';

// 使用echarts模块
echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  MapChart,
  CanvasRenderer,
  GridComponent,
]);

// 定义ECharts配置类型
type EChartsOption = echarts.ComposeOption<
  | TitleComponentOption
  | ToolboxComponentOption
  | TooltipComponentOption
  | VisualMapComponentOption
  | GeoComponentOption
  | MapSeriesOption
>;
// 导入世界地图JSON数据
import mapJson from '@/assets/data/worldGeo-zh.json'
import { onMounted, defineProps, watch } from "vue";

onMounted(() => {

  // 定义ECharts配置项
  const option: EChartsOption = {
    tooltip: {
      trigger: 'item',
      showDelay: 0,
      transitionDuration: 0.2
    },
    visualMap: {
      left: 'left',
      min: 0,
      max: 500,
      inRange: {
        color: [
          '#313695',
          '#4575b4',
          '#74add1',
          '#abd9e9',
          '#e0f3f8',
          '#ffffbf',
          '#fee090',
          '#fdae61',
          '#f46d43',
          '#d73027',
          '#a50026'
        ]
      },
      text: ['High', 'Low'], // 文本，默认为数值文本
      calculable: true
    },
    series: [
      {
        name: '国家 访问数量',
        type: 'map',
        map: 'world',
        emphasis: {
          label: {
            show: true
          }
        },
        data: props.dataSource
      }
    ]
  };
// 注册自定义地图
  echarts.registerMap(
    'world',
    mapJson as unknown as Parameters<typeof echarts.registerMap>[1],
  );
  // 获取图表容器
  let chartDom = document.getElementById('mapChart');
  // 初始化图表
  let myChart = echarts.init(chartDom);
  // 设置图表配置项
  myChart.setOption(option);

})

const props = defineProps({
  dataSource: []
});
// 使用watch监听特定的prop
watch(() => props.dataSource, (newValue, oldValue) => {
  // 当prop发生变化时执行的操作
  // 获取图表容器
  let chartDom = document.getElementById('mapChart');
  // 初始化图表
  let myChart = echarts.init(chartDom);
  // 设置图表配置项
  // 在这里可以根据新值进行相应的操作，例如更新图表数据
  myChart.setOption({ series: [{ data: newValue }] });
});
</script>
<template>
  <!-- 图表容器 -->
  <div id="mapChart"></div>
</template>

<style scoped lang="less">
#mapChart {
  width: 100%;
  height: 400px;

}
</style>
