Der Implementierungsprozess der ECharts Multi-Chart-Verknüpfungsfunktion

Der Implementierungsprozess der ECharts Multi-Chart-Verknüpfungsfunktion

Wenn viele Daten angezeigt werden müssen, ist die Anzeige in einem Diagramm nicht optimal. In diesem Fall können Sie die Verwendung von zwei Diagrammen für die verknüpfte Anzeige in Betracht ziehen.

ECharts bietet die Funktion zum Verbinden mehrerer Diagramme. Mehrere verbundene Diagramme können Komponentenereignisse gemeinsam nutzen und beim Speichern von Bildern automatisches Spleißen realisieren. Multi-Chart-Verknüpfung unterstützt Tooltip-Verknüpfung im rechteckigen System

Um eine Mehrfach-Chart-Verknüpfung in EChart zu realisieren, können Sie die folgenden zwei Methoden verwenden.

(1) Setzen Sie jedes ECharts-Objekt auf denselben Gruppenwert und übergeben Sie den Gruppenwert beim Aufrufen der Verbindungsmethode des ECharts-Objekts, um eine Verknüpfungsbeziehung unter Verwendung mehrerer ECharts-Objekte herzustellen. Das Format ist wie folgt.

myChart1.group = 'group1'; //Legen Sie einen Gruppenwert für das erste ECharts-Objekt fest
myChart2.group = 'group1'; //Denselben Gruppenwert für das zweite ECharts-Objekt festlegen
echarts.connect('group1'); //Wenn Sie die Connect-Methode des ECharts-Objekts aufrufen, übergeben Sie den Gruppenwert

(2) Rufen Sie direkt die Verbindungsmethode von ECharts auf. Der Parameter ist ein Array, das aus mehreren ECharts-Objekten besteht, die verknüpft werden müssen. Das Format ist wie folgt.

echarts.connect([meinChart1,meinChart2]);

Wenn Sie die bestehende Multi-Chart-Verknüpfung aufheben möchten, können Sie die Methode disConnect im folgenden Format aufrufen.

echarts.disConnect('Gruppe1');

Anhand der Berufseinschreibungssituation einer bestimmten Hochschule in den Jahren 2019 und 2020 wird ein Balkendiagramm als Verknüpfungsdiagramm erstellt, wie in der Abbildung dargestellt.

Wie aus der Abbildung ersichtlich, gibt es zwei Balkendiagramme, ein oberes und ein unteres, die jeweils die Einschreibungszusammenfassung für die beiden Jahre 2019 und 2020 darstellen. Da mehrere Diagramme verknüpft sind, blendet das System automatisch das entsprechende Detail-Eingabeaufforderungsfeld (Tooltip) zum Hauptfach Künstliche Intelligenz in den Jahren 2019 und 2020 ein, wenn die Maus über die Spalte „Hauptfach Künstliche Intelligenz“ in den Jahren 2019 und 2020 bewegt wird. 

<html>

<Kopf>
	<meta charset="utf-8">
	<script type="text/javascript" src='js/echarts.js'></script>
</Kopf>

