this.$nextTick()关于在vue中使用Echarts初始化获取Dom失败的原因分析

分析思路：

1.getElementById（） 通过id获取dom，id名称正确

2.div内给dom设置来足够的width和height，故不存在dom获取不到宽高的原因

3.console.log （chartDom）成功

4在mounted周期内引入来initcharts这个方法

5.但在getElementById（）之前打印数据为undefined，所以页面其实没有获取到dom

6.我猜测dom是通过异步获取到的，而mounted钩子函数只执行一次。在执行时，数据还没有传过来，所以加载dom失败。

解决方法：

this.$nextTick方法相当于延时函数，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数。

mounted() {
    let url = "./data/json/echarts_4.json";
    this.$Api.getData_get(url).then((res) => {
      if (res.data.length == 0) return;
      this.$nextTick(() => {// dom元素更新后执行，因此这里能正确打印更改之后的值  
        this.pt1data = res.data[0];
        this.pt2data = res.data[1];
        this.pt6data = res.data[2];
        this.initcharts_pt1();
        this.initcharts_pt2();
        this.initcharts_pt3();
        this.initcharts_pt4();
        this.initcharts_pt5();
        this.initcharts_pt6();
    });
});
}，

GET：

vue是异步更新的，故当函数执行和数据传递存在时间差时，可以使用nextTick函数来延迟调用。