vue3+ts+echars实现中国为中心中文版世界地图（包含配置文件）

<template>
  <div class="world-map">
    <div id="worldMap" ref="worldMap" class="map-wrap"></div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, onActivated, watch } from 'vue';
  import * as echarts from 'echarts';
  import appData from '@/assets/continent_geo.json';

  const props = defineProps({
    mapData: {
      type: Array,
      default() {
        return [];
      },
    },
  });

  // const a = props.mapData;
  // console.log(a);
  // const data = [
  //   {
  //     name: '中国',
  //     value: 100,
  //   },
  //   {
  //     name: '美国',
  //     value: 200,
  //   },
  // ];
  let myChart: echarts.ECharts | null = null;
  let max = 0;
  let min = 1000;

  const initMap = () => {
    echarts.registerMap('continent', appData);
    myChart = echarts.init(document.getElementById('worldMap')!);
    props.mapData.forEach((item) => {
      if (item.value > max) {
        max = item.value;
      }
      if (item.value < min) {
        min = item.value;
      }
    });
    myChart.setOption({
      tooltip: {
        trigger: 'item',
        // eslint-disable-next-line consistent-return
        formatter(params: any) {
          if (params.data) {
            const dom = `
            <div> ${params.data.name} </div>
            <div>渠道统计 ${Number(params.data.value).toFixed(2)} </div>
          `;
            return dom;
          }
        },
      },
      visualMap: {
        type: 'continuous',
        min,
        max,
        bottom: '0',
        left: '0',
        textStyle: { color: '#73747E' },
        // pieces: props.pieces,

        inRange: {
          // 渐变颜色，从小到大
          color: ['#EDF5FF', '#66A6FD'],
        },
      },
      series: [
        {
          type: 'map',
          mapType: 'continent', // 自定義擴展圖表類型
          zoom: 1.1,
          aspectScale: 1.1, // 长宽比
          itemStyle: {
            normal: { label: { show: false } },
            emphasis: { label: { show: true } },
          },
          data: props.mapData,
        },
      ],
    });
  };
  initMap();

  // onMounted(() => {
  //   initMap();
  // });

  onActivated(() => {
    if (myChart) {
      setTimeout(() => {
        myChart.resize();
      }, 200);
    }
  });
  watch(
    () => props.mapData,
    () => {
      initMap();
    },
    { deep: true }
  );
</script>

<style scoped>
  .map-wrap {
    width: 100%;
    height: 400px;
  }
</style>

配置文件也已上传csdn可供下载。