当前位置：首页 > VUE

vue 实现中国地图

2026-02-09 16:44:19VUE

使用 Vue 实现中国地图

安装依赖

需要安装 ECharts 和对应的中国地图数据包。通过 npm 或 yarn 安装：

npm install echarts echarts-china-provinces-pypkg

引入 ECharts 和中国地图数据

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

import * as echarts from 'echarts';
import 'echarts/map/js/china';

创建地图容器

在模板中创建一个用于渲染地图的 DOM 容器：

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

初始化地图

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

mounted() {
  const chart = echarts.init(document.getElementById('china-map'));
  chart.setOption({
    series: [{
      type: 'map',
      map: 'china',
      roam: true,
      label: {
        show: true,
        color: '#333'
      },
      itemStyle: {
        areaColor: '#e0f7fa',
        borderColor: '#81d4fa'
      },
      emphasis: {
        label: {
          color: '#fff'
        },
        itemStyle: {
          areaColor: '#0288d1'
        }
      }
    }]
  });
}

添加数据交互

如果需要展示各省份数据，可以通过 data 属性绑定：

series: [{
  type: 'map',
  map: 'china',
  data: [
    { name: '北京', value: 100 },
    { name: '上海', value: 200 },
    // 其他省份数据...
  ],
  // 其他配置...
}]

响应式调整

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

vue 实现中国地图

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

完整组件示例

<template>
  <div id="china-map" style="width: 100%; height: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts/map/js/china';

export default {
  name: 'ChinaMap',
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const chart = echarts.init(document.getElementById('china-map'));
      chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>数值: {c}'
        },
        visualMap: {
          min: 0,
          max: 200,
          text: ['高', '低'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#e0f7fa', '#0288d1']
          }
        },
        series: [{
          type: 'map',
          map: 'china',
          roam: true,
          data: [
            { name: '北京', value: 100 },
            { name: '天津', value: 50 },
            { name: '上海', value: 200 }
          ],
          label: {
            show: true
          },
          emphasis: {
            label: {
              show: true
            }
          }
        }]
      });
      window.addEventListener('resize', () => chart.resize());
    }
  }
};
</script>