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
Zusammenfassung der MySQL-Nutzungsspezifikationen
1. Es muss die InnoDB-Speicher-Engine verwendet w...
Tutorial zur Installation und Konfiguration der dekomprimierten Version von mysql5.7.19 winx64
Das Installationstutorial zur dekomprimierten Win...
Miniprogramm Benutzerdefinierte TabBar-Komponentenkapselung
In diesem Artikelbeispiel wird der spezifische Co...
Bild-Scrolling-Effekt mit CSS3 erstellt
Ergebnisse erzielenImplementierungscode html <...
Vollständige Analyse des MySQL INT-Typs
Vorwort: Integer ist einer der am häufigsten verw...
Analyse des Konfigurationsprozesses der Nginx-HTTP-Integritätsprüfung
Passive Prüfung Mit passiven Integritätsprüfungen...
So stellen Sie die angezeigte Seite so ein, dass Baidu ihren Snapshot nicht speichern kann
Als ich heute nach einer Seite auf Baidu suchte, d...
Vue + elementui realisiert Mehrfachauswahl- und Suchfunktionen der Dropdown-Tabelle
In diesem Artikel wird der spezifische Code von v...
So lösen Sie das Problem verstümmelter chinesischer Zeichen beim Einfügen von Tabellendaten in MySQL
1. Problem Während der Entwicklung wird beim Einf...
JS implementiert die Append-Funktion von jQuery
Inhaltsverzeichnis Zeig mir den Code Testen Sie d...
Implementierung von verschiebbaren Zeilen und Spalten sowie Auswahlspaltenkomponenten basierend auf der el-table-Kapselung
Wirkung Brauchen Sie eine Umgebung Ansicht elemen...
So installieren Sie den Elasticsearch7.6-Cluster im Docker und legen ein Kennwort fest
Inhaltsverzeichnis Einige grundlegende Konfigurat...
Detailliertes Tutorial zur Installation von Docker auf CentOS 8.4
Inhaltsverzeichnis Vorwort: Systemanforderungen: ...
Analysieren Sie die Rolle von rel="nofollow" in HTML und die Verwendung des rel-Attributs
Durch das Hinzufügen des Attributs rel="nofo...
Ubuntu E: Sperre /var/lib/dpkg/lock-frontend konnte nicht abgerufen werden – offen (11: Ressource vorübergehend nicht verfügbar)
Ubuntu 18.04, andere Versionen von Ubuntu Frage: ...