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
Zusammenfassung häufig verwendeter SQL-Operationen in MySQL-Tabellen
1. Sehen Sie sich die Feldtypen in der Tabelle an...
Beispielanalyse zum Exportieren, Importieren und Kopieren von Docker-Images
Die erste Lösung besteht darin, das Bild in ein ö...
Detaillierte Erläuterung des MySQL-Clusters: Implementierung einer Master- und einer Slave-Architektur
Experimentelle Umgebung: 1. Drei CentOS 7-Server ...
MySql implementiert die Seitenabfragefunktion
Zunächst müssen wir klarstellen, warum wir pagini...
Führen Sie die Schritte aus, um mit Samba Ordner in CentOS 7 freizugeben
Vorwort Samba ist eine kostenlose Software, die d...
Vue verwendet Canvas-Handschrifteingabe, um Chinesisch zu erkennen
Effektbild: Vorwort: Kürzlich arbeitete ich an ei...
Ein Artikel, der Ihnen HTML beibringt
Wenn Sie nicht unbedingt Künstler werden möchten,...
So ändern Sie die Standardübermittlungsmethode des Formulars
Die Standard-Übermittlungsmethode von HTML ist get...
So installieren Sie MySQL 5.7 manuell auf CentOS 7.4
MySQL-Datenbanken werden häufig verwendet, insbes...
Eine kurze Diskussion über MySQL-Index-Designprinzipien und die Unterschiede zwischen gängigen Indizes
Indexdefinition: Es handelt sich um eine separate...
Codebeispiel für das Nutzungsszenario der Nginx-Domänenweiterleitung
Szenario 1: Aufgrund von Serverbeschränkungen ist...
Detaillierte Erklärung der grundlegenden Syntax und Datentypen von JavaScript
Inhaltsverzeichnis JavaScript importieren 1. Inte...
JS erkennt den Fall der Eliminierung von Sternen
In diesem Artikelbeispiel wird der spezifische JS...
Der Prozess der Installation von SVN auf Ubuntu 16.04.5LTS
Dieser Artikel stellt kurz den Prozess der Einric...
So verbessern Sie die MySQL Limit-Abfrageleistung
Bei MySQL-Datenbankoperationen hoffen wir immer, ...