Detaillierte Erklärung zum Hinzufügen eines Klickereignisses im Echarts-Tooltip in Vue

Detaillierte Erklärung zum Hinzufügen eines Klickereignisses im Echarts-Tooltip in Vue

brauchen

Sie müssen im E-Charts-Tooltip auf den Namen der Schule klicken, um zur Detailseite zu springen. Das Projekt ist in Shanghai ---> einem bestimmten Bezirk ----> einer bestimmten Schule (binden Sie ein Klickereignis in den Tooltip der letzten Ebene ein).

Das Projekt wird mit Vue und Echarts implementiert. Echarts ist eine neue Version (^5.0.2) und kann Klickereignisse nicht an Fenster binden.

Problemumgehung

1. Tooltip festlegen

enterable: true, //Erlaubt der Maus, die schwebende Ebene der Eingabeaufforderung zu betreten, triggeron:'click', //Bedingungen für das Auslösen der Eingabeaufforderungsbox mousemove wird ausgelöst, wenn die Maus bewegt wird click wird ausgelöst, wenn die Maus klickt 'mousemove|click' wird ausgelöst, wenn die Maus bewegt und gleichzeitig geklickt wird

Tooltip: {
          //Promptbox-Komponente anzeigen: true, //Promptbox-Komponente anzeigen: "item", //Triggertyp: triggerOn: "mousemove", //Abgangsbedingung//formatter: "name: {b}<br/>coordinates: {c}",
          enterable: true, //Ermöglicht der Maus, die Eingabeaufforderungs-Suspendierungsebene zu betreten showContent: true,
          triggerOn: "click", //Bedingungen für das Auslösen des Tooltips mousemove Wird ausgelöst, wenn die Maus bewegt wird click Wird ausgelöst, wenn die Maus klickt 'mousemove|click' Wird ausgelöst, wenn die Maus bewegt und gleichzeitig klickt // confine: true, //Beschränke den ToolTip auf den Bereich des Diagramms className: "areaTool",
          // hideDelay: 100000, //Verzögerung der Verschwindezeit formatter: (item) => {
            this.hookToolTip = Element;
            // Längen- und Breitengrad sind zu lang, daher muss die Anzahl der Ziffern gekürzt und angezeigt werden, wobei sieben Dezimalstellen erhalten bleiben müssen // Das Klickereignis muss gebunden werden var tipHtml = "";
            tipHtml =
              '<div style="width:2.5rem;height:80%;background:rgba(22,80,158,0.8);border:0.0125rem solid rgba(7,166,255,0.7)">' +
              '<div style="width:100%;height:0.375rem;line-height:0.375rem;border-bottom:0.025rem solid rgba(7,166,255,0.7);">' +
              '<i style="display:inline-block;width:0.125rem;height:0.125rem;background:#16d6ff;border-radius:0.5rem;">' +
              "</i>" +
              '<span id="btn-tooltip" style="margin-left:0.125rem;color:#fff;font-size:0.2rem;cursor:pointer">' +   
              Artikelname +
              "</span>" +
              "</div>" +
              '<div style="padding:0.1875rem;text-align: left;">' +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="Anzeige: Inline-Block; Breite: 0,1rem; Höhe: 0,1rem; Hintergrund: #16d6ff; Rahmenradius: 0,5rem; Rand: 0 0,1rem">' +
              "</i>" +
              "Längengrad" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              Artikel.Wert[0].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="Anzeige: Inline-Block; Breite: 0,1rem; Höhe: 0,1rem; Hintergrund: #16d6ff; Rahmenradius: 0,5rem; Rand: 0 0,1rem">' +
              "</i>" +
              "Breitengrad" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              Artikel.Wert[1].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="Anzeige: Inline-Block; Breite: 0,1rem; Höhe: 0,1rem; Hintergrund: #16d6ff; Rahmenradius: 0,5rem; Rand: 0 0,1rem">' +
              "</i>" +
              "Anzahl der Prüfungsräume" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              Element.KomponentenIndex +
              "</span>" +
              "Stück" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="Anzeige: Inline-Block; Breite: 0,1rem; Höhe: 0,1rem; Hintergrund: #16d6ff; Rahmenradius: 0,5rem; Rand: 0 0,1rem">' +
              "</i>" +
              "Aufsicht" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              Element.KomponentenIndex +
              "</span>" +
              "Stück" +
              "</p>";

            tipHtml zurückgeben;
          },
        },

2. Definieren Sie die Variable hookToolTip