<Text>
	<div id="main1" style="Breite: 600px; Höhe: 400px"></div>
	<div id="main2" style="Breite: 600px; Höhe: 400px"></div>
	<Skripttyp="text/javascript">
		//Basierend auf dem vorbereiteten DOM das ECharts-Diagramm initialisieren var myChart1 = echarts.init(document.getElementById("main1"));
		var option1 = { //Geben Sie die Konfigurationselemente und Daten der ersten Diagrammfarbe an: ['Hellgrün', 'Dunkelgrün', 'Rot', 'Blau', 'Lila'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba setzt die Transparenz auf 0,1
			Titel: { Text: 'Zusammenfassung der Berufseinschreibungen einer bestimmten Hochschule im Jahr 2019', links: 40, oben: 5 },
			Tooltip: { Tooltip: { anzeigen: true }, },
			Legende: { Daten: ['Einschreibungen 2019'], links: 422, oben: 8 },
			xAchse: [{
				Daten: ["Big Data", "Cloud Computing", "Oracle", "ERP", "künstliche Intelligenz",
					"Softwareentwicklung", "Mobile Entwicklung", "Netzwerktechnologie"],axisLabel:{interval: 0}
			}],
			yAxis: [{ Typ: 'Wert', }],
			series: [{ //Konfiguriere die Datenreihe des ersten Diagrammnamens: '2019 Enrollment',
				Typ: 'Balken', Balkenbreite: 40, //Legen Sie die Breite jeder Spalte in den Balkendiagrammdaten fest: [125, 62, 45, 56, 123, 205, 108, 128],
			}]
		};
		//Basierend auf dem vorbereiteten DOM das ECharts-Diagramm initialisieren var myChart2 = echarts.init(document.getElementById("main2"));
		var option2 = { //Geben Sie die Konfigurationselemente und Daten der zweiten Diagrammfarbe an: ['blau', 'Hellgrün', 'Dunkelgrün', 'rot', 'Lila'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba setzt die Transparenz auf 0,1
			Titel: { Text: 'Zusammenfassung der Einschreibungssituation einer bestimmten Hochschule im Jahr 2020', links: 40, oben: 8 },
			Tooltip: { anzeigen: true },
			Legende: { Daten: ['Einschreibungen 2020'], links: 422, oben: 8 },
			xAchse: [{
				Daten: ["Big Data", "Cloud Computing", "Oracle", "ERP", "künstliche Intelligenz",
					"Softwareentwicklung", "Mobile Entwicklung", "Netzwerktechnologie"],axisLabel:{interval: 0}
			}],
			yAxis: [{ Typ: 'Wert', }],
			series: [{ //Konfiguriere die Datenreihe des zweiten Diagrammnamens: '2020 Enrollment',
				Typ: 'Balken', Balkenbreite: 40, //Legen Sie die Breite jeder Spalte in den Balkendiagrammdaten fest: [325, 98, 53, 48, 222, 256, 123, 111],
			}]
		};
		myChart1.setOption(option1); //Daten für myChart1-Objekt laden myChart2.setOption(option2); //Daten für myChart2-Objekt laden //Konfigurationsmethode 1 für Multi-Chart-Verknüpfung: Legen Sie den Gruppenwert jedes E-Charts-Objekts separat fest myChart1.group = 'group1';
		myChart2.group = "Gruppe1";
		echarts.connect('Gruppe1');
	//Konfigurationsmethode 2 für die Verknüpfung mehrerer Diagramme: Übergeben Sie direkt die E-Charts-Objekte myChart1 und myChart2, die verknüpft werden müssen
	//echarts.connect([myChart1,myChart2]);
	</Skript>
</body>

</html>

Anhand der Einschreibungssituation für jedes Hauptfach an einer bestimmten Universität von 2016 bis 2020 wird ein Verknüpfungsdiagramm aus Kreis- und Balkendiagramm erstellt, wie in der Abbildung dargestellt.

Wie aus der Abbildung ersichtlich, handelt es sich oben um ein Kreisdiagramm und unten um ein Balkendiagramm (das Balkendiagramm kann über die Toolbox auch in ein Liniendiagramm umgewandelt werden). Wenn Sie mit der Maus über einen Sektor des Kreisdiagramms fahren, wird im Kreisdiagramm ein detaillierter Tooltip angezeigt, der die Anzahl der im entsprechenden Jahr des Sektors eingeschriebenen Studenten und ihren Anteil an der Gesamtzahl der in jedem Jahr eingeschriebenen Studenten anzeigt. Gleichzeitig wird im Balkendiagramm (oder Liniendiagramm) ein detaillierter Tooltip angezeigt, der detaillierte Daten zur Anzahl der in jedem Hauptfach im entsprechenden Jahr eingeschriebenen Studenten anzeigt.

