vue.js - vue ECharts 数据跟新问题。延迟一部。

问题描述

问 题

mounted () {
  this.HomePageDisplay();
  this.formTime();
  this.formTimeitem();
},
methods: {
  //表格时间的编写
  formTime(){
    var earliestSDate = new Date();
    earliestSDate = earliestSDate.getTime() - 1000 * 60 * 60 * 12;
    this.earliestS = fun.formatDate(new Date(earliestSDate), "yyyy-MM-dd-hh");
    console.log(this.earliestS);
    var latestSDate = new Date();
    this.latestS = fun.formatDate(new Date(latestSDate), "yyyy-MM-dd-hh");
    console.log(this.latestS)
  },
  //传送一组数据给表格子组件
  formTimeitem(){
    api.PriceChangeNameHoursShow({
      nameid: this.nameidS,
      earliest: this.earliestS,
      latest: this.latestS,
    }).then(
      res => {
        this.itemChart = res.data.result;
        for (var i = 0; i < this.itemChart.length; i++) {
          this.itemPrice.push(this.itemChart[i].latestPrice);
        }
      },
      err => {
        $.toast(err);
      }
    )
  },
  //点击 传入ID / 根据ID 在传入一组数据给表格传数据。
  passTheDataToTheForm(value){
    this.nameidS = value;
    //然后接口找数据
    api.PriceChangeNameHoursShow({
      nameid: this.nameidS,
      earliest: this.earliestS,
      latest: this.latestS,
    }).then(
      res => {
        this.itemPrice = [];
        this.itemChart = res.data.result;
        for (var i = 0; i < this.itemChart.length; i++) {
          this.itemPrice.push(this.itemChart[i].latestPrice);
        }
      },
      err => {
        $.toast(err);
      }
    )
  },

ECharts 是一个v-for 里面的一个子组件。。

上面的代码是 页面进入获取一次数据。。 没有问题。
但是当点击 执行 passTheDataToTheForm 这个函数后。 子组件的数据就延迟一步/

下面是我点击的时候 在再父组件和子组件同时打印传送的值。

子组件里面的数据慢了一步。。

https://jsfiddle.net/haky9jL7/ 这个是子组件的代码。。 就是Echart的表格。

是不是需要用异步。 但是Echart 的实例的异步 我放上也没有用。
http://echarts.baidu.com/gall...
这个地址是Echart 官方的异步列子///

还有formTimeitem 这个函数。刷新页面的时候。刷新10次。/ 有几次表格出不来。。。

求指定 指定。

解决方案

watch:{
  itemsPrice:function () {
      this.showChart();
  }
},

当子组件接收过来的值 产生变化的时候。 重新执行一次表格。

这篇关于vue.js - vue ECharts 数据跟新问题。延迟一部。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！