本文主要是介绍Echart 地图 背景 图片契合，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
原理：在一个大div下放两个，一个是Echart代码地图，一个是背景图片，然后将代码地图设置为透明，设置两个子元素的定位吻合就行，没啥含量，以前只是放了个图片和思路，没有具体代码，现补一下。
需求是点击一个城市执行那个城市的代码
- html代码，有些参数我没有特别注明，因为无关紧要，自己从实际情况出发。
<!-- 中国地图 -->
<div class="chinaMap" ref="chmap" :style="{'transform':(xianshi ? 'scale(1)' :'scale(0)')} " @touchstart="touchstart($event)" @touchmove="touchmove($event)" @touchend="touchend($event)"><div class="EchartsMap" ref="myEchart"></div> <!-- Echart地图 --><van-image class="imagesMap" width="95%" :src="require('./china.png')" loading="loading" error="error"/> <!-- 地图图片 -->
</div>
- css样式（因历史遗留问题，脚本在最下面）
.chinaMap {width: 100vw;height: 100vw;position: absolute;top: 32.5vh;opacity: 1;animation:chinaMapAN .8s infinite;animation-iteration-count: 1;background: rgba(0, 0, 0, 0);.EchartsMap {width:100vw;height:100vw;position: absolute;left: 2vw;top:0;z-index:2;}.imagesMap {position: absolute;left: 2vw;top:0;z-index:1;}.addArea{position: absolute;z-index: 4;}}@keyframes chinaMapAN{0% {opacity:0;}100% {opacity:1;}}
- 注释图片后的效果
- 注释echart地图后的效果
- 最终效果图（因时间间隔久远，我把原图和效果图都留下来了）
地图缩放与移动事件：https://blog.csdn.net/rRainyevening/article/details/107196809
这篇关于Echart 地图 背景 图片契合的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
