Echarts中geo配置项配置地图的背景图异常，如何解决？

Question

Echarts中geo配置项配置地图的背景图，背景图显示异常
背景图：

当前效果：

代码截图：

Answer 1

在你的配置项中，areaColor 的配置有误。areaColor 该配置项并不支持 image 属性来设置背景图，而是用来设置地图区域的颜色。要配置地图的背景图，需要使用 backgroundColor 选项。

所以尝试修正了一下你的代码：

function showMap(dataCountArr) {
  let bgImg = document.createElement('img');
  bgImg.src = '../images/组 2373.png';
  bgImg.style.width = bgImg.style.height = '100%';
  console.log("bgImg", bgImg);

  let midMychart1 = echarts.init(document.getElementById('midMychart1'));
  let tagImg = '../images/tag.png';
  let mapDate = [];

  let midMyChart1Option = {
    series: [],
    geo: [
      {
        map: 'bynr',
        show: true,
        geoIndex: -1,
        zlevel: -1,
        aspectscale: 0.76,
        top: "22%",
        left: "9%",
        layoutCenter: ['50%', '50%'],
        layoutSize: 760,
        zoom: 1,
        roam: false,
        itemStyle: {
          normal: {
            areaColor: '#99B3E2',
            borderWidth: 1,
            borderColor: '#99B3E2',
            shadowColor: '#000',
            shadowBlur: 1,
          }
        }
      }
    ],
    backgroundColor: {
      image: bgImg
    },
  };

  midMychart1.setOption(midMyChart1Option);
}

希望这样可以解决你的问题并正确设置地图的背景图。