Der Quellcode lautet wie folgt:

<html>

<Kopf>
	<meta charset="utf-8">
	<script type="text/javascript" src='js/echarts.js'></script>
</Kopf>

<Text>
	<div id="main1" style="Breite: 600px; Höhe: 400px"></div>
	<div id="main2" style="Breite: 600px; Höhe: 400px"></div>
	<Skripttyp="text/javascript">
		//Basierend auf dem vorbereiteten DOM das ECharts-Diagramm initialisieren var myChart1 = echarts.init(document.getElementById("main1"));
		var option1 = { //Geben Sie die Konfigurationselemente und Daten des ersten Diagramms an option1 color: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrchid', 'Navy'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)', //Hintergrundfarbe konfigurieren, rgba setzt Transparenz auf 0.1
			Titel: { Text: 'Analyse der Einschreibungssituation für jedes Hauptfach an einer bestimmten Universität im Laufe der Jahre', x: 'Mitte', y: 12 },
			Tooltip: { Auslöser: "Element", Formatierung: "{a}<br/>{b}:{c}({d}%)" },
			Legende: {
				orient: 'vertikal', x: 15, y: 15,
				Daten: ['2016', '2017', '2018', '2019', '2020']
			},
			Serie: [{ //Konfiguriere die Datenreihe des ersten Diagramms Name: 'Gesamtzahl der Personen:', Typ: 'Kreis',
				Radius: '70%', Zentrum: ['50%', 190],
				Daten: [
					{ Wert: 1695, Name: '2016' }, { Wert: 1790, Name: '2017' },
					{ Wert: 2250, Name: '2018' }, { Wert: 2550, Name: '2019' },
					{ Wert: 2570, Name: '2020' }]
			}]
		};
		myChart1.setOption(option1); //Kreisdiagramm mit den angegebenen Konfigurationselementen und Daten anzeigen //ECharts-Diagramm basierend auf dem vorbereiteten DOM initialisieren var myChart2 = echarts.init(document.getElementById("main2"));
		var option2 = { //Geben Sie die Konfigurationselemente und Daten der zweiten Diagrammfarbe an: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrchid', 'Navy'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)', //Hintergrundfarbe konfigurieren, rgba setzt Transparenz auf 0.1
			tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, //Konfiguriere die Komponente der Eingabeaufforderungsbox legend: { //Konfiguriere die Komponente der Legende left: 42, top: 25,
				Daten: ['Big Data', 'Oracle', 'Cloud Computing', 'Künstliche Intelligenz', 'Software Engineering']
			},
			toolbox: { //Konfiguriere die Toolbox-Komponente des zweiten Diagramms show: true, orient: 'vertical', left: 550, top: 'center',
				Besonderheit:
					Markieren: { Show: True }, Wiederherstellen: { Show: True }, AlsBild speichern: { Show: True },
					magicType: { show: true, type: ['Linie', 'Balken', 'Stapel', 'gekachelt'] }
				}
			},
			xAchse: [{
				Typ: "Kategorie",
				Daten: ['2016', '2017', '2018', '2019', '2020']
			}], //Konfigurieren Sie das Koordinatensystem der x-Achse des zweiten Diagramms yAxis: [{ type: 'value', splitArea: { show: true } }], //Konfigurieren Sie das Koordinatensystem der y-Achse des zweiten Diagramms series: [ //Konfigurieren Sie die Datenreihe des zweiten Diagramms {
					Name: 'Big Data', Typ: 'Balken', Stapel: 'Gesamtbetrag',
					Daten: [301, 334, 390, 330, 320], Balkenbreite: 45,
				},
				{ Name: 'Oracle', Typ: 'Balken', Stapel: 'Gesamt', Daten: [101, 134, 90, 230, 210] },
				{ Name: 'Cloud Computing', Typ: 'Balken', Stapel: 'Gesamtbetrag', Daten: [191, 234, 290, 330, 310] },
				{ Name: 'Künstliche Intelligenz', Typ: 'Balken', Stapel: 'Gesamt', Daten: [201, 154, 190, 330, 410] },
				{ Name: 'Software Engineering', Typ: 'Balken', Stapel: 'Gesamt', Daten: [901, 934, 1290, 1330, 1320] }
			]
		};
		myChart2.setOption(option2); //Verwende die angegebenen Konfigurationselemente und Daten, um das gestapelte Balkendiagramm anzuzeigen //Konfigurationsmethode 1 für die Verknüpfung mehrerer Diagramme: Legen Sie den Gruppenwert jedes E-Charts-Objekts separat fest myChart1.group = 'group1';
		myChart2.group = "Gruppe1";
		echarts.connect('Gruppe1');
 	    //Konfigurationsmethode 2 für die Verknüpfung mehrerer Diagramme: Übergeben Sie direkt die E-Charts-Objekte myChart1 und myChart2, die verknüpft werden müssen
	    //echarts.connect([myChart1,myChart2]);
	</Skript>
