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:
|
<<: Centos8 (Minimalinstallation) Tutorial zur Installation von Python3.8+pip
Artikel empfehlen
So installieren Sie eine virtuelle Maschine mit Windows-Diensten auf dem Mac
1. Laden Sie die virtuelle Maschine herunter Offi...
Detaillierte Erklärung des Abstandsproblems zwischen IMG-Tags
Grundlegende Analyse des IMG-Tags: In HTML5 beste...
Lösung für das Vue-Routing: Diese Seite mit dem Sprung „this.route.push“ wird nicht aktualisiert
Die Vue-Routing-Seite this.route.push wird nicht ...
Zusammenfassung der Probleme bei der Speicherplatzfreigabe unter Linux
Die /Partitionsauslastung eines Servers im IDC is...
So löschen Sie die Validierungsaufforderung bei der Elementformularvalidierung
Inhaltsverzeichnis Problemszenario: Lösung: 1. Üb...
Native JS-Kapselung vue Tab-Umschalteffekt
In diesem Artikelbeispiel wird der spezifische Co...
Lösen Sie das Problem des Tomcat 404-Fehlers bei der Bereitstellung von Spring Boot + Jar-Verpackungen
1. Spring Boot unterstützt kein JSP-JAR-Paket, JS...
Vue implementiert Div-Rad zum Vergrößern und Verkleinern
Implementieren Sie das Vergrößern und Verkleinern...
Eine vollständige Anleitung zum Abfragen und Löschen doppelter Datensätze in MySQL
Vorwort In diesem Artikel werden hauptsächlich di...
So beheben Sie das Problem mit der Fußzeile unten auf der Seite (mehrere Methoden)
Als Front-End-Webentwickler sind Sie beim Erstell...
Detaillierte Schritte zum Einrichten eines Nexus-Servers
1. Die Bedeutung des Aufbaus eines Nexus-Dienstes...
Zusammenfassung der Unterschiede zwischen MySQL-Primärschlüssel und eindeutigem Schlüssel
Was ist ein Primärschlüssel? Ein Primärschlüssel ...
MySQL-Gruppe durch Gruppieren mehrerer Felder
Bei täglichen Entwicklungsaufgaben verwenden wir ...
Installieren und Bereitstellen von Java8 und MySQL unter CentOS7
Im Allgemeinen werden Java-Lernprogramme und Bere...
Docker-Container kommunizieren direkt über Routing, um Netzwerkkommunikation zu erreichen
Überblick Was das aktuelle Standardnetzwerk von D...