Modifiqué un componente BarChart.vue de apexcharts Vue que es de https://github.com/apexcharts/vue3-apexcharts
Quiero recuperar datos de gráficos consumiendo una API REST GET e insertando datos en series .
La parte del script de este componente es la siguiente;
<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; } Verifiqué que no hay nada malo con el código para obtener los datos de REST GET al imprimir los datos usando console.log() .
Investigué un poco y parece que necesito usar mounted() para que los datos aparezcan en el gráfico. Si esto es correcto, ¿cómo modifico el código para usar mounted() para hacerlo?
Estoy usando vue 3.
Un par de cosas.
Nunca defina funciones y lógica fuera de la API de Vue dentro de un componente de Vue. Lo que se define en data , debe definirse en data cada documento que encuentre lo hace de la misma manera. Propiedades y métodos de los datos .
Respondiendo a su pregunta, sí, necesita un enlace de ciclo de vida para obtener los datos de la API cuando se monta el componente. Puede leer más sobre los enlaces de ciclo de vida en este artículo .
// 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>Responderé a mi propia pregunta. La clave de la respuesta proviene del evento montado disponible en la biblioteca vue-apexcharts.
https://apexcharts.com/docs/options/chart/events/
Usé este artículo aquí como una guía sobre cómo usar eventos en 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>