</body>

</html>

Zusammenfassen

Dies ist das Ende dieses Artikels über die Implementierung der ECharts-Multi-Chart-Verknüpfung. Weitere relevante Inhalte zur ECharts-Multi-Chart-Verknüpfung 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:
  • echarts implementiert Karten-Timing-Umschaltung von Streupunkten und Multi-Chart-Kaskadenverknüpfung, detaillierte Erklärung

<<:  Mehrere Lösungen zum Vergessen des MySQL-Passworts

>>:  Beispiele für die Verwendung des Linux-Touch-Befehls

Artikel empfehlen

36 Prinzipien der MySQL-Datenbankentwicklung (Zusammenfassung)

Vorwort Diese Prinzipien sind aus tatsächlichen K...

Detaillierte Erklärung der Fallstricke von MySQL 8.0

Ich habe heute MySQL 8.0 aktualisiert. Das erste ...

Integrationspraxis des Vue+Element-Hintergrundverwaltungsframeworks

Inhaltsverzeichnis Vue+ElementUI-Hintergrundverwa...

MySQL-Tabellenfeld Zeiteinstellung Standardwert

Anwendungsszenario In der Datentabelle muss die A...

Vue implementiert das Hoch- und Herunterladen von Dateien

In diesem Artikelbeispiel wird der spezifische Co...

JavaScript fügt Prototyp-Methodenimplementierung für integrierte Objekte hinzu

Die Reihenfolge, in der Objekte Methoden aufrufen...

Tutorial zur Optimierung der Installationskonfiguration von MySQL 8.0.18

Die Installation, Konfiguration und Optimierung v...

Häufige Tomcat-Ausnahmen und Lösungscodebeispiele

Das Unternehmensprojekt wurde in Java entwickelt ...

Zusammenfassung von 4 Möglichkeiten zum Hinzufügen von Benutzern zu Gruppen in Linux

Vorwort Linux-Gruppen sind Organisationseinheiten...

MySQL verwendet Union, um die Daten zweier Tabellen zusammenzuführen und anzuzeigen

Verwenden des UNION-Operators Union : Wird verwen...

Beispiel für die Konvertierung eines flachen JavaScript-Arrays in eine Baumstruktur

Inhaltsverzeichnis 10.000 Daten gingen im Hinterg...

So verhindern Sie, dass sich vsftpd-Benutzer über SSH anmelden

Vorwort vsftp ist eine benutzerfreundliche und si...

Warum MySQL-Datenbanken NULL so weit wie möglich vermeiden

Viele Tabellen in MySQL enthalten Spalten, die NU...

Warum MySQL Repeatable Read als Standardisolationsebene wählt

Inhaltsverzeichnis Oracle-Isolationsebenen MySQL-...

Vue-Methode zum Überprüfen, ob der Benutzername verfügbar ist

In diesem Artikelbeispiel wird der spezifische Co...