Question

我需要显示顶点图表（Brush Chart）。我正在尝试将API中的数据附加到数组中。我在下面提供了代码以及API数据。

我使用控制台检查数据是否正确地来自API，但没有追加到序列数组中

<div id="app" style="background:white">
  <div id="chart1">
    <apexchart type=line height=230 :options="chartOptionsArea" :series="series" />
  </div>
  <div id="chart2">
    <apexchart type=area height=130 :options="chartOptionsBrush" :series="series" />
  </div>
</div>

下面是我的VUEjs代码

data() {
  return {
    series: [{
      data: this.generateDayWiseTimeSeries(new Date('01 Jan 
        2014 ').getTime(),185, {
        min: 30,
        max: 90
      })
    }],
    chartOptionsArea: {
      chart: {
        id: 'chartArea',
        toolbar: {
          autoSelected: 'pan',
          show: false
        }
      },
      colors: ['#546E7A'],
      stroke: {
        width: 3
      },
      dataLabels: {
        enabled: false
      },
      fill: {
        opacity: 1,
      },
      markers: {
        size: 0
      },
      xaxis: {
        type: 'datetime'
      }
    },
    chartOptionsBrush: {
      chart: {
        id: 'chartBrush',
        brush: {
          target: 'chartArea',
          enabled: true
        },
        selection: {
          enabled: true,
          xaxis: {
            min: new Date('01 Jan 2014').getTime(),
            max: new Date('09 Jan 2014').getTime()
          }
        },
      },
      colors: ['#008FFB'],
      fill: {
        type: 'gradient',
        gradient: {
          opacityFrom: 0.91,
          opacityTo: 0.1,
        }
      },
      xaxis: {
        type: 'datetime',
        tooltip: {
          enabled: false
        }
      },
      yaxis: {
        tickAmount: 2
      }
    }
  }
}

下面是功能

generateDayWiseTimeSeries: function() {
  var i = 0;
  var self = this;
  var series;

  axios
    .get("http://172.31.0.114:5000/api/eco/BNG-JAY-136-001")
    .then(function(res) {
      self.series = res.data; //not working 
    })

  return series;
}

API数据

[
  [
    "2019-5-23",
    0
  ],
  [
    "2019-5-24",
    0
  ],
  [
    "2019-5-25",
    0
  ],
  [
    "2019-5-26",
    0
  ],
  [
    "2019-5-27",
    0
  ],
  [
    "2019-5-28",
    0
  ],
  [
    "2019-5-29",
    0
  ],
  [
    "2019-5-30",
    0
  ],
  [
    "2019-5-31",
    0
  ]
]

Answer 1

generateDayWiseTimeSeries函数返回未定义的变量=>系列。

将返回的数据分配给series而不是self.series。

Answer 2

您可以使用updateSeries方法，也可以直接更新series的值。请检查以下代码

代码段

generateDayWiseTimeSeries: function() {
    var me = this;
    axios.get("data.json")
        .then(function(res) {
            me.series[0].data = res.data;
            //OR you can use updateSeries method

            /* me.$children[0].updateSeries([{
               data: res.data
             }]);*/
        });

    return [];
}

您可以在这里使用fiddle进行检查。

将API数据附加到数组中

2 个答案: