Vue传数据到ECharts时，数据响应式更新了，但地图没渲染？？？

说白了还是把自己绕迷了，在这里记录一下，也希望同时能对看到这篇文章的朋友有所帮助，祝大家技术越来越牛批！！！

---

进入正题

首先是父组件中，数据请求代码（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));

接着是子组件中接收值的代码：

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}<br/>现有疫情{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();
  },
},

成功了！！！
后来我又加上了加载动画覆盖层，调整了下数据，这个地图就完美了

完结撒花！！

还是要多积累经验，有时候学到手里不一定真的是自己的，得碰个壁，然后记忆加深，以后再触碰到这个伤疤时，你一下就能记得当时的痛和解决方案！！！