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
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.23
Dieser Artikel zeichnet den detaillierten Install...
Detaillierte Einführung in die Bereitstellung eines K8S-Clusters auf einem CentOS7-System
Inhaltsverzeichnis 1 Ausführung und Planung 1.1 V...
Implementierung der VUE-Anzeige unendlicher Ebenenbaum-Datenstrukturen
Inhaltsverzeichnis Rekursiver Aufruf der Komponen...
Three.js-Beispielcode zur Implementierung des Tautropfen-Animationseffekts
Vorwort Hallo zusammen, hier ist der CSS-Assisten...
Optimierung des MySQL Thread_Stack-Verbindungsthreads
MySQL kann nicht nur über das Netzwerk, sondern a...
Keine chinesische Spezialität: Webentwicklung unter kulturellen Unterschieden
Webdesign und -entwicklung sind harte Arbeit, als...
Detaillierte Erklärung der MySQL-Sperren (Tabellensperren, Zeilensperren, gemeinsame Sperren, exklusive Sperren, Lückensperren)
Im wirklichen Leben ist ein Schloss ein Werkzeug,...
mysql5.7 Benutzerberechtigung erstellen Benutzer löschen Berechtigung widerrufen
1. Einen Benutzer anlegen: Befehl: CREATE USER &#...
Tutorial zur Installation von Ubuntu 1804 in VMware Workstation 15 Pro (mit Bildern und Text)
Dieser Hinweis ist ein Installationstutorial. Er ...
Passen Sie den Stil des Elements <input type="file"> an, das beim Hochladen von Dateien in HTML verwendet wird
Auf einer Webseite wird das Element <input typ...
Warum verwendet der MySQL-Datenbankindex den B+-Baum?
Bevor wir weiter analysieren, warum der MySQL-Dat...
Tipps zum Mischen von OR und AND in SQL-Anweisungen
Heute gibt es eine solche Anforderung. Wenn die a...
Ein kurzes Verständnis der drei Verwendungen von Standard-SQL-Update-Anweisungen
1. Umwelt: MySQL-5.0.41-win32 Windows XP Professi...
Natives JS zum Erreichen von Spezialeffekt-Meldungsfeldern
In diesem Artikel wird ein Nachrichtenfeld mit Sp...
Hallo – Erfahrungsaustausch zum Entwurf von Dialogfeldern
„Was ist los?“ Sofern Sie nicht an bestimmte Arten...