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
JavaScript implementiert Klicken zum Ändern der Bildform (Transformationsanwendung)
Klicken Sie mit JavaScript, um die Form des Bilde...
Beispiel für die Implementierung von Textumbruch in HTML (gemischter Text und Bilder in HTML)
1. Text rund um das Bild Wenn wir zum Beispiel di...
Vue definiert private Filter und grundlegende Nutzung
Die Methoden und Konzepte privater und globaler F...
JavaScript zum Erzielen eines Klickbild-Flip-Effekts
Ich habe kürzlich an einem Projekt zur Gesichtser...
Detaillierte Schritte zur Installation der dekomprimierten Version von MySQL 5.7.20 (zwei Methoden)
Ich werde die Installation von MySQL unter Window...
Beispiel zum Starten eines Containers mit mehreren Netzwerkschnittstellen mithilfe von Docker
Hinzufügen einer Netzwerkschnittstelle zum Contai...
Detaillierte Erklärung der neuen Hintergrundeigenschaften in CSS3
Bisher kannten wir mehrere Hintergrundattribute i...
Implementierung des Markdown-Renderings in einer Vue-Einzelseitenanwendung
Beim Rendern von Markdown habe ich zuvor den Vors...
Datenabfragevorgang im MySQL-JSON-Format
Der Standardtabellenname ist „base_data“ und der ...
Tutorial zur Implementierung der Zwei-Wege-Authentifizierung durch OpenSSL (mit Server- und Client-Code)
1. Hintergrund 1.1 Probleme In einem aktuellen Pr...
Häufig verwendete HTML-Meta-Tag-Attribute (erforderlich für Website-Kompatibilität und -Optimierung)
Original-URL: http://segmentfault.com/blog/ciaocc/...
So kompilieren und installieren Sie OpenCV unter Ubuntu
Einfache Installation von opencv2: conda installi...
Alibaba Cloud Server Linux-System erstellt Tomcat zur Bereitstellung von Webprojekten
Ich teile den gesamten Prozess in vier Schritte e...
Details zum MySQL-Index-Pushdown
Inhaltsverzeichnis 1. Prinzip des ganz linken Prä...
Eine Zusammenfassung detaillierter Einblicke in den Import von CSS
Auf die Entwicklungsgeschichte von CSS wird hier ...