Ein Artikel zum Lösen des Echarts-Kartenkarussell-Highlights

Vorwort

Ich war in diesen Tagen mit der Arbeit am Superdatenbildschirm des Unternehmens beschäftigt und finde wirklich keine Zeit, den Artikel ständig zu aktualisieren.

Da ich den Artikel aber schon so lange nicht mehr aktualisiert habe, werde ich hier die Highlights des E-Charts-Kartenkarussells teilen, die ich bei meiner Arbeit häufig verwende.

Der verwendete Technologie-Stack ist vue2.x. Ich glaube, die Wirkung ist jedem klar, also legen wir los.

Aufgabenliste

• Bereiten Sie einfach eine Karte vor
• Speichern Sie die Instanz zur Sicherung
• Stellen Sie den Timer ein
• Festlegen von Mauseingabe- und Mausausgabeereignissen

tun Sie es einfach

Vorbereiten einer Karte

Bereiten Sie zunächst eine einfache Karte vor. Da ich in Guangzhou bin, verwende ich die Karte der Provinz Guangdong.

Ich werde nicht erklären, wie man Karten in E-Charts verwendet. Lesen Sie einfach die Dokumentation und importieren Sie die entsprechende Karten-JSON. Ich glaube, das kann jeder. Übrigens hat mich jemand gefragt, wo man die JSON-Kartendatei finden kann. Wir können in DataV.GeoAtlas nach der gewünschten Stadt suchen und dann die JSON-Datei zum Herunterladen auswählen.

Speichern Sie die Instanz zur Sicherung

Zunächst müssen wir wissen, dass wir, wenn wir das Kartenkarussell hervorheben möchten, die mit eharts gelieferte dispatchActionAPI verwenden müssen. Diese API ist mit der eharts-Instanz zu verwenden. Daher müssen wir in vue die Instanz der Karteninitialisierung zu Beginn speichern.

<Vorlage>
    <div ref="meinChart" id="meinChart" class="gzMap"></div>
</Vorlage>
...
    Daten () {
        zurückkehren {
                Diagramme: '',
                Option:{
                    ...
                }
        };
    },
...
    montiert () {
        this.$echarts.registerMap('Guangdong', gzData);//Kartendaten abrufen this.setMyEchart(); // Ausführen, nachdem die Seite gemountet wurde},
    Methoden:{
        setMyEchart() {
            const myChart = this.$refs.myChart; // Den DOM-Knoten über refif (myChart) abrufen {
                const thisChart = this.$echarts.init(myChart); // Initialisieren mit dem Prototyp Echarts this.charts = thisChart; // Speichern der Instanz thisChart.setOption(this.option); // Mounten der geschriebenen Konfigurationselemente auf Echarts }
        },
    }
...

Wenn wir echarts am Anfang initialisieren, speichern wir die Instanz für die spätere Verwendung. Den Rest der Konfiguration können Sie selbst vornehmen. Der Quellcode wird am Ende des Artikels platziert. Sie können ihn bei Interesse mitnehmen.

Timer-Karussell einstellen

Weil Sie die Karussell-Hervorhebung einstellen müssen, bedeutet das, dass Sie ihr eine festgelegte Zeit zum Aufleuchten geben und dann ein Eingabeaufforderungsfeld erscheinen lassen. Standardmäßig hat jetzt jeder die normale Hervorhebung und das Eingabeaufforderungsfeld beim Berühren mit der Maus eingerichtet.

Richten Sie zunächst eine Timermethode ein, rufen Sie dann die darin enthaltene offizielle Hervorhebungsmethode und Promptbox-Methode auf und lassen Sie sie innerhalb der angegebenen Zeit aufblitzen.

...
    Daten () {
        zurückkehren {
                mZeit: '',
                Diagramme: '',
                Index: -1,
                Option:{
                    ...
                }
        };
    },
...
    Methoden:{
        setMyEchart() {
            ...
            dies.mapActive();
            ...
        },
        mapActive() {
            const dataLength = gzData.features.length;
            // Mit Timer die Hervorhebung steuern this.mTime = setInterval(() => {
                // Vorherige Hervorhebung löschen this.charts.dispatchAction({
                    Typ: 'Herunterspielen',
                    SerienIndex: 0,
                    Datenindex: dieser.index
                });
                dies.index++;
                // Der aktuelle Index wird hervorgehoben this.charts.dispatchAction({
                    Typ: "Hervorhebung",
                    SerienIndex: 0,
                    Datenindex: dieser.index
                });
                diese.charts.dispatchAction({
                    Typ: "showTip",
                    SerienIndex: 0,
                    Datenindex: dieser.index
                });
                wenn (dieser.index > Datenlänge) {
                    dieser.index = 0;
                }
            }, 2000);
        },
    }

