vue 实现中国地图

在Vue中实现中国地图通常需要借助第三方库如ECharts或D3.js。以下是基于ECharts的详细实现方法：

安装依赖

确保项目中已安装ECharts和Vue-ECharts：

npm install echarts vue-echarts

注册组件

在Vue项目中全局注册ECharts组件：

import Vue from 'vue';
import ECharts from 'vue-echarts';
import 'echarts/map/js/china'; // 引入中国地图数据

Vue.component('v-chart', ECharts);

基础地图实现

创建一个基础的中国地图组件：

<template>
  <v-chart :options="mapOptions" style="width: 100%; height: 600px"/>
</template>

<script>
export default {
  data() {
    return {
      mapOptions: {
        title: {
          text: '中国地图',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },
        visualMap: {
          min: 0,
          max: 1000,
          text: ['高', '低'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#50a3ba', '#eac736', '#d94e5d']
          }
        },
        series: [{
          name: '中国',
          type: 'map',
          map: 'china',
          roam: true,
          label: {
            show: true
          },
          data: [
            {name: '北京', value: 543},
            {name: '上海', value: 432}
          ]
        }]
      }
    }
  }
}
</script>

进阶功能

添加点击事件和自定义样式：

series: [{
  // ...其他配置
  emphasis: {
    label: {
      color: '#fff'
    },
    itemStyle: {
      areaColor: '#389BB7'
    }
  },
  selectedMode: 'single'
}]

异步加载数据

通过API动态加载地图数据：

async mounted() {
  const response = await fetch('/api/map-data');
  this.mapOptions.series[0].data = await response.json();
}

注意事项

1. 需要确保china.js地图数据已正确引入
2. 移动端需设置合适的视口和缩放比例
3. 大数据量时建议使用懒加载或分区域渲染

完整示例可参考ECharts官方文档中的中国地图示例，根据实际需求调整视觉映射参数和交互功能。对于更复杂的需求，可结合geo组件实现多图层叠加效果。