Tengo una aplicación web en la que uso ApexCharts con Vue 3 para trazar algunos gráficos. No tuve ningún problema al usar el diagrama de dispersión, pero cuando trato de trazar una línea de tiempo como este ejemplo del sitio web, falla por completo y no sé por qué. tal vez estoy haciendo algo mal, pero no puedo ver ningún error. Agradecería mucho si me pueden ayudar porque es importante!
Adjunto aquí el código de la vista:
<template> <apexchart type="rangeBar" height="350" :options="chartOptions" :series="series"></apexchart> </template> <script> import axios from "../../../services/api.js"; export default { data() { return { chartOptions: { chart: { type: 'rangeBar' }, plotOptions: { bar: { horizontal: true, } }, fill: { type: 'solid' }, xaxis: { type: 'datetime' }, }, series: [ { name: 'Prueba', data: [ { x: 'Code', y: [ new Date('2019-03-02').getTime(), new Date('2019-03-04').getTime() ] }, { x: 'Test', y: [ new Date('2019-03-04').getTime(), new Date('2019-03-08').getTime() ] }, { x: 'Validation', y: [ new Date('2019-03-08').getTime(), new Date('2019-03-12').getTime() ] }, { x: 'Deployment', y: [ new Date('2019-03-12').getTime(), new Date('2019-03-18').getTime() ] }, ] }, ], //end series }; //end return }, //end data } </script> <style scoped> </style>Hay algo mal en la biblioteca.
Si tienes una serie de clones profundos, parece funcionar
<apexchart type="rangeBar" height="350" :options="chartOptions" :series="JSON.parse(JSON.stringify(series))"></apexchart>