Weisen Sie hookToolTip im Formatierer einen Wert zu, fügen Sie eine ID hinzu und erkennen Sie dann das DOM-Element durch Überwachen. Sie können das Ereignis durch Onclick binden oder das Ereignis durch addEventListener registrieren. 

betrachten:
    hookToolTip: {
      handler(neuerWert, alterWert) {
        console.log(neuerWert, alterWert, "---------watch");
        : Let tooltipButton = document.querySelectorAll("#btn-tooltip");
        //Das durch die Registrierung des Onclick-Ereignisses querySelectorAll erhaltene Element ist ein Array, wenn (tooltipButton.length > 0) {
          tooltipButton[0].onclick = dieser.pointNameClick;
        }
        // Ereignisse über addEventListener registrieren for (let i = 0; i < tooltipButton.length; i++) {
          tooltipButton[i].addEventListener("klicken", this.chartClick);
        }
      },
      // sofort: wahr,
      // tief: wahr,
    },
  },

3. Methoden in Methoden hinzufügen

4. Code vervollständigen

Daten(){
       hookToolTip: {},     
},

  betrachten:
    hookToolTip: {
      handler(neuerWert, alterWert) {
        console.log(neuerWert, alterWert, "---------watch");
        : Let tooltipButton = document.querySelectorAll("#btn-tooltip");
        //Das durch die Registrierung des Onclick-Ereignisses querySelectorAll erhaltene Element ist ein Array, wenn (tooltipButton.length > 0) {
          tooltipButton[0].onclick = dieser.pointNameClick;
        }
        // Ereignisse über addEventListener registrieren for (let i = 0; i < tooltipButton.length; i++) {
          tooltipButton[i].addEventListener("klicken", this.chartClick);
        }
      },
      //Keine Notwendigkeit, die Seite zum Prüfen aufzurufen// instant: true,
      // tief: wahr,
    },
  },

  Methoden: {
    chartClick() {
      konsole.log(
        dies.hookToolTip,
        "----------Ereignisliste hinzufügen",
        dies.hookToolTip.name
      );
    },
 },

    
//echarts
      Tooltip: {
          //Promptbox-Komponente anzeigen: true, //Promptbox-Komponente anzeigen: "item", //Triggertyp: triggerOn: "mousemove", //Abgangsbedingung//formatter: "name: {b}<br/>coordinates: {c}",
          enterable: true, //Ermöglicht der Maus, die Eingabeaufforderungs-Suspendierungsebene zu betreten showContent: true,
          triggerOn: "click", //Bedingungen für das Auslösen des Tooltips mousemove Wird ausgelöst, wenn die Maus bewegt wird click Wird ausgelöst, wenn die Maus klickt 'mousemove|click' Wird ausgelöst, wenn die Maus bewegt und gleichzeitig klickt // confine: true, //Beschränke den ToolTip auf den Bereich des Diagramms className: "areaTool",
          // hideDelay: 100000, //Verzögerung der Verschwindezeit formatter: (item) => {
            this.hookToolTip = Element;
            Konsole.log(Element, "-----", this.hookToolTip);
            // Längen- und Breitengrad sind zu lang, daher muss die Anzahl der Ziffern gekürzt und angezeigt werden, wobei sieben Dezimalstellen erhalten bleiben müssen // Das Klickereignis muss gebunden werden var tipHtml = "";
            tipHtml =
              '<div style="width:2.5rem;height:80%;background:rgba(22,80,158,0.8);border:0.0125rem solid rgba(7,166,255,0.7)">' +
              '<div style="width:100%;height:0.375rem;line-height:0.375rem;border-bottom:0.025rem solid rgba(7,166,255,0.7);">' +
              '<i style="display:inline-block;width:0.125rem;height:0.125rem;background:#16d6ff;border-radius:0.5rem;">' +
              "</i>" +
              '<span id="btn-tooltip" style="margin-left:0.125rem;color:#fff;font-size:0.2rem;cursor:pointer" onclick="chartClick">' +
              Artikelname +
              "</span>" +
              "</div>" +
              '<div style="padding:0.1875rem;text-align: left;">' +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="Anzeige: Inline-Block; Breite: 0,1rem; Höhe: 0,1rem; Hintergrund: #16d6ff; Rahmenradius: 0,5rem; Rand: 0 0,1rem">' +
              "</i>" +
              "Längengrad" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              Artikel.Wert[0].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="Anzeige: Inline-Block; Breite: 0,1rem; Höhe: 0,1rem; Hintergrund: #16d6ff; Rahmenradius: 0,5rem; Rand: 0 0,1rem">' +
              "</i>" +
              "Breitengrad" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              Artikel.Wert[1].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="Anzeige: Inline-Block; Breite: 0,1rem; Höhe: 0,1rem; Hintergrund: #16d6ff; Rahmenradius: 0,5rem; Rand: 0 0,1rem">' +
              "</i>" +
              "Anzahl der Prüfungsräume" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              Element.KomponentenIndex +
              "</span>" +
              "Stück" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="Anzeige: Inline-Block; Breite: 0,1rem; Höhe: 0,1rem; Hintergrund: #16d6ff; Rahmenradius: 0,5rem; Rand: 0 0,1rem">' +
              "</i>" +
              "Aufsicht" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              Element.KomponentenIndex +
              "</span>" +
              "Stück" +
              "</p>";

            tipHtml zurückgeben;
          },
        },

