<template>
  <div class="chart-wrapper">
    <div ref="chartRef" class="chart"></div>
  </div>
</template>

<script lang="ts" setup>
  import * as echarts from 'echarts';
  import { onMounted, ref } from 'vue';
  import { EChartsOption } from 'echarts';
  import GD_GEO_JSON from './440000_full.json';

  const PROVINS = [
    { name: '北京市', value: 20057.34 },
    { name: '天津市', value: 15477.48 },
    { name: '河北省', value: 31686.1 },
    { name: '山西省', value: 6992.6 },
    { name: '内蒙古自治区', value: 44045.49 },
    { name: '辽宁省', value: 40689.64 },
    { name: '吉林省', value: 37659.78 },
    { name: '黑龙江省', value: 45180.97 },
    { name: '上海市', value: 55204.26 },
    { name: '江苏省', value: 21900.9 },
    { name: '浙江省', value: 4918.26 },
    { name: '安徽省', value: 5881.84 },
    { name: '福建省', value: 4178.01 },
    { name: '江西省', value: 2227.92 },
    { name: '山东省', value: 2180.98 },
    { name: '河南省', value: 9172.94 },
    { name: '湖北省', value: 3368 },
    { name: '湖南省', value: 806.98 },
    { name: '广东省', value: 40689.44 },
  ];
  const CITIES = [
    { name: '广州市', value: 1 },
    { name: '韶关市', value: 20 },
    { name: '深圳市', value: 30 },
    { name: '珠海市', value: 30 },
    { name: '汕头市', value: 40 },
    { name: '佛山市', value: 44 },
    { name: '江门市', value: 55 },
    { name: '湛江市', value: 66 },
    { name: '茂名市', value: 77 },
    { name: '肇庆市', value: 88 },
    { name: '惠州市', value: 99 },
    { name: '梅州市', value: 11 },
    { name: '汕尾市', value: 22 },
    { name: '河源市', value: 33 },
    { name: '阳江市', value: 44 },
    { name: '清远市', value: 55 },
    { name: '东莞市', value: 66 },
    { name: '中山市', value: 77 },
    { name: '潮州市', value: 88 },
    { name: '揭阳市', value: 99 },
    { name: '云浮市', value: 33 },
  ];
  const convertData = () => {
    const cities = GD_GEO_JSON.features.map(item => item.properties);
    return CITIES.map(city => {
      const target = cities.find(c => c.name === city.name);
      return {
        ...city,
        lng: target?.centroid[0],
        lat: target?.centroid[1],
      };
    });
  };
  const finalData = convertData();
  const option: EChartsOption = {
    title: {
      text: '中国',
      padding: 10,
    },
    tooltip: {
      trigger: 'item',
    },
    geo: {
      tooltip: {
        show: true,
      },
      map: 'CN',
      roam: false, // 是否支持缩放
      label: {
        show: false,
      },
      emphasis: {
        label: {
          show: false,
        },
      },
    },
    dataset: {
      dimensions: ['name', 'value', 'lat', 'lng'],
      source: finalData,
    },
    series: [
      {
        name: '广场',
        type: 'map',
        map: 'CN',
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: false,
          },
        },
        tooltip: {
          show: false,
        },
        data: CITIES,
      },
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        symbolSize: 10,
        itemStyle: {
          color: '#2875FB',
        },
        encode: {
          name: 'name',
          lng: 'lng',
          lat: 'lat',
          value: 'value',
        },
        label: {
          formatter: '{@value}个广场',
          position: 'top',
          show: true,
          color: '#fff',
          padding: [0, 8],
          height: 30,
          verticalAlign: 'middle',
          borderRadius: 4,
          backgroundColor: 'rgba(0,0,0,0.65)',
        },
        tooltip: {
          show: false,
        },
      },
    ],
    visualMap: {
      min: 1,
      max: 100,
      text: ['High', 'Low'],
      realtime: false,
      calculable: true,
      inRange: {
        color: ['lightskyblue', 'yellow', 'orangered'],
      },
      show: false,
      seriesIndex: 0,
    },
  };
  const chartRef = ref();
  echarts.registerMap('CN', GD_GEO_JSON as any);
  const pos = ref({ x: 0, y: 0 });
  onMounted(() => {
    const myChart = echarts.init(chartRef.value);
    myChart.setOption(option);
  });
</script>

<style lang="scss" scoped>
  .chart-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .chart {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }
</style>

参考

https://echarts.apache.org/examples/zh/editor.html?c=map-HK

获取广东省的 GEO data

http://datav.aliyun.com/portal/school/atlas/area_selector