【vue】echarts地图添加蒙版图片，多图层地图实现天气信息展示

 实现原理：多层图层叠加实现复杂的信息展示。

<template><div class="wrapper"><el-drawertitle="天气信息":modal="iszz":visible.sync="weatherinfo":direction="direction"><drawer:labelname="labelname":coordinates="coordinates":selectcityid="selectcityid":pdate="pdate":radio="radio"></drawer></el-drawer><div style="background-image: url(/img/map/bjditu.jpg); height: 100%">
<!--    <div style="background: white; height: 100%">--><div><el-radio-group v-model="radio" style="margin: 30px 100px;" ref="radio" @input="changeRadio"><el-radio :label="3" border style="color: white;">国内气象源</el-radio><el-radio :label="6" border style="color: white;">国外气象源</el-radio><el-radio :label="9" border style="color: white;">城市气象院</el-radio></el-radio-group></div><div ref="myEchart" :style="{width: '100%', height: height}"></div><imgref="mapSvg"id="mapSvg"v-show="false"style="width: 500px; height: 100%"src="/img/map/wl.png"alt=""/></div><divclass="time-slide"@mouseenter="changeActive($event)"@mouseleave="removeActive($event)"><el-sliderv-model="timepid":step="1":min="1":max="96":marks="marks":show-stops="true"@change="valueChange":format-tooltip="formatToolTip"></el-slider></div></div>
</template>

资源包：点这里