Cómo integrar ApexCharts con Vue.js: una guía detallada

Los cuadros y gráficos son una excelente manera de mostrar información / datos a los usuarios de su aplicación. En este artículo, le mostraré exactamente cómo hacer eso con vue-apexcharts.

Empezando

Usando la CLI de Vue, podemos crear fácilmente una aplicación de inicio. Primero, necesitamos instalar Vue CLI con el siguiente comando. Puede omitir esto si ya lo tiene instalado.

Nota: Para utilizar la CLI, deberá tener instalada la versión 8 o superior de Node.js (se recomienda 8.10.0+).

Para instalar la CLI, ejecute este comando en su terminal:

npm install @vue/cli

Ahora podemos usarlo para crear nuestro proyecto. Crearemos el proyecto usando este comando:

vue create vue-apexcharts-demo

Luego, se nos pedirá la opción de elegir un ajuste predeterminado predeterminado o seleccionar funciones manualmente. Seleccione default.

Se creará un nuevo directorio de proyecto y puede navegar en él usando este comando:

cd vue-apexcharts-demo

Instalación de Apexcharts

Antes de continuar, es posible que se esté preguntando ...

¡¿Qué es apexcharts ?!

ApexCharts es una biblioteca de gráficos moderna que ayuda a los desarrolladores a crear visualizaciones hermosas e interactivas para páginas web. Puedes ver su demostración aquí.

Podemos usar ApexCharts fácilmente con nuestra aplicación Vue integrando su componente contenedor para Vue llamado vue-apexcharts .

Para instalar el componente vue-apexcharts en nuestra aplicación, use este comando:

npm install --save apexcharts npm install --save vue-apexcharts

Configuración de vue-apexcharts

Ahora que tenemos vue-apexcharts instalado, necesitamos instalarlo en nuestra aplicación. Abra el srcdirectorio y cree un nuevo directorio llamado plugins. Dentro del nuevo directorio de complementos, cree un archivo llamado apexcharts.js.

A continuación, crearemos un componente Vue para apexcharts en nuestro apexcharts.js. Esto hará que el componente esté disponible globalmente en nuestra aplicación.

Para hacer esto, importaremos tanto Vue como vue-apexcharts. A continuación, crearemos un componente global llamado apexchart. Así es como apexcharts.jsdebería verse su archivo:

import Vue from 'vue' import VueApexCharts from 'vue-apexcharts' Vue.component('apexchart', VueApexCharts)

Importando nuestro archivo de complemento

Tenemos que informar a Vue del archivo que acabamos de crear. Para hacer eso, lo importamos en el main.jsarchivo. Abra el archivo main.js y agregue la siguiente línea después de la última declaración de importación:

import '@/plugins/apexcharts'

Ahora estamos listos para crear nuestro primer gráfico.

Creando nuestro primer gráfico

Crearemos nuestros gráficos en el componente HelloWorld. Este componente se creó automáticamente cuando usamos la CLI de Vue para crear nuestra aplicación.

Abra el archivo HelloWorld.vuey elimine todo el código de demostración allí.

Su archivo debería verse así:

   export default { name: 'HelloWorld' }   

Recuerde que en nuestro complemento, llamamos a nuestro componente apexchart.

Vue-Apexcharts crea gráficos utilizando los datos que le pasa utilizando accesorios, como se ve en el siguiente código. Lo usaremos para crear el HTML para nuestro primer gráfico. En el primer ejemplo, comenzaremos con un gráfico de barras muy básico.

Como puede ver en la plantilla anterior, el apexchartcomponente tiene 4 accesorios. Ahora, pasemos a la parte del guión.

 export default { name: 'HelloWorld', data: () => ({ options: { chart: { id: 'vuechart-example' }, xaxis: { categories: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ] } }, series: [{ name: 'series-1', data: [55, 62, 89, 66, 98, 72, 101, 75, 94, 120, 117, 139] }] }) } 

Explicación de los datos del gráfico

Nuestro gráfico de barras contiene los precios de las acciones mensuales para una organización ficticia. Tenemos 12 puntos de datos en nuestro gráfico de barras. Cada mes se mostrará en el eje x del gráfico. Su precio se muestra en el eje y del gráfico.

Para proporcionar los datos que se mostrarán en nuestro gráfico de barras, agregaremos una matriz de series. Una serie es una matriz de objetos. Cada objeto define el tipo de gráfico que se creará y tendrá una matriz de datos de valores que se trazarán en el gráfico.

Puede iniciar su servidor con el comando:

npm run serve

Ahora, abra su navegador en localhost: 8080 y debería ver su gráfico:

Diseñando nuestros gráficos

Podemos colocar nuestro gráfico en el centro de la página. Para hacer esto, voy a agregar una clase chart-wrapperdentro de nuestro div. También quiero aumentar el ancho del gráfico a 800px. Mi plantilla ahora se ve así:

A continuación, agreguemos un poco de estilo a la nueva chart-wrapperclase que colocará nuestro gráfico en el centro de la página. Aquí está el estilo que he agregado:

 div.chart-wrapper { display: flex; align-items: center; justify-content: center } 

While we are adding styles I want to replace the Vue logo with a title. Open up the App.vue file. Delete the tag and replace it with:

Vue Apexcharts Demo

Our charts now looks like this:

Adding a Title and Changing Chart Color

We can add a title to our bar chart to add further context and an explanation of what the chart is all about.

To add a title to our bar chart, go back to your HelloWorld.vue component and add a title to the options object.

options: { chart: { id: 'vuechart-example' }, xaxis: { categories: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ] }, title: { text: 'Monthly Stock Pricing' } }, series: [{ name: 'series-1', data: [55, 62, 89, 66, 98, 72, 101, 75, 94, 120, 117, 139] }]

By default, the title is placed on the left side of the bar chart. Here is what our chart looks like now:

Let’s change the default behaviour by adding our own custom style. I want the title to have a bigger font size and to be centered. The title object has a property called align which represents the horizontal plane. I want the title centered on this. To make the title have a bigger font size we need to add a style option.

Also, we can set the bar chart to have a different color. Here is what options look like now:

options: { chart: { id: 'vuechart-example' }, xaxis: { categories: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ] }, title: { text: 'Monthly Stock Pricing', align: 'center', style: { fontSize: '20px', }, }, colors: ['#00897b'] }, series: [{ name: 'series-1', data: [55, 62, 89, 66, 98, 72, 101, 75, 94, 120, 117, 139] }]

This is what the bar chart looks like now:

Creating a Line Chart

First, we need to create a new chart-wrapper div and a new apexchart element. The new apexchart element will hold props like the previous example. But the interesting thing here is all you need to do is to change the prop type in the template to line.

Here is what my HTML code looks like now:

We now have this line graph:

Apexcharts Documentation

Apexcharts have different charts type you can choose from apart from bar and line. They also have various options that you can add to your chart. You can add legends or markers, and tooltips for example.

If you want to find out about the other chart types and options that are available you can read their documentation here

Repo

You can find the code for this article in my github account.

Conclusion

Charts helps us visualize data and help users view and interact with it. Integrating ApexCharts to your Vue application is just as easy as you have seen above.

Feedback is welcome! And please share this article if you found it helpful.

Thanks for reading!