0
270
VistasCargue datos de axios en vue apexcharts
Como título, estoy tratando de cargar datos de Axios en Vue apexcharts (gráfico de líneas) usando vue2. He leído el documento de Apexcharts, pero todavía no puedo entender cómo pasar los datos al gráfico. Me gustaría tener la fecha como eje x y otras como valores en el gráfico de líneas.
Además, revisé vue devtools, ¿parece que los datos se pasan con éxito? 
Mi formato de datos es así:
follower = [ { date: '2021-11-10', follower: 2000, following: 500, media: 150 } { date: '2021-11-11', follower: 2000, following: 500, media: 150 } ]Inicialización de mi gráfico:
<template> <apexchart ref="sample" width="500" type="area" :options="chartOptions" :series="series" > </apexchart> </template> export default { name: "FollowerLineApex", components: { apexcharts: VueApexCharts, }, data: function() { return { series: [{ name: 'test', data: [] }], chartOptions: { chart: { height: 350, type: 'area', }, dataLabels: { enabled: true }, title: { text: 'Example-1', }, xaxis: { type: "datetime" }, } }},
A continuación se muestra mi código en la parte de Axios:
created: function () { this.getData() }, methods: { getData() { this.$axios.get('/api/') .then(res => { this.series = [{ data: res.data["follower"] }] console.log(this.series) this.$refs.sample.updateOptions({ series: [{ data: this.series }] }) }) .catch(err => { console.log(err); }) } },2 Respuestas
Responde la pregunta0
Tus datos no están formateados correctamente. Debe formatear los datos que obtiene de su API antes de pasarlos a la serie de su gráfico. Su gráfico de eje x de datetime y hora debe formatearse como una matriz de coordenadas x, y. Descrito aquí https://apexcharts.com/docs/series/
Ejemplo:
[ { x: 10, y: 20, }, { x: 100, y: 50, }, ]Ejemplo de sandbox de trabajo
https://codesandbox.io/s/vue-basic-example-forked-r26j6?file=/src/components/Chart.component.vue
<template> <div class="app"> <apexcharts width="500" height="350" type="area" :options="chartOptions" :series="series" ></apexcharts> </div> </template> <script> import VueApexCharts from "vue-apexcharts"; export default { name: "Chart", components: { apexcharts: VueApexCharts, }, data: function () { return { follower: [ { date: "2021-11-10", follower: 2000, following: 500, media: 150, }, { date: "2021-11-11", follower: 2000, following: 500, media: 30, }, ], series: [ { name: "test", data: [], }, ], chartOptions: { chart: { height: 350, type: "area", }, dataLabels: { enabled: true, }, title: { text: "Example-1", }, xaxis: { type: "datetime", }, }, }; }, created: function () { this.getData(); }, methods: { getData() { // TODO Axios to get data here. // Format data correctly let formattedData = this.follower.map((e, i) => { return { x: e.date, y: e.media, }; }); // update the series with axios data this.series = [ { name: "test", data: formattedData, }, ]; }, }, }; </script>0
Ha registrado el componente VueApexCharts como apexcharts (plural), por lo que debería usar <apexcharts> (plural) en su plantilla o registrarlo como apexchart ...
components: { apexchart: VueApexCharts } Según la documentación , no necesita llamar manualmente a updateOptions ...
Actualizar los datos de su gráfico Vue es simple. Solo tiene que actualizar los accesorios de la serie que pasa al componente
<apexchart>y activará automáticamente el evento para actualizar el gráfico.
Sin embargo, lo que debe hacer es formatear los datos en algo que el gráfico pueda usar
data: () => ({ followerData: [], chartOptions: { /* same as you already have */ } }), computed: { // compute series data from you API results series: ({ followerData }) => { const series = followerData.reduce((map, { date, ...points }) => { Object.entries(points).forEach(([ name, point ]) => { const s = (map.has(name) ? map : map.set(name, [])).get(name) s.push({ x: date, y: point }) }) return map }, new Map()) return Array.from(series.entries(), ([ name, data ]) => ({ name, data })) } }, methods: { async getData() { const { data } = await this.$axios.get("/api/") this.followerData = data } }, created () { this.getData() }