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

JavaScript-Grundlagenreihe: Funktionen und Methoden

Inhaltsverzeichnis 1. Der Unterschied zwischen Fu...

Einführung und Architektur von Apache Arrow, einem leistungsstarken Datenformatbibliothekspaket auf JVM (Gkatziouras)

Apache Arrow ist ein beliebtes Format, das von ve...

JS ES: Neue Funktion zur variablen Entkopplungszuweisung

Inhaltsverzeichnis 1. Entkoppelte Zuweisung von A...

So löschen Sie schwebenden Beispielcode in CSS

Überblick Das Rahmendiagramm dieses Artikels ist ...

Popularisierung der Theorie – Benutzererfahrung

1. Konzeptanalyse 1: UE User Experience <br /&...

Detaillierte Erläuterung des MySQL Master-Slave-Replikationsprozesses

1. Was ist Master-Slave-Replikation? Die DDL- und...

Docker installiert Elasticsearch7.6-Cluster und legt Passwort fest

Ab Elasticsearch 6.8 dürfen kostenlose Benutzer d...

Implementierung des Seitenumblättereffekts durch Gleiten und des Klickereignisproblems auf dem mobilen Endgerät

vorgenannt Dieser Artikel ist sehr kurz~ Der Haup...

HTML-Optimierungstechniken, die Sie kennen müssen

Um die Leistung von Webseiten zu verbessern, begi...

Detaillierte Erklärung der Lösung für die Baidu-https-Authentifizierungsaufforderung „Bitte leiten Sie Ihre http-Site 301 auf die https-Site um“

Ich wollte vor Kurzem eine Website auf https-Zugr...

Beispiel zur Identifizierung des Benutzers mithilfe eines Linux-Bash-Skripts

In Bash-Skripten oder direkt im Skript selbst ist...

Ein Beispiel für die Verwendung von nginx zum Konfigurieren mehrerer Laravel-Projekte mit einem Domänennamen

Hintergrund Da die Anzahl der Unterprojekte des U...

Beispielcode zur Implementierung eines Waben-/Sechseckatlas mit CSS

Ich weiß nicht warum, aber UI gestaltet gerne Wab...

CSS3 verwendet die Übergangseigenschaft, um Übergangseffekte zu erzielen

Detaillierte Beschreibung der Eigenschaften Der Z...

VMware12.0-Installation Ubuntu14.04 LTS-Tutorial

Ich habe verschiedene Images sowohl unter virtuel...