echarts 地图增加背景图

新建一个img，背景图路径给src：

 let img = document.createElement('img')
      img.src = require('@/assets/img/chongqing.png')

在geo的 itemStyle 里面的 areaColor 配置，以及emphasis里面写入：

 itemStyle: {
            borderColor: "rgba(63, 218, 255, 0)",  // 边界颜色
            areaColor: {
              image: img,  // 背景图
              repeat: 'no-repeat', // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
            }, // 区域颜色
// 鼠标移入时
emphasis: {
              areaColor: {
                image: img,
                repeat: `repeat-x` // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
              },
            }

未免图片还没有加载完成报错，给图片添加onload：再setOption

 img.onload = () => {
        chongqingChart.setOption(option)
      }

最后实现效果：

背景图是我在网上随便截的一个图，框出的这个区域是从阿里云下载的json文件。具体查看：

echarts地图自定义点样式，缩放计算 点聚合，自定义图例icon_甲乙 ^-^的博客-CSDN博客