Echarts-Tutorial zur Implementierung von Baumdiagrammen
|
Treemaps dienen vor allem der Visualisierung baumartiger Datenstrukturen und stellen eine spezielle Art der Hierarchie dar. Um dies zu implementieren, setzen Sie „Serie->Typ“ auf „Baum“. Das Baumdiagramm von Echarts kann orthogonal oder radial sein. Orthogonaler Baum:
Radialer Baum:
Um dies umzusetzen, ändern Sie die Einstellungen unter „Serie -> Layout“: orthogonal für positive Richtung, radial für radiale Richtung. Kann individuell angepasst werden, beispielsweise von rechts nach links:
Um dies zu implementieren, ändern Sie die Einstellung „series->orient“, um LR, RL, TB und BT zu unterstützen, wobei RL von rechts nach links bedeutet. Anpassbare Symbole: unterstützt „Kreis“, „Rechteck“, „rundes Rechteck“, „Dreieck“, „Raute“, „Stecknadel“, „Pfeil“, „keine“ Implementierungsmethode: ändern: Serie->Symboleinstellungen Das Symbol ist ein quadratisches Baumdiagramm:
Individuell anpassbar, Gerade oder Kurve: Implementierungsmethode: Ändern Sie die Einstellungen von series->edgeShape, um Kurven und Polylinien zu unterstützen. Gerades Liniendiagramm:
anfänglicheBaumtiefe: Die Standard-Erweiterungstiefe beträgt 2. Knoten mit mehr als 2 Ebenen können durch Klicken auf den übergeordneten Knoten angezeigt oder ausgeblendet werden. Wenn der Wert auf -1 oder null oder undefiniert gesetzt ist, werden alle Knoten erweitert. Artikelstil: Ändern Sie den Stil der Baumdiagrammelemente. Sie können Farbe, Größe usw. ändern. Etikett: Handhabung von Text in Diagrammelementen. Mit dem Formatierer können Sie dem Diagrammtext umfangreiche Effekte hinzufügen. Linienstil: Bearbeitung der Kartenmittellinie. Die Auswirkungen der Änderung des Linienstils:
Betonung: Fokus. Wenn nach dem Setzen des Fokus die Maus auf ein Element bewegt wird, werden andere irrelevante Elemente vorübergehend ausgeblendet. „keine“ blendet andere Grafiken nicht aus. Diese Konfiguration wird standardmäßig verwendet. „Selbst“ fokussiert (verblasst nicht) nur die Grafik der aktuell hervorgehobenen Daten. „Serie“ fokussiert alle Diagramme der Serie, die die aktuell hervorgehobenen Daten enthalten. 'ancestor' konzentriert sich auf alle Vorgängerknoten 'descendant' konzentriert sich auf alle Nachkommenknoten
Schwerpunkt:
Fokus: 'Vorfahr',
Unschärfebereich: 'Koordinatensystem'
}
Datenstruktur des Baumdiagramms: Name: Der Standardname des Diagrammelements. children: untergeordnete Knoten dieses Elements Natürlich können Sie beliebige Attribute in den Daten definieren, z. B. Wert, Zahl usw., und den Formatierer im Etikett verwenden, um reichhaltigere Anzeigeeffekte zu erzielen. Zum Schluss noch der komplette Code: Hauptseite
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Echarts Beispiel - Legende</title>
<script src="../../echarts.js"></script>
</Kopf>
<Text>
<div id="Container" Stil="Breite: 500px;Höhe: 500px;">
</div>
<script src="./index.js"></script>
</body>
</html>
index.js
var chart = echarts.init(document.getElementById("container"));
var Daten = {
Name: 'Wurfobjekt',
Kinder: [{
Name: 'Fehler',
Kinder: [{
Name: "VirtualMachineError",
Kinder: [{
Name: "StackOverflowError"
}, {
Name: "Nicht genügend Arbeitsspeicher"
}]
}, {
Name: "AWTError"
}]
}, {
Name: "Ausnahme"
}]
}
var Daten2 = {
Name: 'Dragon Ball Charaktere',
Kinder: [{
Name: „Sun Wukong“
}, {
Name: „Bulma“
}, {
Name: „Zhu Wuneng“
}, {
Name: 'Yamucha'
}, {
Name: 'Schildkröte-Einsiedler'
}, {
Name: „Xiao Lin“
}, {
Name: 'Piccolo'
}, {
Name: „Kranich Unsterblich“
}, {
Name: „Tianjin-Reis“
}, {
Name: 'Knödel'
}]
}
chart.setOption({
Titel:
Text: „Diagramm der Java-Ausnahmestruktur“
},
Serie: [{
Layout: "orthogonal",
Daten: [Daten],
rechts: '60%',
Typ: "Baum",
edgeShape: 'Polylinie', // Kurve und Polylinie
Symbol: 'Rechteck', // 'Kreis', 'Rechteck', 'rundesRechteck', 'Dreieck', 'Raute', 'Stift', 'Pfeil', 'keine',
initialTreeDepth: 2,
Artikelstil: {
Farbe: „Cyan“
},
Linienstil:
Farbe: 'rot'
},
/**
*
*
* „none“ blendet andere Grafiken nicht aus. Diese Konfiguration wird standardmäßig verwendet.
„Selbst“ fokussiert (verblasst nicht) nur die Grafik der aktuell hervorgehobenen Daten.
„Serie“ fokussiert alle Diagramme der Serie, die die aktuell hervorgehobenen Daten enthalten.
'ancestor' konzentriert sich auf alle Vorgängerknoten. 'descendant' konzentriert sich auf alle Nachkommenknoten. */
Schwerpunkt:
Fokus: 'Vorfahr',
Unschärfebereich: 'Koordinatensystem'
},
}, {
Layout: "radial",
links: '60%',
Daten: [Daten2],
Typ: "Baum",
Symbol: 'Rechteck',
SymbolGröße: 15
}]
})
Zusammenfassen Dies ist das Ende dieses Artikels über die Implementierung von Baumdiagrammen im Echarts-Beispiel-Tutorial. Weitere relevante Inhalte zur Implementierung von Baumdiagrammen in Echarts finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Detaillierte Erläuterung der Konfiguration des Samba-Ordnerfreigabeservers unter CentOS
>>: Spezifische Verwendung von Linux which Befehl
Artikel empfehlen
12 Javascript-Tabellensteuerelemente (DataGrid) sind aussortiert
Wenn die DataSource-Eigenschaft eines DataGrid-Ste...
JavaScript implementiert eine verschiebbare Modalbox
In diesem Artikel wird der spezifische JavaScript...
VMware Workstation Pro installiert das Win10-Betriebssystem in Reinform
Dieser Artikel beschreibt die Schritte zur Instal...
Verwenden Sie href in HTML, um beim Klicken auf einen Link ein Dialogfeld zum Herunterladen von Dateien anzuzeigen.
Ich habe heute einen neuen Trick gelernt. Ich kann...
CSS3 verwendet Animationsattribute, um coole Effekte zu erzielen (empfohlen)
animation-name Animationsname, kann mehrere Werte...
vue+elementui implementiert den vollständigen Code zum Hinzufügen und Ändern einer gemeinsamen Bullet-Box
Inhaltsverzeichnis 1. Neu II. Änderung element-ui...
So teilen Sie Daten in MySQL-Tabellen und -Datenbanken auf
Inhaltsverzeichnis 1. Vertikales (längsseitiges) ...
IP-Whitelist für die Linux-Serverkonfiguration zum Verhindern von Remote-Anmeldungen und Port-Offenlegung
Vorwort Der vom Blogger verwendete Server wurde v...
Was ist eine HTML-Datei? So öffnen Sie eine HTML-Datei
HTML steht für Hypertext Markup Language. Heutzut...
Eigenschaften und Quellcode der Echarts-Legendenkomponente
Die Legendenkomponente ist eine häufig verwendete...
Zusammenfassung der Unterschiede zwischen MySQL-Primärschlüssel und eindeutigem Schlüssel
Was ist ein Primärschlüssel? Ein Primärschlüssel ...
display:grid in CSS3, eine Einführung in das Rasterlayout
1. Rasterlayout (Raster): Es unterteilt die Webse...
Lassen Sie uns ausführlich über die gemeinsame MySQL-Abfrage sprechen
Inhaltsverzeichnis Union-Abfrage 1. Fragen Sie di...
Detaillierte Erläuterung der MySQL SQL99-Syntax für Inner Join und Non-Equivalent Join
#Case: Gehaltsstufen von Mitarbeitern abfragen WÄ...
Diagramm des installationsfreien Konfigurationsprozesses für komprimierte MySQL 5.7.17-Pakete
Es gibt zwei Versionen der MySQL-Datenbankverwalt...