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

So wählen Sie den richtigen Index in MySQL

Schauen wir uns zunächst eine Kastanie an EXPLAIN...

Wie Sie React forwardRef verwenden und was Sie beachten müssen

Bisher konnte react.forwardRef nicht auf höherwer...

Sekundäre Kapselung des Elements el-table table (mit Tischhöhenanpassung)

Vorwort Während meines Praktikums in der Firma ha...

HTML-Tabellen-Tag-Tutorial (45): Tabellen-Body-Tag

Mit dem Tag <tbody> wird der Stil des Tabel...

Vue+echarts realisiert Fortschrittsbalken-Histogramm

In diesem Artikel wird der spezifische Code von v...

So stellen Sie ein Vue-Projekt mit Docker-Image + nginx bereit

1. Vue-Projekt verpacken Geben Sie den folgenden ...

Analyse des Unterschieds zwischen absolutem und relativem Pfad in HTML

Wie in der Abbildung gezeigt: Mit einer einzelnen ...

Installieren Sie Docker unter CentOS 7

Wenn Sie kein Linux-System haben, finden Sie unte...

Zusammenfassung der relevanten Wissenspunkte zu Ajax in jQuery

Vorwort Studenten, die JavaScript lernen, wissen,...

Der Unterschied zwischen Docker Run und Start

Der Unterschied zwischen Ausführen und Starten in...

CSS-Methode zur Steuerung der Elementhöhe von unten nach oben und von oben nach unten

Beginnen wir die Diskussion mit einer häufig gest...

Detaillierte Erläuterung der kostenlosen AWS-Serveranwendung und des Tutorials zur Einrichtung eines Netzwerkproxys

Inhaltsverzeichnis Vorsichtsmaßnahmen Notwendige ...

Das WeChat-Applet realisiert eine Links-Rechts-Verknüpfung

In diesem Artikel wird der spezifische Code für d...

Prozessdiagramm zum Aufbau des Linux RabbitMQ-Clusters

1. Allgemeine Schritte Zu Beginn haben wir die In...

Lassen Sie uns ausführlich über den Vue-Lebenszyklus sprechen

Inhaltsverzeichnis Vorwort 1. Lebenszyklus in Vue...