当前位置：首页 > VUE

vue 实现中国地图

2026-03-27 01:32:33VUE

使用 ECharts 实现中国地图

安装 ECharts 和地图数据依赖

npm install echarts echarts-china-provinces-pypkg

在 Vue 组件中引入

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

基本地图组件实现

<template>
  <div ref="mapContainer" style="width: 800px; height: 600px;"></div>
</template>

<script>
export default {
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const chart = echarts.init(this.$refs.mapContainer)
      const option = {
        title: {
          text: '中国地图示例'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },
        series: [{
          name: '中国',
          type: 'map',
          map: 'china',
          label: {
            show: true
          },
          emphasis: {
            label: {
              show: true
            }
          },
          data: []
        }]
      }
      chart.setOption(option)
    }
  }
}
</script>

添加交互功能

鼠标悬停高亮效果

series: [{
  // ...其他配置
  emphasis: {
    itemStyle: {
      areaColor: '#f4d942'
    }
  }
}]

点击省份触发事件

vue 实现中国地图

chart.on('click', params => {
  console.log('点击省份:', params.name)
  this.$emit('province-click', params.name)
})

添加数据可视化

显示各省份数据

data: [
  { name: '北京', value: 100 },
  { name: '上海', value: 80 },
  { name: '广东', value: 120 },
  // 其他省份数据...
]

配置视觉映射

visualMap: {
  min: 0,
  max: 200,
  text: ['高', '低'],
  realtime: false,
  calculable: true,
  inRange: {
    color: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695']
  }
}

响应式处理

窗口大小变化时自适应

vue 实现中国地图

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

组件销毁时清理

beforeDestroy() {
  window.removeEventListener('resize', this.resizeHandler)
  if (this.chart) {
    this.chart.dispose()
  }
}

进阶功能实现

地图下钻到省级

// 需要先注册省级地图数据
import provinceMap from 'echarts/map/js/province/guangdong'

// 点击事件处理
chart.on('click', params => {
  if (params.name === '广东') {
    echarts.registerMap('guangdong', provinceMap)
    chart.setOption({
      series: [{
        map: 'guangdong',
        // ...其他配置
      }]
    })
  }
})

添加地图标记点

series: [
  // 地图系列...
  {
    type: 'effectScatter',
    coordinateSystem: 'geo',
    data: [
      { name: '北京', value: [116.46, 39.92, 100] },
      { name: '上海', value: [121.48, 31.22, 80] }
    ],
    symbolSize: val => val[2] / 10,
    showEffectOn: 'render',
    rippleEffect: {
      brushType: 'stroke'
    },
    label: {
      formatter: '{b}',
      position: 'right'
    }
  }
]