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 zum Implementieren der Auswahl oder Stornierung von Kontrollkästchen

In diesem Artikel wird der spezifische JavaScript...

Detailliertes Beispiel für das Datenbankbetriebsobjektmodell in Spring jdbc

Detailliertes Beispiel für das Datenbankbetriebso...

MySQL-FAQ-Serie: So vermeiden Sie eine plötzliche Vergrößerung der ibdata1-Datei

0. Einleitung Was ist die ibdata1-Datei? ibdata1 ...

Detaillierte Erläuterung der Systemeingabe- und -ausgabeverwaltung in Linux

Verwaltung der Ein- und Ausgaben im System 1. Ver...

Mehrere Möglichkeiten zum Festlegen der Ablaufzeit von localStorage

Inhaltsverzeichnis Problembeschreibung 1. Basislö...

HTML-Tag Marquee realisiert verschiedene Scroll-Effekte (ohne JS-Steuerung)

Der automatische Bildlaufeffekt der Seite kann du...

So ändern Sie die Master-Slave-Replikationsoptionen in MySQL online

Vorwort: Die am häufigsten verwendete Architektur...

Tutorial zur Installation von RabbitMQ mit Yum auf CentOS8

Geben Sie den Ordner /etc/yum.repos.d/ ein Erstel...

Detaillierte Erklärung zum Javascript-Event-Bubbling, Event-Capture und Event-Delegation

1. Ereignissprudeln : Wenn im Prozess der Ereigni...

Detaillierter Prozess zum Ändern des Hostnamens, nachdem Docker einen Container erstellt hat

Es gibt ein Heilmittel gegen Reue auf der Welt, s...

Der Prozess der Einrichtung einer Umgebung für Integrationstests mit Remote-Docker

Nachfragehintergrund Das Team muss Integrationste...

Proxy realisiert das Prinzip der bidirektionalen Bindung von Vue3-Daten

Inhaltsverzeichnis 1. Vorteile von Proxy gegenübe...

Vorgehensweise bei der Installation einer virtuellen VMware Workstation-Maschine

Virtuelle Maschinen sind eine sehr praktische Tes...

Die Prinzipien und Mängel der MySQL-Volltextindizierung

Der MySQL-Volltextindex ist ein spezieller Index,...

Zusammenfassung des Betriebs und der Wartung von Linux von grundlegenden bis zu fortgeschrittenen Wissenspunkten

Die Arbeit als Betriebs- und Wartungsingenieur is...