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}
     */
    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();
  },
};