vue.js - Apexchats.js axios 给了我未定义的 Vue

Question

我正在尝试使用vueand从服务器获取数据apexcharts，但即使在我用 调用数据之后axios，它也给了我undefined..

我错过了什么？

模板

<apexchart
  ref="chart1"
  width="100%"
  :options="chartOptions" :series="series">
</apexchart>

来自 url 的数据

{
    "pageviews": 1313,
    "new_users": 1014
}

脚本

export default {
    data: function () {
        return {
            series: [],
            chartOptions: {
             chart: {
               type: 'donut',
             }, 
            colors: ['#01cd49', '#007568'],
            labels: ['new', 're'],
            
        }
    },
    created: function () {
        this.getByVisitor()
    },
    methods: {
     getByVisitor() {
      const url = 'url';
      axios
        .get(url)
        .then(response => {
          this.$refs.chart1.updateSeries([{
            name: 'Sales',
            data: response.data
          }])
        })
        .catch(error => (this.byVisitor = error.data));
        console.log(`---------------this.$refs.chart1`, this.$refs.chart1);
    },
}

标签： vue.jsaxiosapexcharts

Answer 1

请参阅更新 Vue 图表数据

无需直接调用updateSeries()图表组件上的方法，因为它能够对series. 您所要做的就是更新您的series数据属性

export default {
  data: () => ({
    series: [], //  start with an empty array here
    byVisitor: null, //  you seem to have missed this one for your error data
    chartOptions: {
      chart: {
        type: 'donut',
      },
      colors: ['#01cd49', '#007568'],
      labels: ['new', 're'],
    }
  }),
  created: function() {
    this.getByVisitor()
  },
  methods: {
    async getByVisitor() {
      const url = 'url';
      try {
        const { data } = await axios.get(url)
    
        // now update "series"
        this.series = [{
          name: "Sales",
          data
        }]
      } catch (error) {
        this.byVisitor = error.data
      }
    },
  }
}