Set the background image of the echarts chart, and the background image will not move as the chart scales.

Rendering:

Code:

mapCard component

<template>
    <card :row="25" :rowEnd="48" :col="33" :colEnd="42" title="矿产数据统计区域">
        <template v-slot:conbox>
            <div ref="echarts" class="echarts-class">
                <div v-if="dataFlag==false" class="data-null">暂无数据</div>
            </div>
            <img class="echarts-img" src="../../../public/images/Map/yuan_bj.png">
        </template>               
    </card>
</template>

<style lang="stylus" scoped>
.echarts-class
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    
    // z-index 999
.echarts-img
    width 83%
    // width: 99%
    // height: 99%
    // background-image: url('../../../public/images/Map/yuan_bj.png')
    // background-size: 83% 83% 
    // background-repeat: no-repeat
    // background-position: 50% 76%
    // position: absolute
    // top: 1%
</style>

Set the style at the outermost div bounding box component:

<div class="bigscreen-main" :key="key">
     <map-card></map-card>
</div>

!! Focus on setting the alignment. The outer style class of the echart display box is .gm-card .con-box

<style lang="stylus">
    .bigscreen-main
        .gm-card .con-box
            align-items center
            justify-content center
</style>

Note taking.