vue项目中使用echarts - china.js绘制地图，并且回调所点击的省份

最新推荐文章于 2025-10-30 14:47:30 发布

原创最新推荐文章于 2025-10-30 14:47:30 发布 · 5.7k 阅读

5 ·

CC 4.0 BY-SA版权

本文介绍了一种使用ECharts在Vue环境中实现中国省份地图交互的方法。通过点击地图上的省份，可以触发其他图表数据的更新。文章详细展示了如何引入地图数据、设置地图样式以及添加点击事件监听，为开发者提供了一个实用的地图交互案例。

该文章已生成可运行项目，

项目需求：绘制一幅中国省份地图，点击地图中的省份，更改其它图表的数据。

地图交互效果如下图：

实现代码如下：

import { mapGetters } from 'vuex'
import '../../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
const echarts = require('echarts')

export default {
  name: 'Dashboard',
  data() {
    return {
      myChinaMap: {}
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    const _this = this
    this.$nextTick(() => {
      _this.myChinaMap = echarts.init(this.$refs.mapContainer)

      _this.myChinaMap.on('click', function(param) {
        console.log(param)
      })

      _this.myChinaMap.setOption({ // 进行相关配置
        backgroundColor: '#fff',
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ['High', 'Low'],
          realtime: true,
          calculable: true,
          color: ['orangered', 'yellow', 'lightskyblue']
        },
        geo: { // 这个是重点配置区
          map: 'china', // 表示中国地图
          roam: true,
          selectedMode: 'single',
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: 'rgba(0,0,0,0.4)'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
    })
}

本文章已经生成可运行项目