echarts地图贴图

想要实现地图贴图，看官方文档image属性：支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串。我以为跟之前一样的写法，现在页面创建一个img标签，再在image属性引入就可以了

<img id="xx" v-show="0" src="@/assets/images/large/xx.png" />

....
{
            map: this.mapName, // 第2层
            roam: false,
            zoom: 1.1,
            center: this.mapData[this.mapName].center,
            aspectScale: 1,
            itemStyle: {
              normal: {
                areaColor: {
                  image: document.getElementById('xx'), // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                  repeat: "repeat", // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                },
                color: "rgb(31,37,119)",
                borderColor: "#1865E1",
                borderWidth: 0,
              },
            },
....

结果首次不加载出来，要对地图做些事件例如下钻，就出来了，就很郁闷哪里出错了

 然后搜了搜解决办法，才发现是我写错了，图片正确的引入方法是import

import dot from '@/assets/images/large/xx.png'

...

itemStyle: {
              normal: {
                areaColor: {
                  image: dot, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                  repeat: "repeat", // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                },
                color: "rgb(31,37,119)",
                borderColor: "#1865E1",
                borderWidth: 0,
              },
            },
.....

问题解决了

注意：我的原图只是一条斜线，所以平铺显示的；如果不是需要平铺的图片，大小需要能够渲染充满整个地图容器，没有可以设置大小的属性。

/// 又写一个项目，地图贴图首次没加载出来，在原来引入图片import处又换种写法，如：

let mapBg = new Image()

mapBg.src = require('@/assets/images/screenImg/map_bg.png')