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

末蓝、 2024-03-22 22:45 29阅读 0赞

### 效果 ###

![在这里插入图片描述][eceed75423a341a8be730e21e9ddc9b3.gif_pic_center]

### 数据来源 ###

> [https://datav.aliyun.com/portal/school/atlas/area\_selector][https_datav.aliyun.com_portal_school_atlas_area_selector]

### 接口请求地址 ###

> [https://geo.datav.aliyun.com/areas\_v3/bound/geojson?code=100000\_full][https_geo.datav.aliyun.com_areas_v3_bound_geojson_code_100000_full]

### 源码 ###

#### 样式 ####

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

#### 布局 ####

#### 脚本 ####

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

[eceed75423a341a8be730e21e9ddc9b3.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/9c2426923f3f4e37adc9ba241263b4a2.png
[https_datav.aliyun.com_portal_school_atlas_area_selector]: https://datav.aliyun.com/portal/school/atlas/area_selector
[https_geo.datav.aliyun.com_areas_v3_bound_geojson_code_100000_full]: https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full