Wir richten zunächst einen Container ein, um den Timer und einen Indexindex in den Daten zu empfangen, um darzustellen, welche Stadt hervorgehoben wird.

Holen Sie sich in mapActive() zuerst die dataLength aller Städte auf dieser Karte, da dispatchAction die Hervorhebung entsprechend dem Index umschaltet. Wenn unsere Indexnummer größer als die Anzahl der Städte ist, wird sie nicht angezeigt. Daher müssen wir inedx so steuern, dass es unter der Anzahl aller Städte liegt.

Stellen Sie den Timer so ein, dass zuerst die zuvor markierten Städte gelöscht werden. Wenn Sie sie nicht löschen, werden mehrere Städte gleichzeitig hervorgehoben, was nicht der gewünschte Effekt ist.

Rufen Sie dann in unserem Beispiel die eharts-Methode auf, um Hervorhebungen und Eingabeaufforderungsfelder zu erzielen. Dabei empfängt dispatchAction mehrere Parameter und type gibt den Typ an, den Sie präsentieren möchten, z. B. Hervorhebungen oder Eingabeaufforderungsfelder. Einzelheiten finden Sie auf der offiziellen Website.

Zum Schluss prüfen wir, ob der Index die Anzahl der Städtedaten überschreitet. Wenn ja, setzen wir ihn auf Null zurück und beginnen von vorne. An diesem Punkt ist unser Karussell-Highlight abgeschlossen.

Hinzufügen von Mausereignissen

Natürlich können wir es nicht einfach so beenden, wir müssen einige Ereigniseffekte hinzufügen. Wenn wir beispielsweise die Maus in die Karte bewegen, stoppt das Karussell und hebt nur die von uns ausgewählte Stadt hervor.

    Methoden:{
        setMyEchart() {
            ...
            dies.mapActive();
            ...
        },
        Mausereignisse() {
            // Maus betritt this.charts.on('mouseover', () => {
                // Stoppen Sie den Timer und löschen Sie die vorherige Hervorhebung. clearInterval(this.mTime);
                dies.mTime = '';
                Konsole.log(diese.mTime);
                diese.charts.dispatchAction({
                        Typ: 'Herunterspielen',
                        SerienIndex: 0,
                        Datenindex: dieser.index
                });
            });
            // Der Mouse-Out-Re-Timer startet this.charts.on('mouseout', () => {
                diese.mapActive();
            });
        },
      }

Sie können sehen, dass wir ein Ereignis für die Mauseingabe hinzugefügt haben. Wenn wir die Maus auf die Karte bewegen, wird die Stadt mit dem vorherigen entsprechenden Index gelöscht. Natürlich reicht es nicht aus, nur eine Mauseingabe hinzuzufügen. Auf diese Weise wird die Maus nicht weiter gedreht und hervorgehoben, wenn wir sie einmal bewegen. Wir müssen auch ein weiteres Mausausgangsereignis hinzufügen, um den Timer neu zu starten.

An diesem Punkt ist ein einfaches Highlight-Karussell fertig. Ich habe den spezifischen Quellcode hier eingefügt.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Highlights des Echarts-Kartenkarussells. Weitere relevante Highlights des Echarts-Kartenkarussells finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!