Vue向ECharts传输数据时，数据响应更新，但地图没有渲染？？？

说白了，我还是迷失了自己，所以就记录在这里，希望对同时阅读本文的朋友有所帮助。祝大家技术越来越好！！！进入正题，首先是父组件中的数据请求代码（axios的封装文件这里不再赘述，本文问题与axios无关）//各省疫情数据请求和全国各地的城市this.$axios.post("/wapicovid19/all.php",{key:"123",}).then((res)=>{//console.log(res.data.retdata);for(leti=0,len=res.data.retdata.length;iconsole.error(err));接着是子组件中接收值的代码：importchinaMapfrom"../utils/echarts-china";exportdefault{name:"covid-domestic",data(){return{mapName:"",};},props:{propProvince:{type:Array,default:[],},},//模板渲染后初始化地图mounted(){this.mapName=newchinaMap(document.getElementById("map"),this.propProvince);this.mapName.generateMap();},};为了能够看懂子组件中的代码，我把封装后的echarts文件贴在下面（封装成构造器形式）：importechartsfrom'echarts';//echarts是4.9.0版本import'../../node_modules/echarts/map/js/china.js';classchinaMap{//dom参数没有提到，这个data参数是通过接口dataconstructor(Dom,data)动态传入的{this.option={tooltip:{trigger:'item',formatter:'{b}
existingepidemic{c}example'},toolbox:{show:true,orient:'vertical',left:'right',top:'center',feature:{数据视图：{readOnly:false},restore:{},saveAsImage:{}}},visualMap:{min:800,max:50000,text:['High','Low'],realtime:false,calculable:true,inRange:{color:['lightskyblue','yellow','orangered']}},series:[{name:'中国疫情地图',type:'map',mapType:'china',label:{show:true},数据:数据,}]}this.dom=Dom;}//生成地图（初始化+配置选项）generateMap(){echarts.init(this.dom).setOption(this.option);}}exportdefaultchinaMap;于是就出现了下面的场景（数据确实是动态更新的，但是地图还是白板）：同时，我几乎尝试了各种方法（都是弯路），什么更新数据？，异步/等待，等等，等等，等等，等等，等等，等等，等等，等等。.拐点！然后我就在自言自语，讲述这个逻辑：“嗯……我需要监控道具的数据更新，嗯……怎么监控……监控……监控，监控！？”妈的！！！使用watch监控数据变化，当监控到的数据有更新时，机制就会被激活！！！在子组件中添加监控代码：watch:{propProvince(){this.mapName=newchinaMap(document.getElementById("map"),this.propProvince);this.mapName.generateMap();this.mapName.eHideLoading();}，}，成功！！！后来加了loading动画叠加，调整了数据，地图就完美了！！你还需要积累更多的经验。有时候当你知道你的手不一定是你自己的时候，你不得不碰壁，然后你的记忆就会加深。等你以后再摸到这个伤疤的时候，你一定能记住当时的痛苦和解决办法！！！