Download the PHP package diegocopat/pacchetto-vuejs without Composer
On this page you can find all versions of the php package diegocopat/pacchetto-vuejs. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download diegocopat/pacchetto-vuejs
More information about diegocopat/pacchetto-vuejs
Files in diegocopat/pacchetto-vuejs
Package pacchetto-vuejs
Short Description Generatore di configurazioni per grafici Vue.js
License MIT
Informations about the package pacchetto-vuejs
Pacchetto VueJS
Un pacchetto PHP per generare configurazioni di grafici per Vue.js utilizzando ApexCharts. Questo pacchetto semplifica l'integrazione tra backend PHP e frontend Vue.js, permettendo di creare grafici moderni, interattivi e visivamente accattivanti.
Caratteristiche
- Generazione di configurazioni per ApexCharts
- Supporto per vari tipi di grafici (linea, barre, torta, donut, area, radar)
- Personalizzazione completa di colori, stili e opzioni
- Generazione di componenti Vue.js completi
- Supporto per grafici statici e dinamici
- Interfaccia fluida con method chaining
Requisiti
- PHP 7.4 o superiore
- Composer
- Vue.js 3.x (per il frontend)
- ApexCharts.js e vue3-apexcharts (per il frontend)
Installazione
1. Installazione tramite Composer
2. Pubblicazione degli asset (Laravel)
Dopo aver installato il pacchetto con Composer, hai due opzioni per pubblicare gli asset necessari:
Opzione 1: Utilizzare il comando vendor:publish standard
Questo comando pubblicherà:
- Gli asset nella directory
public/vendor/diegocopat/pacchetto-vuejs
- I componenti Vue nella directory
resources/js/Components/vendor/diegocopat
- Il file di configurazione in
resources/js/vendor/diegocopat/apexcharts-setup.js
Opzione 2: Utilizzare il comando di installazione dedicato
Questo comando, oltre a pubblicare gli stessi asset di cui sopra, fornirà istruzioni aggiuntive per l'integrazione.
3. Installazione delle dipendenze npm (OBBLIGATORIO)
⚠️ IMPORTANTE: Dopo aver pubblicato gli asset, è NECESSARIO installare manualmente i pacchetti npm richiesti:
⚠️ Nota: Senza questo passaggio, l'importazione di
vue3-apexcharts
fallirà e il pacchetto non funzionerà correttamente!
4. Integrazione con Vue.js
Dopo l'installazione degli asset e dei pacchetti npm, è necessario:
-
Integrare ApexCharts nel tuo file principale JavaScript (es. app.js, main.js):
- Ricompilare gli asset:
Risoluzione dei problemi comuni
Errore: "Failed to resolve import 'vue3-apexcharts'"
Se incontri questo errore:
Soluzione: Assicurati di aver installato le dipendenze npm richieste:
Errore: "apexchart is not defined" o componente non trovato
Se il componente ApexChart non viene riconosciuto nei tuoi template Vue:
-
Verifica di aver aggiunto l'importazione nel tuo app.js:
- Se stai usando file
.vue
singoli, assicurati di importare anche lì:
Utilizzo Base
Generazione di una configurazione per grafici
Generazione di un componente Vue.js completo
Configurazione in Vue.js
Configurazione in Vue.js (main.js o app.js)
Utilizzo del componente generato
Utilizzo del componente dinamico
Il pacchetto può anche generare componenti Vue dinamici che accettano props:
Ecco come utilizzare il componente dinamico nel tuo frontend Vue:
Integrazione con Laravel
Creazione di un Controller
Rotta API
Utilizzo nel Frontend Vue
Opzioni di personalizzazione
Tipi di grafico supportati
line
- Grafico a lineebar
- Grafico a barrepie
- Grafico a tortadonut
- Grafico a ciambellaarea
- Grafico ad arearadar
- Grafico radar
Stili personalizzati
È possibile personalizzare diversi aspetti del grafico:
Metodi disponibili in ChartGenerator
Metodo | Descrizione |
---|---|
__construct(array $data, array $labels) |
Crea un nuovo generatore con i dati e le etichette |
setData(array $data) |
Imposta i dati del grafico |
setLabels(array $labels) |
Imposta le etichette sull'asse X |
setTitle(string $title) |
Imposta il titolo del grafico |
setType(string $type) |
Imposta il tipo di grafico |
setColors(array $colors) |
Imposta i colori utilizzati |
generateChartConfig() |
Genera l'array di configurazione |
renderJsonConfig() |
Genera la configurazione in formato JSON |
Metodi disponibili in VueChartComponent
Metodo | Descrizione |
---|---|
__construct(ChartGenerator $generator, string $componentName) |
Crea un nuovo generatore di componenti Vue |
generateVueComponent() |
Genera un componente Vue con configurazione statica |
generateDynamicVueComponent() |
Genera un componente Vue che accetta props |
Note per gli sviluppatori del pacchetto
Se stai contribuendo o modificando il pacchetto, ricorda che per rilasciare una nuova versione è necessario:
- Aggiornare il numero di versione in
composer.json
- Creare e pushare un tag Git per la nuova versione:
Packagist utilizza i tag Git per determinare le versioni disponibili.
Contribuire
Le contribuzioni sono benvenute! Per favore invia una pull request o apri un issue su GitHub.
Licenza
MIT