0

📊 Dashboard com Vue.js e Apexcharts 📊

#HTML #JavaScript #Vue.js
PATRICK MONTEIRO
PATRICK MONTEIRO

Que tal construir um dashboard com gráficos no seu projeto Vue.js?


Apexcharts


O Apexcharts é uma biblioteca javascript que possibilita criar inúmeros gráficos, e possibilita a integração com frameworks como Angular, React e Vue.js.


A documentação é bem rica e com muitos exemplos para você utilizar como base para suas aplicações.


Você pode ver os exemplos neste link: https://apexcharts.com/javascript-chart-demos/


Instalação


Para realizar a instalação em seu projeto basta utilizar o terminal já acessando o seu projeto vue.js e executar os seguintes comandos:


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


E para fazer a utilização no projeto basta configurar:

import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)

Vue.component('apexchart', VueApexCharts)


A partir dai é possível você criar seus gráficos com a tag personalizada <apexchart> em seus projeto. Um exemplo seria criar um gráfico de barras desta forma :


<template>

<div>
  <apexchart width="500" type="bar" :options="options" :series="series"></apexchart>
</div>

</template>


Para visualizar um projeto real com apexcharts e vue.js você pode acessar meu repositório: https://github.com/patrickmonteiro/quasar-apexcharts


A demonstração online está neste endereço: https://quasar-apexcharts.surge.sh/#/


No desktop a visão fica desta forma:


N|Solid


Espero que essa dica lhe ajude em seus projetos, o repositório de exemplo é feito em Quasar Framework, mas você pode tomar como base para seus projetos Vue.js.


Qualquer dúvida, basta me procurar no linkedin =)

0
1

Comentários (1)

1
Anderson Leite

Anderson Leite

07/05/2021 16:42

Excelente dica Patrick, obrigado por compartilhar  com a gente!