说白了还是把自己绕迷了，在这里记录一下，也希望同时能对看到这篇文章的朋友有所帮助，祝大家技术越来越牛批！！！
进入正题
首先是父组件中，数据请求代码（axios的封装文件就不在此赘述了，本文的问题与axios没什么关系）
// 全国各省各市疫情数据请求
this.$axios
.post("/wapicovid19/all.php", {
key: "123",
})
.then((res) => {
// console.log(res.data.retdata);
for (let i = 0, len = res.data.retdata.length;
i < len;
i++) {
this.province.push({
name: res.data.retdata[i].xArea,
value: res.data.retdata[i].curConfirm,
});
}
})
// 其实这里最开始我还加了一层then。。。
// 等待上边返回的数据到位了再重新更新数据（想想刚刚错误的时候，自己真是个**）
// 其实没必要，Vue的大多数数据都是响应式的
.catch((err) => console.error(err));
【Vue传数据到ECharts时，数据响应式更新了，但地图没渲染（？？）】接着是子组件中接收值的代码：
import chinaMap from "../utils/echarts-china";
export default {
name: "covid-domestic",
data() {
return {
mapName: "",
};
},
props: {
propProvince: {
type: Array,
default: [],
},
},
// 模板渲染完毕先初始化地图
mounted() {
this.mapName = new chinaMap(document.getElementById("map"), this.propProvince);
this.mapName.generateMap();
},
};
为了能够看懂子组件中的代码，我把封装的echarts文件贴在下边（封装成了一个构造函数的形式）：
import echarts from 'echarts';
// echarts是4.9.0版本的
import '../../node_modules/echarts/map/js/china.js';
class chinaMap {
// dom参数不说了，这个data参数是通过接口数据动态传入的
constructor(Dom, data) {
this.option = {
tooltip: {
trigger: 'item',
formatter: '{b}
现有疫情{c}例'
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: { 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
},
data: data,
}
]
}
this.dom = Dom;
}
// 生成地图（初始化 + 配置选项）
generateMap() {
echarts.init(this.dom).setOption(this.option);
}
}export default chinaMap;
于是乎就出现了下边的一幕（数据的确动态更新了，但是地图仍是白板）：
文章图片
与此同时我几乎试遍了各种办法（都是绕路而行），什么更新数据啊，async/await啊，等等等等，差点嗓子眼里冒屁。。。
然后我就自言自语的在叙述这个逻辑：“嗯...我需要监听一下props的数据更新，嗯...怎么监听...监听...监听，监听！？”
哦草！！！用watch啊，监听数据的变化，被监听的数据更新时就会启动机关！！！
在子组件中加上了监听的代码：
watch: {
propProvince() {
this.mapName = new chinaMap(document.getElementById("map"), this.propProvince);
this.mapName.generateMap();
this.mapName.eHideLoading();
},
},成功了！！！
后来我又加上了加载动画覆盖层，调整了下数据，这个地图就完美了
文章图片
文章图片
完结撒花！！
还是要多积累经验，有时候学到手里不一定真的是自己的，得碰个壁，然后记忆加深，以后再触碰到这个伤疤时，你一下就能记得当时的痛和解决方案！！！
