如何从 REST GET 获取图表数据以显示在此 vue 组件的初始化期间？

Question

我修改了一个来自 https://github.com/apexcharts/vue3-apexcharts

的 apexcharts Vue 组件 BarChart.vue

我想通过使用 REST GET API 检索图表数据并将数据插入 series。

该组件的脚本部分如下；

<script>
/* eslint-disable */

export default {
  name: "BarExample",
  data: dataInitialisation,
  methods: {
    updateChart,
  },
};

async function makeGetRequest(url) {
  const axios = require("axios");
  //let res = await axios.get("http://localhost:8080/vue3-apexcharts/data.json");
  let res = await axios.get(url);

  return res.data;
}

function dataInitialisation() {
  let init_data = {
    chartOptions: {
      chart: {
        type: "bar",
        stacked: true,
        animations: {
          enabled: true, //disabling will speed up loading
        },
      },
    },
    series: {},
  };

  var url = "http://localhost:8080/vue3-apexcharts/data.json";
  const axios = require("axios");

  var data;

  makeGetRequest(url).then( 
                        (data) => 
                        {
                            console.log(JSON.stringify(data));
                            init_data.series = data;
                        }
                     );

  return init_data;
}

我通过使用 console.log().

打印数据来验证从 REST GET 获取数据的代码没有任何问题

我做了一些研究，看来我需要使用 mounted() 来让数据显示在图表上。如果这是正确的，我该如何修改代码以使用 mounted() 来做到这一点？

我正在使用 vue 3.

Answer 1

两件事。

切勿在 Vue 组件内的 Vue api 之外定义函数和逻辑。 data 中定义的内容应在 data 中定义，您将遇到的每个文档都以相同的方式进行定义。 Data Properties and Methods.

回答你的问题是的，你需要一个生命周期钩子来在组件安装时从 api 获取数据，你可以在这个 article

中阅读更多关于生命周期钩子的信息

// From this line until the end just delete everything.
// Define `methods` and `data` where they belong.
function dataInitialisation() {
  let init_data = {
    chartOptions: {

这是一个重构的例子：

<script>
import axios from 'axios'

export default {
  name: 'BarExample',
  data() {
    return {
      url: 'http://localhost:8080/vue3-apexcharts/data.json',
      chartOptions: {
        chart: {
          type: 'bar',
          stacked: true,
          animations: {
            enabled: true
          }
        }
      },
      series: {}
    }
  },
  async mounted() {
    await this.makeGetRequest()
  },
  methods: {
    updateChart, // Where is this method defined?
    async makeGetRequest() {
      const { data } = await axios.get(this.url)
      this.series = data
    }
  }
}
</script>

Answer 2

我会回答我自己的问题。答案的关键来自 vue-apexcharts 库中可用的挂载事件。

https://apexcharts.com/docs/options/chart/events/

我在这里使用这篇文章作为如何在 vue3-apexcharts 中使用事件的指南。

https://kim-jangwook.medium.com/how-to-use-events-on-vue3-apexcharts-2d76928f4abc

<template>
  <div class="example">
    <apexchart
      width="500"
      height="350"
      type="bar"
      :options="chartOptions"
      :series="series"
      @mounted="mounted"
    ></apexchart>
  </div>
</template>

<script>
async function makeGetRequest(url) {
  const axios = require("axios");
  //let res = await axios.get("http://localhost:8080/vue3-apexcharts/data.json");
  let res = await axios.get(url);

  return res.data;
}

export default {
  name: "BarExample",
  data: dataInitialisation,
  methods: {
    updateChart,
    mounted: function(event, chartContext, config) {        
        console.log("mount event");
        var url = "http://localhost:8080/vue3-apexcharts/data.json";
        const axios = require("axios");

        var data;

        makeGetRequest(url).then((data) => {              
          this.series = data;
        });
    },
  },
};
</script>

如何从 REST GET 获取图表数据以显示在此 vue 组件的初始化期间？

How to get chart data from REST GET to appear during initialisation for this vue component?

javascript

vue.js

apexcharts

vuejs3

这是一个重构的例子：