利用 ECharts 地图：实现纹理和图像的效果（上海json）

注:shanghaiGeoJSON 换为你需要的区域json

<template>
  <div ref="mapContainer" style="width: 100%; height: 500px"></div>
</template>

import * as echarts from 'echarts';
import shanghaiGeoJSON from '@/assets/json/shanghai.json';
import mapRight from '@/assets/img/OIP.jpg';
import mapTexture from '@/assets/img/OIP.jpg';
import pudongTexture from '@/assets/img/OIP1.jpg';

initMap() {
      // 注册地图数据
      echarts.registerMap('shanghai', shanghaiGeoJSON);

      // 初始化ECharts实例
      const myChart = echarts.init(this.$refs.mapContainer);

      // 配置ECharts选项
      myChart.setOption({
        series: [
          {
            name: '数据',
            type: 'map',
            // silent: true, // 图形不响应和触发鼠标事件
            mapType: 'shanghai',
            itemStyle: {
              normal: {
                borderColor: '#88a4bc', // 区域边框颜色
                areaColor: {
                  image: mapTexture, // 使用默认图片作为地图纹路
                  repeat: 'repeat', // 图片平铺
                },
              },
              emphasis: {
                z: -1,
                areaColor: 'rgba(12, 40, 80, 0.1)', // 区域鼠标悬浮颜色，半透明
              },
            },
            data: [
              {
                name: '浦东新区',
                itemStyle: {
                  normal: {
                    areaColor: {
                      image: pudongTexture, // 为浦东新区设置特定的纹理图片
                      repeat: 'repeat',
                    },
                  },
                },
              },
            ],
            label: {
              show: false,
              emphasis: {
                // 当鼠标悬浮时显示
                show: false,
                color: '#fff',
              },
            },
          },
        ],
        graphic: {
          type: 'image',
          right: '20%',
          bottom: '12%',
          z: -10,
          style: {
            image: mapRight,
            width: 132,
            height: 139,
          },
        },
      });
    },

效果图：