So verwenden Sie Echarts zum Visualisieren von Komponenten in Vue

Offizielle Website-Adresse der Echarts-Komponente: https://echarts.apache.org/examples/zh/index.html

1. Suchen Sie die Adresse des Gerüstprojekts, führen Sie cnpm install echarts aus und installieren Sie die Echarts-Komponente (die Adresse des Gerüsts ist die Adresse Ihres Vue-Projekts).

(E:\demo\vuepro) Dies ist meine Projektadresse, vuepro ist der Projektname

2. Import auf Anfrage, um die Öffnung zu beschleunigen

//Echarts-Komponente importieren. Importiere Echarts von „Echarts“.
    //Grundlegende Vorlage einführen let echart = require('echarts/lib/echarts')
    //Balkendiagrammkomponente einführen require('echarts/lib/chart/bar')
    //Tooltip- und Titelkomponenten einführen require('echarts/lib/component/tooltip')
    erfordern('echarts/lib/komponente/titel')

3. Bereiten Sie Div-Tags vor, um Berichtsgrafiken unterzubringen

Die Div-ID wird zum Binden des Echarts-Plug-Ins verwendet.

 <div id="Diagramm" Stil="Breite: 50 %; Höhe: 400px;">
 </div>

4. Inhalt des Skript-Tags

//Echarts-Komponente importieren. Importiere Echarts von „Echarts“.
    //Grundlegende Vorlage einführen let echart = require('echarts/lib/echarts')
    //Balkendiagrammkomponente einführen require('echarts/lib/chart/bar')
    //Tooltip- und Titelkomponenten einführen require('echarts/lib/component/tooltip')
    erfordern('echarts/lib/komponente/titel')
            Standard exportieren{
                Name: "App",
                Daten(){
                  zurückkehren {
                     chartColumn:null
                  }
                },
                Methoden:{
                  initData(){
                    let dt = document.querySelector("#boss")

                    this.chartColumn=echart.init(dt)
                    diese.chartColumn.setOption(
                       //Vorlage in Beispielen)

                  }
                },
                montiert(){
                    dies.initData()
                }
             }

Zu Ihrer Bequemlichkeit habe ich hier eine vollständige Vorlage für die Einführung von Echarts-Visualisierungskomponenten in Vue bereitgestellt. Sie können sie einfach kopieren und verwenden.

<Vorlage>
    <div id="Chef" style="Breite: 500px;Höhe: 500px;">
        
    </div>
</Vorlage>

<Skript>
    //Echarts-Komponente importieren. Importiere Echarts von „Echarts“.
    //Grundlegende Vorlage einführen let echart = require('echarts/lib/echarts')
    //Balkendiagrammkomponente einführen require('echarts/lib/chart/bar')
    //Tooltip- und Titelkomponenten einführen require('echarts/lib/component/tooltip')
    erfordern('echarts/lib/komponente/titel')
            Standard exportieren{
                Name: "App",
                Daten(){
                  zurückkehren {
                     chartColumn:null
                  }
                },
                Methoden:{
                  initData(){
                    let dt = document.querySelector("#boss")
            
                    this.chartColumn=echart.init(dt)
                    diese.chartColumn.setOption(
                       //Vorlage in Beispielen)
            
                  }
                },
                montiert(){
                    dies.initData()
                }
             }
</Skript>

<Stil>
</Stil>

Beispiele:

<Vorlage>
    <div id="Chef" style="Breite: 500px;Höhe: 500px;">

    </div>
</Vorlage>

<Skript>
    E-Charts aus „E-Charts“ importieren
    //Grundlegende Vorlage einführen let echart = require('echarts/lib/echarts')
    //Balkendiagrammkomponente einführen require('echarts/lib/chart/bar')
    //Tooltip- und Titelkomponenten einführen require('echarts/lib/component/tooltip')
    erfordern('echarts/lib/komponente/titel')
            Standard exportieren{
                Name: "App",
                Daten(){
                  zurückkehren {
                     chartColumn:null
                  }
                },
                Methoden:{
                  initData(){
                    let dt = document.querySelector("#boss")

                    this.chartColumn=echart.init(dt)
                    diese.chartColumn.setOption(
                    //Das Folgende ist die echarts Visualisierungskomponente {
                          Tooltip: {
                              Auslöser: 'Achse',
                              axisPointer: { // Achse verwenden, um Tooltip auszulösen
                                  Typ: „Schatten“ // „Schatten“ als Standard; kann auch „Linie“ oder „Schatten“ sein
                              }
                          },
                          Legende: {
                              Daten: ['Direkt', 'Mail-Anzeige', 'Affiliate-Anzeige', 'Video-Anzeige', 'Suchmaschine']
                          },
                          Netz: {
                              links: '3%',
                              rechts: '4%',
                              unten: '3%',
                              containLabel: wahr
                          },
                          x-Achse:
                              Typ: "Wert"
                          },
                          yAchse: {
                              Typ: "Kategorie",
                              Daten: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
                          },
                          Serie: [
                              {
                                  Name: 'Direkt',
                                  Typ: "Bar",
                                  Stapel: 'gesamt',
                                  Etikett: {
                                      zeigen: wahr
                                  },
                                  Schwerpunkt:
                                      Fokus: 'Serie'
                                  },
                                  Daten: [320, 302, 301, 334, 390, 330, 320]
                              },
                              {
                                  Name: 'Mail Ad',
                                  Typ: "Bar",
                                  Stapel: 'gesamt',
                                  Etikett: {
                                      zeigen: wahr
                                  },
                                  Schwerpunkt:
                                      Fokus: 'Serie'
                                  },
                                  Daten: [120, 132, 101, 134, 90, 230, 210]
                              },
                              {
                                  Name: „Affiliate-Anzeige“,
                                  Typ: "Bar",
                                  Stapel: 'gesamt',
                                  Etikett: {
                                      zeigen: wahr
                                  },
                                  Schwerpunkt:
                                      Fokus: 'Serie'
                                  },
                                  Daten: [220, 182, 191, 234, 290, 330, 310]
                              },
                              {
                                  Name: „Videoanzeige“,
                                  Typ: "Bar",
                                  Stapel: 'gesamt',
                                  Etikett: {
                                      zeigen: wahr
                                  },
                                  Schwerpunkt:
                                      Fokus: 'Serie'
                                  },
                                  Daten: [150, 212, 201, 154, 190, 330, 410]
                              },
                              {
                                  Name: 'Suchmaschine',
                                  Typ: "Bar",
                                  Stapel: 'gesamt',
                                  Etikett: {
                                      zeigen: wahr
                                  },
                                  Schwerpunkt:
                                      Fokus: 'Serie'
                                  },
                                  Daten: [820, 832, 901, 934, 1290, 1330, 1320]
                              }
                          ]
                      }
                      //Die Komponente endet hier)

                  }
                },
                montiert(){
                    dies.initData()
                }
             }
