Zusammenfassung einiger Probleme, die bei der Integration von E-Charts mit vue.js aufgetreten sind

Vorwort

Ich arbeite derzeit an der Datenanalyseplattform von Beetlex. Während der Entwicklung dieses Produkts sind zahlreiche Funktionen zur Anzeige von Datendiagrammen beteiligt. Da das Frontend des Produkts mit vuejs entwickelt wird, treten bei der Integration von E-Charts mehr oder weniger Probleme auf. Hier werde ich hauptsächlich die aufgetretenen Probleme und ihre Lösungen erläutern.

Bevor ich es erkläre, möchte ich Ihnen die tatsächlichen Auswirkungen bei der Verwendung erläutern. Weitere Einzelheiten finden Sie unter http://data.beetlex.io

Kontroll-ID

In VueJS werden häufig verwendete Funktionen häufig in Komponenten gekapselt. Um verschiedene Diagramme wiederverwenden zu können, werden sie ebenfalls zur Verwendung in Komponenten gekapselt. Bei diesem Kapselungsprozess besteht ein Problem, nämlich das ID-Problem des Diagrammelement-DIV. Daher muss auch die ID des von der Komponente erstellten Diagramm-DIV Eindeutigkeit gewährleisten. Sie können eine ID generieren, indem Sie eine einfache Funktion kapseln

Vue.prototype.$getID = Funktion () {
    Seite.ControlID = Seite.ControlID + 1;
    Seite zurückgeben.ControlID;
};

Mit dieser Methode erhalten Sie die dynamische Element-ID

montiert(){
     dies.ChatID = "chat_" + dies.$getID();
}
<div :id="ChatID">
​
</div>

Initialisierungsproblem

Bei der Verwendung von Vuejs werden einige Initialisierungen häufig in der Methode mount() durchgeführt. Wenn Sie hier jedoch E-Charts initialisieren, müssen Sie vorsichtig sein. Mounted bedeutet schließlich nicht, dass alle Elemente erstellt wurden. Dies führt dazu, dass Elemente nicht abgerufen werden können und E-Charts nicht initialisiert werden können. Daher müssen Sie E-Charts in eine Methode einfügen und sie je nach Situation manuell aufrufen oder den Aufruf zur Initialisierung verzögern. Der Einfachheit halber wird zur Initialisierung setTimeout verwendet.

setzeTimeout(() => {
    var dom = document.getElementById(this.ChatID);
    dies.Chat = echarts.init(dom, 'macarons');
    dies.Chat.setOption(diese.ChatOption, true);
}, 300);

Problem beim Anzeigenwechsel

Wenn Sie die Anzeige eines Diagramms umschalten müssen, sollten Sie am besten keine Syntax wie „v-if“ verwenden, da eine solche Syntax keine zugehörigen Elemente im DOM erstellt, was dazu führt, dass E-Charts Canvas-Elemente erstellen und nicht richtig funktionieren. Am besten ist es, die Anzeige durch CSS-Umschaltung umzustellen, um sicherzustellen, dass der Inhalt der aufgebauten DOM-Elemente nicht verändert wird.

Adaptives Layout

Häufig führen große Änderungen im Formular oder Komponentenwechsel dazu, dass sich E-Charts nicht an das aktuelle Layout anpassen können. In diesem Fall müssen Sie die Größenänderungsmethode von E-Charts manuell aufrufen, um das Anzeigelayout zurückzusetzen. Tatsächlich ist die Situation in SPA-Anwendungen viel komplizierter. Sie verfügen über eine Vollbildanzeige, das Formular muss geändert werden und nach der Komponentenbildung ist sie mehrstufig verschachtelt, sodass es schwierig ist, festzustellen, wo E-Charts verwendet werden. Um den Anforderungen unterschiedlicher Situationen gerecht zu werden, bedarf es eines gemeinsamen Verhaltens, das diese Veränderungen auslöst.

var __resizeHandlers = [];
Funktion __addResizeHandler(Handler) {
    __resizeHandlers.push(handler);
};
Funktion __resize() {
    setzeTimeout(() => {
        __resizeHandlers.forEach(v => {
            v();
        });
    }, 100);
}
Fenster.onresize = Funktion () {
    __resizeHandlers.forEach(v => {
        v();
    });
};
Vue.prototype.$addResize = Funktion (Handler) {
    __addResizeHandler(handler);
};
Vue.prototype.$resize = Funktion () {
    __resize();
};

Implementieren Sie einfach einen einfachen Registrierungs- und Aufrufmechanismus zur Größenänderung und definieren Sie den folgenden Code in der Echarts-Komponente, um das Problem perfekt zu lösen

dies.$addResize(r => {
     wenn (dieser.Chat)
            dies.Chat.resize();
});

Anhang: Echarts herunterladen und verwenden

Sie können ECharts auf folgende Arten erhalten.

1. Holen Sie sich das offizielle Quellcodepaket von der Download-Schnittstelle der offiziellen Website von Apache ECharts (Inkubation) und erstellen Sie es.

2. Holen Sie es sich von ECharts‘ GitHub.

3. Holen Sie sich echarts über npm, npm install echarts --save,

4. Import über CDN wie jsDelivr

Wenn folgende Abbildung erscheint, war der Vorgang erfolgreich.

Einführung

(Voraussetzung für den Download)

1. Importieren Sie die erstellte Echarts-Datei direkt über Tags:

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="utf-8">
    <!-- ECharts-Datei importieren-->
    <script src="echarts.min.js"></script>
</Kopf>
</html>

2. Globale Referenz

In Vues main.js

// E-Charts importieren
E-Charts aus „E-Charts“ importieren
Vue.prototype.$echarts = echarts

3. E-Charts direkt in die Komponente einführen,

(Wenn Sie E-Charts in anderen Komponenten verwenden möchten, müssen Sie sie erneut einführen.)

E-Charts aus „E-Charts“ importieren;

Zusammenfassen

Dies ist das Ende dieses Artikels über die Probleme, die bei der Integration von E-Charts mit vue.js auftreten. Weitere Informationen zu den Problemen bei der Integration von E-Charts mit vue.js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!