vue echaets实现地图下钻功能和散点图

代码实现如下

<template>
  <div>
    <div ref="mapCountry" class="map-main" />
    <div ref="mapProvince" class="map-main" />
    <div ref="mapCity" class="map-main" />
    <div ref="mapCounty" class="map-main" />
  </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts/map/js/china'
import fuzhou from '@/assets/福州市.json'
import longyan from '@/assets/龙岩市.json'
import zhangzhou from '@/assets/漳州市.json'
import xiamen from '@/assets/厦门市.json'
import ningde from '@/assets/宁德市.json'
import sanming from '@/assets/三明市.json'
import nanping from '@/assets/南平市.json'
import putian from '@/assets/莆田市.json'
import quanzhou from '@/assets/泉州市.json'
import cangshan from '@/assets/cangshan.json' // geojson.io 手动绘制后引入
export default {
  data() {
    return {
      chartCountry: null,
      chartProvince: null,
      chartCity: null,
      chartCounty: null,
      provinceName: null,
      jsonMap: {
        '福州市': fuzhou,
        '龙岩市': longyan,
        '漳州市': zhangzhou,
        '厦门市': xiamen,
        '宁德市': ningde,
        '三明市': sanming,
        '南平市': nanping,
        '莆田市': putian,
        '泉州市': quanzhou,
        '仓山区': cangshan
      },
      dataCountry: [
        { name: '北京', value: 628 },
        { name: '重庆', value: 858 },
        { name: '河南', value: 352 },
        { name: '湖南', value: 625 },
        { name: '山西', value: 241 },
        { name: '新疆', value: 25486 },
        { name: '浙江', value: 986 },
        { name: '福建', value: 11296 },
        { name: '贵州', value: 854 },
        { name: '广东', value: 2458 },
        { name: '西藏', value: 18563 },
        { name: '安徽', value: 25 },
        { name: '山东', value: 321 },
        { name: '江苏', value: 9584 },
        { name: '江西', value: 1752 },
        { name: '湖北', value: 14586 },
        { name: '广西', value: 9182 },
        { name: '甘肃', value: 10581 },
        { name: '内蒙古', value: 3584 },
        { name: '陕西', value: 20548 },
        { name: '吉林', value: 4168 },
        { name: '青海', value: 6528 },
        { name: '河北', value: 9586 },
        { name: '天津', value: 252 },
        { name: '上海', value: 158 },
        { name: '云南', value: 358 },
        { name: '辽宁', value: 749 },
        { name: '黑龙江', value: 845 },
        { name: '四川', value: 5261 },
        { name: '宁夏', value: 4258 },
        { name: '海南', value: 545 },
        { name: '台湾', value: 1956 },
        { name: '香港', value: 11584 },
        { name: '澳门', value: 16258 },
        { name: '南海诸岛', value: 0 }
      ],
      dataProvince: [
        { name: '南平市', value: 254 },
        { name: '三明市', value: 954 },
        { name: '福州市', value: 2954 },
        { name: '泉州市', value: 624 },
        { name: '龙岩市', value: 794 },
        { name: '漳州市', value: 1054 },
        { name: '莆田市', value: 1366 },
        { name: '宁德市', value: 1857 },
        { name: '厦门市', value: 2215 }
      ],
      dataCounty: [
        { name: '金山街道', value: 5000 },
        { name: '凤岗街道', value: 10000 },
        { name: '建平街道', value: 15000 },
        { name: '洪湾街道', value: 20000 },
        { name: '浦上大道', value: 30000 }
      ],
      geoCoordMap: [
        { 'name': '泉州', 'value': [118.58, 24.93, 20000] },
        { 'name': '福州', 'value': [119.25, 26.04, 10000] }
      ],
      provinces: ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'],
      provincesText: ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门']
    }
  },
  watch: {
    chartCountry(newValue, oldValue) {
      this.chartCountry.on('click', (params) => {
        const curName = params.name
        for (let i = 0;i < this.provincesText.length;i++) {
          if (curName === this.provincesText[i]) {
            // 显示对应省份的方法
            this.initProvince(this.provinces[i], this.provincesText[i])
            break
          }
        }
      })
    },
    chartProvince(newValue, oldValue) {
      this.chartProvince.on('click', (params) => {
        const curName = params.name
        for (const index in this.jsonMap) {
          if (curName === index) {
            // 显示对应市级的方法
            this.initCity(index, curName)
            break
          }
        }
        // this.initCity(this.provinceName, curName)
      })
    },
    chartCity(newValue, oldValue) {
      this.chartCity.on('click', (params) => {
        const curName = params.name
        // for (const index in this.jsonMap) {
        if (curName === '仓山区') {
          // 显示对应省份的方法
          this.initCounty(this.provinceName, curName)
        }
        // }
        // this.initCounty(this.provinceName, curName)
      })
    }
  },
  mounted() {
    this.initCountry()
  },
  methods: {
    initCountry() {
      for (const index in this.jsonMap) {
        echarts.registerMap(index, this.jsonMap[index])
      }
      this.chartCountry = echarts.init(this.$refs.mapCountry)
      this.setOptions(this.chartCountry, this.dataCountry, 'china')
    },
    initProvince(pName, Chinese_) {
      this.provinceName = pName
      require('@/assets/provinceMap/' + pName + '.js')
      this.chartProvince = echarts.init(this.$refs.mapProvince)
      this.setOptions(this.chartProvince, this.dataProvince, Chinese_)
    },
    initCity(pName, cName) {
      this.chartCity = echarts.init(this.$refs.mapCity)
      this.setOptions(this.chartCity, [], cName)
    },
    initCounty(pName, cName) {
      this.chartCounty = echarts.init(this.$refs.mapCounty)
      this.setOptions(this.chartCounty, this.dataCounty, cName)
    },
    setOptions(chartName, dataArray, areaName) {
      chartName.setOption({
        backgroundColor: '#404a59', // 背景颜色
        title: {
          text: `${areaName}数据分布`,
          // subtext: '数据来源真实统计',
          // sublink: '',
          x: 'center'
        },
        legend: { // 图例组件
          orient: 'vertical',
          y: 'bottom',
          x: 'right',
          // data: ['个'],
          textStyle: {
            color: '#fff'
          }
        },
        // visualMap: { // 设置地图范围值显示的颜色
        //   min: 0,
        //   max: 30000,
        //   show: true,
        //   splitNumber: 5,
        //   inRange: {
        //     color: ['#74DFB2', '#81D3F8', '#768FDE', '#FACD91', '#e9969f']
        //   },
        //   textStyle: {
        //     color: '#fff'
        //   }
        // },
        // 提示框，鼠标移入
        tooltip: {
          show: true, // 鼠标移入是否触发数据
          trigger: 'item', // 触发方式
          formatter: (val) => {
            if (val.value[2]) {
              return val.name + '-' + val.value[2] + '个'
            } else {
              return val.name + '-' + val.value + '个'
            }
          }
        },
        geo: {
          map: areaName,
          // label: {
          //   show: true
          // },
          regions: [ // 对不同的区块进行着色
            {
              name: '福建',
              itemStyle: {
                areaColor: '#ff33cc'
              }
            },
            {
              name: '福州市',
              itemStyle: {
                areaColor: '#2b97df'
              }
            },
            {
              name: '仓山区',
              itemStyle: {
                areaColor: '#05f37a'
              }
            },
            {
              name: '凤岗街道',
              itemStyle: {
                areaColor: '#33ffcc'
              }
            }
          ]
        },
        series: [
          // {
          //   type: 'map',
          //   mapType: areaName,
          //   label: {
          //     show: true
          //   },
          //   data: dataArray
          // },
          {
            name: 'Top',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: this.geoCoordMap,
            symbolSize: function(val) {
              return val[2] / 1000
            },
            itemStyle: {
              color: '#050df3'
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.back-btn {
  display: block;
}
.map-main {
  height: 400px;
  width: 600px;
  display: inline-block;
}
</style>

实现下钻到下一级地图的功能，县级地图为手动绘制引入，可参考geojson.io的工具，文中注释部分为另外一种功能实现，可自行研究
提供资源下载，需要的可去自行下载