</Skript>

<Stil>
</Stil>

Anzeigeeffekt:

Dies ist das Ende dieses Artikels über die Verwendung von Echarts-Visualisierungskomponenten in Vue. Weitere relevante Inhalte zu Vue Echarts-Visualisierungskomponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

JavaScript-Datenvisualisierung: ECharts-Kartenerstellung
Implementierung der Drag-Datenvisualisierungsfunktion in Vue basierend auf Echarts
Vollständige Schritt-für-Schritt-Anleitung zur Verwendung der Echarts-Visualisierungsbibliothek in Vue
Ein Beispiel für eine Methode zur Anzeige der Datenvisualisierung auf einem großen Bildschirm basierend auf vue+echarts
Vue Echarts implementiert ein visuelles Weltkarten-Codebeispiel
JavaScript Echart Visualisierung lernen

<<: Centos8 (Minimalinstallation) Tutorial zur Installation von Python3.8+pip

>>: MySQL 8.0-Fehler Der Server hat eine für die Client-Lösung unbekannte Authentifizierungsmethode angefordert

So verwenden Sie Echarts zum Visualisieren von Komponenten in Vue

Detaillierte Erklärung der XML-Syntax

Detaillierte Erläuterung der durch schwebende Elemente verursachten Probleme und Lösungen

Warum sollten Sie mit der add_header-Direktive von Nginx vorsichtig sein?

Methode zum Schreiben von bedingten Kommentaren und Beispielcode

Detaillierte Analyse des Befehls chmod zum Ändern der Dateiberechtigungen unter Linux

Einführung in die MySQL-Datenbank: Detaillierte Erläuterung des Datenbanksicherungsvorgangs

So ändern Sie den MySQL-Zeichensatz

Analyse des Implementierungsprozesses für die Tomcat maxPostSize-Einstellung

Detaillierte Erklärung zum Mounten von Remote-Dateisystemen über SSH unter Linux

Verwenden Sie das Label-Tag, um das Optionsfeld auszuwählen, indem Sie auf den Text klicken

Artikel empfehlen

Tiefgreifendes Verständnis von Javascript-Prototypen und Prototypenketten

VUE Erste Schritte Erlernen der Ereignisbehandlung

Gerätetreiber des Linux-Kernels – Zusammenfassung der grundlegenden Hinweise zum Linux-Kernel

Bringen Sie Ihnen bei, ein einfaches Versprechen Schritt für Schritt umzusetzen

So verwenden Sie Node-Scaffolding zum Erstellen eines Servers zur Implementierung der Token-Verifizierung

Fallstudie zum Unterschied zwischen JavaScript parseInt() und Number()

Analyse der Verschachtelungsregeln von XHTML-Tags

Lernprogramm zur Verwendung von HTML-Formular-Tags

Detailliertes Tutorial zur VMware-Installation des Linux CentOS 7.7-Systems

Detaillierte Erklärung des Update-Befehls für Software (Bibliothek) unter Linux

Tutorial zur Installation des Nginx-RTMP-Streaming-Servers unter Ubuntu 14

js zur Realisierung der Web-Message-Board-Funktion

So entwerfen und erstellen Sie adaptive Webseiten

9 großartige JavaScript-Framework-Skripte zum Zeichnen von Diagrammen im Web

jQuery erzielt einen Bildlaufwiedergabeeffekt auf großem Bildschirm