关于vue.js: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();
  },
},

胜利了！！！
起初我又加上了加载动画覆盖层，调整了下数据，这个地图就完满了

完结撒花！！

还是要多积攒教训，有时候学到手里不肯定真的是本人的，得碰个壁，而后记忆加深，当前再触碰到这个伤疤时，你一下就能记得过后的痛和解决方案！！！