Dies ist das Ende dieses Artikels über das Hinzufügen eines Klickereignisfalls in Echarts-Tooltips durch Vue. Weitere Vue-bezogene Inhalte 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:
  • Vue implementiert die dynamische Zuweisung von IDs und Klickereignissen, um die ID-Operation des aktuell angeklickten Elements abzurufen
  • Detaillierte Erklärung des Unterschieds zwischen der Parameterübergabe und der Nichtübergabe von Parametern in Vue-Klickereignissen
  • VUE löst das Problem, dass v-html keine Klickereignisse auslösen kann
  • Vue v-for-Schleife @click Klickereignis zum Abrufen eines Elementbeispiels
  • Holen Sie sich die globale Klickereignismethode in der Vue-Komponente
  • So erhalten Sie die Quelle des Klickereignisses in Vue
  • Vue-Methode zum Lesen von Audiodateien durch Klickereignisse
  • Lösen Sie das Problem ungültiger Klickereignisse im Vue-Bindungsobjekt
  • Vue-Projekt führt Echarts ein, um Klickereignisoperationen hinzuzufügen
  • Vue verwendet Hightcharts, um das Legenden-Klickereignis anzupassen

<<:  Beispiel für asynchronen Dateiupload in HTML

>>:  20 hervorragende Beispiele für die Farbabstimmung auf ausländischen Webseiten

Artikel empfehlen

Zusammenfassung von 6 Lösungen zur Implementierung des Singleton-Modus in JS

Vorwort Heute habe ich das Erzeugungsmuster im En...

Austausch von Forschungserfahrungen zur Verwendung von Zeichen anstelle von abgerundeten und scharfen Ecken

1. Die Beziehung zwischen Schriftarten und Zeiche...

SQL-Implementierung von LeetCode (196. Doppelte Postfächer löschen)

[LeetCode] 196.Doppelte E-Mails löschen Schreiben...

Detaillierte Erläuterung der Verwendung des Nginx-Reverse-Proxys zur Lösung domänenübergreifender Probleme

Frage Im vorherigen Artikel zur domänenübergreife...

Ein Artikel, der Ihnen hilft, mehr über JavaScript-Arrays zu erfahren

Inhaltsverzeichnis 1. Die Rolle des Arrays: 2. De...

Analyse und Lösung des a.getAttribute(href,2)-Problems in IE6/7

Kurzbeschreibung <br />In IE6 und 7 wird in...

Einfaches Beispiel für die Leistungsoptimierung von MySQL-SQL-Anweisungen

Einfaches Beispiel für die Leistungsoptimierung v...

So verwenden Sie den EXPLAIN-Befehl in SQL

Bei unserer täglichen Arbeit führen wir manchmal ...

Teilen Sie die Fallstricke von MySQLs current_timestamp und ihre Lösungen

Inhaltsverzeichnis MySQLs current_timestamp-Falle...

So verwenden Sie den Linux-Befehl md5sum

01. Befehlsübersicht md5sum - MD5-Prüfcode berech...

HTML verwendet Laufschrift, um Text nach links und rechts scrollen zu lassen

Code kopieren Der Code lautet wie folgt: <KÖRP...

Verlustfreie Erweiterungsmethode unter Linux

Überblick Der Server des Cloud-Plattform-Kunden k...

Einige wichtige Einstellungsänderungsdatensätze beim Upgrade von kubernetes1.5.2 auf kubernetes1.10

Dieser Artikel zeichnet einige wichtige Einstellu...

MySQL-Fall beim Gruppieren nach Beispiel

Eine MySQL-ähnliche PHP-Switch-Case-Anweisung. wä...

Docker-Batch starten und alle Container schließen

Im Docker Starten Sie alle Containerbefehle Docke...