vue实现中国地图

Vue 实现中国地图

在 Vue 项目中实现中国地图，可以使用 ECharts 或 D3.js 等数据可视化库。以下是基于 ECharts 的实现方法：

安装 ECharts 和相关依赖

确保项目中安装了 echarts 和 echarts-china-provinces-pnpm（用于中国地图数据）：

npm install echarts echarts-china-provinces-pnpm

引入 ECharts 和地图数据

在 Vue 组件中引入 ECharts 和中国地图数据：

import * as echarts from 'echarts';
import 'echarts/map/js/china'; // 引入中国地图数据

创建地图容器

在模板中添加一个容器用于渲染地图：

<template>
  <div id="china-map" style="width: 800px; height: 600px;"></div>
</template>

初始化地图

在 mounted 钩子中初始化地图并配置选项：

mounted() {
  const chart = echarts.init(document.getElementById('china-map'));
  const option = {
    title: {
      text: '中国地图',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}'
    },
    series: [
      {
        name: '中国',
        type: 'map',
        map: 'china',
        label: {
          show: true
        },
        emphasis: {
          label: {
            show: true
          }
        },
        data: [] // 可以添加自定义数据
      }
    ]
  };
  chart.setOption(option);
}

自定义地图样式和数据

通过修改 option 中的 series 配置，可以调整地图颜色、标签显示等：

series: [
  {
    name: '中国',
    type: 'map',
    map: 'china',
    roam: true, // 允许缩放和平移
    itemStyle: {
      areaColor: '#e0f7fa',
      borderColor: '#81d4fa'
    },
    emphasis: {
      itemStyle: {
        areaColor: '#4fc3f7'
      }
    }
  }
]

响应式调整

监听窗口大小变化，动态调整地图尺寸：

window.addEventListener('resize', () => {
  chart.resize();
});

注意事项

• 如果需要更详细的地图数据（如省份、城市），可以引入 echarts/map/js/province/省份名称。
• 在 Vue 3 中使用时，需在 onMounted 钩子中初始化地图。
• 地图数据较大时，建议异步加载以优化性能。

通过以上步骤，可以在 Vue 项目中快速实现一个交互式的中国地图。