Detaillierte Erläuterung der ECharts-Mausereignisverarbeitungsmethode
|
Ein Ereignis ist eine vom Benutzer oder dem Browser selbst ausgeführte Aktion, beispielsweise Klicken, Mouseover und das Ladeereignis, das nach dem Laden der Seite ausgelöst wird. Eine Funktion, die auf ein Ereignis reagiert, wird als Ereignishandler bezeichnet. Sie kann auch als Ereignisverarbeitungsfunktion oder Ereignishandle bezeichnet werden. Mausereignisse sind Ereignisse, die ausgelöst werden, wenn mit der Maus auf eine Grafik in einem Diagramm geklickt wird (z. B. Klick, Doppelklick, Kontextmenü) oder der Mauszeiger über eine Grafik in einem Diagramm bewegt wird (z. B. Mouseover, Mouseout, Mousemove). In ECharts kann jede Aktion des Benutzers entsprechende Ereignisse auslösen. In ECharts werden 9 allgemeine Mausereignisse unterstützt, darunter Klicken, Doppelklick, Maus gedrückt, Maus bewegt, Maus hoch, Maus darüber, Maus raus, Global raus und Kontextmenü. Unter diesen wird das Klickereignis am häufigsten verwendet. Häufige Mausereignisse und ihre Beschreibungen werden in der Tabelle angezeigt.
Das Klickereignis wird nur ausgelöst, wenn die Ereignisse „Mousedown“ und „Mouseup“ nacheinander auf einem Diagrammelement ausgelöst werden. Das dblclick-Ereignis wird nur ausgelöst, wenn zwei Klickereignisse nacheinander ausgelöst werden. Wenn entweder die Maustaste gedrückt oder die Maustaste losgelassen wird, wird das Klickereignis nicht ausgelöst. Wenn das Klickereignis direkt oder indirekt abgebrochen wird, wird das dblclick-Ereignis nicht ausgelöst. Anhand der Berufseinschreibungssituation einer bestimmten Hochschule im Jahr 2020 wird ein Balkendiagramm erstellt, wie in der Abbildung dargestellt.
Wenn Sie im Balkendiagramm auf die Spalte „Künstliche Intelligenz“ klicken, um ein Mausklickereignis hinzuzufügen, wird ein Eingabeaufforderungsdialogfeld angezeigt, wie in der Abbildung oben dargestellt. Nachdem Sie im Eingabeaufforderungsdialogfeld auf die Schaltfläche „OK“ geklickt haben, wird automatisch die entsprechende Baidu-Suchseite geöffnet, wie in der folgenden Abbildung dargestellt.
Der Quellcode für diese Legende lautet wie folgt:
<html>
<Kopf>
<meta charset="utf-8">
<script type="text/javascript" src='js/echarts.js'></script>
</Kopf>
<Text>
<div id="main" style="Breite: 800px; Höhe: 600px"></div>
<Skripttyp="text/javascript">
var myChart = echarts.init(document.getElementById("main")); //ECharts-Diagramm basierend auf dem vorbereiteten DOM initialisieren var option = { //Konfigurationselemente und Daten der Diagrammfarbe angeben: ['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 Einschreibungssituation einer bestimmten Hochschule im Jahr 2020', links: 70, oben: 9 },
Tooltip: { Tooltip: { anzeigen: true }, },
Legende: { Daten: ['Einschreibungen 2019'], links: 422, oben: 8 },
xAxis: { // Konfigurieren Sie das Koordinatensystem der x-Achse data: ["Big Data", "Cloud Computing", "ERP", "Künstliche Intelligenz", "Softwareentwicklung", "Mobile Entwicklung", "Netzwerktechnologie"]
},
yAxis: {}, //Konfiguriere das Koordinatensystem der y-Achse series: [{ //Konfiguriere den Namen der Datenreihe: ‚Anzahl der eingeschriebenen Studenten:‘,
Typ: 'Balken', Balkenbreite: 55, //Legen Sie die Breite jeder Spalte im Balkendiagramm fest: [350, 200, 66, 210, 466, 200, 135]
}]
};
myChart.setOption(option); //Verwende die soeben angegebenen Konfigurationselemente und Daten, um das Diagramm anzuzeigen //Die Rückruffunktion verarbeitet das Mausklickereignis und springt zur entsprechenden Baidu-Suchseite myChart.on('click', function (params) {
var yt = alert("Mausklick-Ereignis, Sie haben gerade geklickt: " + params.name);
Fenster.öffnen('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
window.addEventListener("Größe ändern", Funktion () {
myChart.resize(); // Das Diagramm an die Größe des Fensters anpassen });
myChart.setOption(option); //Daten für eCharts-Objekt laden </script>
</body>
</html>
In ECharts enthalten alle Mausereignisse einen Parameter params. params ist ein Objekt, das die Dateninformationen der angeklickten Grafik enthält. Die grundlegenden Eigenschaften und Bedeutungen von params werden in der Tabelle angezeigt.
Die Rückruffunktion selbst ist ein Parameter der Hauptfunktion. Die Rückruffunktion wird als Parameter an eine andere Hauptfunktion übergeben. Wenn die Hauptfunktion ausgeführt wird, wird die Rückruffunktion ausgeführt. Dieser Vorgang wird Rückruf genannt. Rufen Sie in der Rückruffunktion den Datennamen und den Seriennamen im Objekt ab, indizieren Sie dann andere Informationen in den Daten und aktualisieren Sie anschließend das Diagramm, zeigen Sie die schwebende Ebene an usw. Zeichnen Sie mithilfe der Daten zu Produktverkäufen und Ausgabegewinnen ein Balkendiagramm wie in der Abbildung dargestellt. Wenn Sie im linken Bild auf die Spalte „Produktion“ des zweiten Produkts „Wollpullover“ klicken, wird ein Eingabeaufforderungsdialogfeld wie im rechten Bild dargestellt angezeigt. Aus dem rechten Bild können Sie die Attributinformationen des Parameters „params“ der Spalte „Produktion“ des zweiten Produkts „Wollpullover“ im linken Bild entnehmen.
Der Quellcode der Legende lautet wie folgt:
<html>
<Kopf>
<meta charset="utf-8">
<script type="text/javascript" src='js/echarts.js'></script>
</Kopf>
<Text>
<div id="main" style="Breite: 800px; Höhe: 600px"></div>
<Skripttyp="text/javascript">
//Basierend auf dem vorbereiteten DOM das ECharts-Diagramm initialisieren var myChart = echarts.init(document.getElementById("main"));
var option = { //Geben Sie die Konfigurationselemente und Daten der 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: 'Produktverkaufs-, Produktions- und Gewinnstatistiken', links: 70, oben: 9 },
xAxis: { //Konfiguriere das Koordinatensystem der x-Achse data: ["Hemd", "Pullover", "Chiffonhemd", "Hose", "High Heels", "Socken"]
},
yAxis: {}, //Konfiguriere das Koordinatensystem der y-Achse tooltip: { //Konfiguriere die Komponente des Eingabeaufforderungsfelds trigger: 'item', show: true,
Formatierer: "{a} <br/>{b} : {c}"
},
Legende: {},
Serie: [ //Datenreihe konfigurieren { //Datenreihe festlegen 1: Umsatz Name: 'Umsatz', Typ: 'Balken',
Daten: [5, 28, 16, 20, 15, 33]
},
{ //Datenreihe 2 festlegen: Ausgabename: 'output', Typ: 'bar',
Daten: [15, 38, 20, 24, 20, 45]
},
{ //Datenreihe 3 festlegen: Gewinn Name: 'Gewinn', Typ: 'Balken',
Daten: [25, 15, 10, 10, 15, 22]
}
]
};
myChart.setOption(option); //Verwende die soeben angegebenen Konfigurationselemente und Daten, um das Diagramm anzuzeigen window.addEventListener("resize", function () {
myChart.resize(); // Das Diagramm an die Größe des Fensters anpassen });
//Die Callback-Funktion verarbeitet das Mausklick-Ereignis und zeigt den Dateninformationsinhalt an myChart.on('click', function (params) {
alert("Nr. " + (params.dataIndex + 1) + "Produkt: " + params.name + "von " +
params.seriesName + "ist:" + params.value +
"\n\n 1--Komponententyp:" + params.Komponententyp +
"\n 2--Serientyp:" + params.Serientyp +
"\n 3--Serienindex:" + params.Serienindex +
"\n 4--Serienname:" + params.Serienname +
"\n 5--Name:" + Parameter.Name +
"\n 6--dataIndex:" + params.dataIndex +
"\n 7--Daten:" + params.datax +
"\n 8--Datentyp:" + Parameter.Datentyp +
"\n 9--Wert:" + params.Wert +
"\n 10--Farbe:" + params.color);
});
myChart.setOption(option); //Daten für eCharts-Objekt laden </script>
</body>
</html>
Im Balkendiagrammcode, der die Parameterparams des Mausklickereignisses enthält, können Sie auf die grundlegenden Eigenschaften in den Parameterparams des Mausereignisses zugreifen, indem Sie die Rückruffunktion aufrufen, z. B. params.dataIndex, params.name, params.seriesName, params.value, und in der 12. und 13. Zeile von unten „Das zweite Produkt: Die Ausgabe von Wollpullovern beträgt 38“ anzeigen. Die 11. bis vorletzte Codezeile greift nacheinander auf die 10 grundlegenden Eigenschaften im Mausereignisparameter params zu und zeigt diese nacheinander in jeder Zeile des Eingabeaufforderungsdialogfelds in Abbildung 5–13 an. Beachten Sie, dass die Werte von params.data und params.dataType undefiniert sind. Zusammenfassen Dies ist das Ende dieses Artikels über die Verarbeitung von ECharts-Mausereignissen. Weitere relevante Inhalte zu ECharts-Mausereignissen finden Sie in den vorherigen Artikeln von 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:
|
>>: Detaillierte Schritte zur Implementierung der Timeout-Statusüberwachung in Apache FlinkCEP
Artikel empfehlen
Fehlerbehebung bei Master-Slave-Verzögerungsproblemen beim Upgrade von MySQL 5.6 auf 5.7
Als ich kürzlich die Zabbix-Datenbank von MySQL 5...
Implementierung eines Nginx-Load-Balancing-Clusters
(1) Experimentelle Umgebung youxi1 192.168.5.101 ...
Beispiel für die Verwendung von CSS3 zum Erzielen eines glänzenden Schrifteffekts beim Entsperren eines Apple-Telefons
0. Einleitung 18. August 2016 Heute ist mir aufge...
Detailliertes Tutorial zur Installation der virtuellen Python 3-Umgebung in Ubuntu 20.04
Die folgenden Schritte werden alle auf meiner vir...
Die unangemessenen MaxIdleConns von MySQL führen zu kurzen Verbindungen
1 Hintergrund Vor kurzem sind im Online-Geschäft ...
Lösung für die geringe Schreibeffizienz von unter AIX gemountetem NFS
Von NFS bereitgestellte Dienste Mounten: Aktivier...
Vue verwendet WebSocket, um die Chat-Funktion zu simulieren
Der Effekt zeigt, dass sich zwei Browser gegensei...
Beispielcode mit SCSS in Uni-App
Aufgetroffene Fallstricke Ich habe den ganzen Nac...
So verwenden Sie IDEA zum Konfigurieren von Tomcat und Erstellen von JSP-Dateien
Bevor Sie idea zum Schreiben von JSP-Dateien verw...
Detaillierte Erläuterung zum Upgrade von Python und zur Installation von Pip unter Linux
Upgrade der Linux-Version: 1. Stellen Sie zunächs...
So verwenden Sie Nginx zur Simulation einer Blue-Green-Bereitstellung
Dieser Artikel stellt die Blue-Green-Bereitstellu...
Eine kurze Diskussion über die Rolle von Vue3 defineComponent
Inhaltsverzeichnis defineComponent-Überladungsfun...
Lösen Sie das Problem, dass MySQL „not in“ verwendet, um Nullwerte einzuschließen
Beachten! ! ! Wählen Sie * vom Benutzer, wobei di...
Dekomprimierung, Installation, Sicherung und Wiederherstellung von MySQL in einer Windows-Umgebung
Die Systemumgebung ist Server2012 1. Laden Sie di...
Lösung für das Problem des MySQL-Threads beim Öffnen von Tabellen
Problembeschreibung Vor kurzem gab es einen MySQL...