echarts 地图 使用html节点来作为地图纹理，但每次进入页面，都无法正确显示

要使用 HTML 节点作为 echarts 地图的纹理，可以使用 echarts 中的 image 和 SVG 标签。但是，因为 HTML 节点的加载速度较慢，可能会导致每次进入页面都无法正确显示。

为了解决这个问题，可以使用 echarts 的 loading 动画来占位，等到 HTML 节点加载完成后再显示地图。下面是一个简单的例子：

option = {
    tooltip: {},
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true
        },
        itemStyle: {
            normal: {
                borderColor: '#fff',
                borderWidth: 1,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10
            },
            emphasis: {
                areaColor: '#f00'
            }
        },
        data: [{
            name: '北京',
            value: 100
        }, {
            name: '上海',
            value: 50
        }, {
            name: '广州',
            value: 80
        }, {
            name: '深圳',
            value: 60
        }, {
            name: '重庆',
            value: 70
        }],
        z: 1
    }, {
        type: 'image',
        z: 0,
        bounding: 'raw',
        origin: [75, 10],
        style: {
            image: 'https://www.echartsjs.com/examples/data/thumb-map.png'
        }
    }]
};

// 使用 loading 动画占位
myChart.showLoading();

// 监听 image 标签的 load 事件，加载完成后隐藏 loading 动画
var img = new Image();
img.onload = function() {
    myChart.hideLoading();
};
img.src = 'https://www.echartsjs.com/examples/data/thumb-map.png';

在上面的例子中，使用了一个 image 标签来作为地图的纹理，同时使用了 loading 动画占位。在代码的最后，监听 image 标签的 load 事件，等到加载完成后再隐藏 loading 动画。

你也可以根据自己的需求调整 loading 动画的样式和位置，比如设置文字提示、加载图标等。