Vue（十八）：echarts地图省市区联动

效果

数据来源

https://datav.aliyun.com/portal/school/atlas/area_selector

接口请求地址

https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full

源码

样式

.map {
    
    
  width: 1000px;
  height: 700px;
}

布局

<template>
  <div class="map">
    <button @click="backMap">返回</button>
    <v-chart :option="option" theme="dark" autoresize @click="nextMap" />
  </div>
</template>

脚本

import axios from 'axios';
import VChart from 'vue-echarts';
import {
    
     registerMap, use } from 'echarts/core';
import {
    
     MapChart } from 'echarts/charts';
import {
    
     CanvasRenderer } from 'echarts/renderers';

export default {
    
    
  name: 'Map',
  components: {
    
    
    VChart,
  },
  data() {
    
    
    use([CanvasRenderer, MapChart]);
    return {
    
    
      geoJson: null,
      geoPath: [],
      option: null,
    };
  },
  methods: {
    
    
    /**
     * 地图配置
     * @param mapName
     * @returns option
     */
    setMapOption(mapName) {
    
    
      return {
    
    
        backgroundColor: 'transparent',
        series: [
          {
    
    
            type: 'map',
            map: mapName,
            zoom: 1,
            roam: true, // true 'scale' 或者 'move'
            zlevel: 10,
            show: true,
            layoutCenter: ['50%', '50%'],
            layoutSize: '100%',
            label: {
    
    
              show: true,
              color: '#409EFF',
            },
            itemStyle: {
    
    
              areaColor: 'rgba(0, 0, 0, .6)',
              borderColor: '#409EFF',
            },
            select: {
    
    
              label: {
    
    
                show: true,
                color: '#ffffff',
              },
              itemStyle: {
    
    
                areaColor: 'rgba(64, 158, 255, .6)',
                borderColor: '#0048ff',
                shadowColor: '#409EFF',
                shadowBlur: 10,
              },
            },
            emphasis: {
    
    
              label: {
    
    
                show: true,
                color: '#ffffff',
              },
              itemStyle: {
    
    
                areaColor: 'rgba(64, 158, 255, .6)',
                borderColor: '#0048ff',
                shadowColor: '#409EFF',
                shadowBlur: 10,
              },
            },
          },
        ],
      };
    },
    /**
     * 生成地图
     * @param code 地图code
     * @returns {Promise<void>}
     */
    async mapGenerator(code = '100000') {
    
    
      if (code === this.geoPath[this.geoPath.length - 1]) return;

      const {
    
     data } = await axios.get(`/areas_v3/bound/geojson?code=${
      
      code}`);
      this.geoJson = data;
      this.geoPath.push(code);
      const mapName =
        ['100000', '100000_full'].indexOf(code) !== -1 ? 'china' : code;
      registerMap(mapName, data);
      this.option = this.setMapOption(mapName);
    },
    /**
     * 前往下一层地图
     * @param data
     */
    nextMap(data) {
    
    
      const {
    
     adcode, childrenNum } = this.geoJson.features.find(
        (d) => d.properties.name === data.name
      ).properties;
      this.mapGenerator(`${
      
      adcode}${
      
      childrenNum === 0 ? '' : '_full'}`);
    },
    /**
     * 返回上一层地图
     */
    backMap() {
    
    
      if (this.geoPath.length === 1) return;
      this.geoPath.pop();
      this.mapGenerator(this.geoPath.pop());
    },
  },
  created() {
    
    
    this.mapGenerator();
  },
};