如何使用vue3的方式封装echarts中的地图作为公共组件

在 Vue3 中封装 ECharts 地图组件作为公共组件，通常需要以下几个步骤：

1. **安装依赖**：
首先，在项目里安装 `echarts` 和 `@vue/echarts` 这两个库。你可以通过 npm 或者 yarn 来安装：

   npm install echarts @vue/echarts

2. **创建组件**：
创建一个新的 Vue 组件文件，例如 `Map.vue`，并导入相关的依赖：

   <template>
     <div ref="chart" :style="{ width: '100%', height: '400px' }"></div>
   </template>

   <script>
   import { ECharts } from '@vue/echarts';
   
   export default {
     components: {
       ECharts,
     },
     setup(props) {
       // 初始化图表实例
       const chart = ref(null);
       const initChart = () => {
         // 在此处编写初始化地图配置，比如设置数据、样式等
         // 示例：
         const options = {
           map: 'your_map_type', // 例如 'china', 'us', 等
           series: [
             {
               type: 'map',
               data: your_data,
             },
           ],
         };
         chart.value = new ECharts(options);
       };

       // 使用生命周期钩子挂载和卸载图表
       onMounted(() => {
         initChart();
       }),
       onBeforeUnmount(() => {
         if (chart.value) chart.value.dispose(); // 清理图表资源
       });

       return { chart };
     },
   };
   </script>

3. **使用组件**：
在其他需要地图的地方引入这个组件，并传入必要的参数，如地图类型、数据等：

   <Map :options="mapOptions" />

然后在父组件中管理 `mapOptions` 对象。

4. **传递配置**：
如果有额外配置需要动态传递给地图组件，可以在 props 中定义它们，然后在内部接收并更新图表选项。