Heim > Artikel > Web-Frontend > Einführung in responsive React Native Echarts-Komponenten
Einführung in responsive React Native Echarts-Komponenten
- 不言Original
- 2018-07-14 11:17:562043Durchsuche
Dieser Artikel stellt hauptsächlich die Einführung von responsiven React Native Echarts-Komponenten vor. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen.
In den letzten Jahren Die Anforderungen an die Datenvisualisierung werden immer höher und herkömmliche Diagrammbibliotheken wie MPAndroidChart können den zunehmend ungewöhnlichen Anforderungen von Produktmanagern nicht mehr gerecht werden. Die Entwicklung der Datenvisualisierung im Front-End-Bereich ist relativ erfolgreich. Die Verwendung einer leistungsstarken Front-End-Datenvisualisierungsbibliothek wie Echarts auf dem mobilen Endgerät über WebView ist eine gute Möglichkeit, das Problem zu lösen.
Da in der React Native-Entwicklung dieselbe JavaScript-Sprache wie im Front-End verwendet wird, verläuft die Verbindung von Echarts relativ reibungslos, aber einige notwendige Komponentenkapselungen können die Entwicklungseffizienz dennoch erheblich verbessern.
Echarts hat offiziell eine Verpackungsbibliothek eines Drittanbieters empfohlen: React-Native-Echarts (Hinweis: Der entsprechende NMP-Paketname lautet Native-Echarts. Sie hat derzeit mehr als 400 Sterne und mehr als 100 wöchentliche Downloads.) gesehen werden Es ist immer noch weit verbreitet. Nach unserer Untersuchung haben wir jedoch festgestellt, dass React-Native-Echarts die folgenden Probleme aufweist:
Die Echarts-Version wurde seit mehr als einem halben Jahr nicht mehr aktualisiert 3.0. Für die Android-Verpackung ist das manuelle Hinzufügen von Assets erforderlich.
Die Schnittstellenflexibilität der Bibliothek ist gering, die Größe kann beispielsweise nur über Breite und Höhe eingestellt werden ; das Echarts-Erweiterungspaket kann nicht verwendet werden; Ereignisregistrierung, WebView-Kommunikation usw. können nicht durchgeführt werden
Da die Verwendung von WebView zum Kapseln von Echarts lokales HTML beinhaltet, handelt es sich nicht um eine reine JavaScript-Sprachebene Funktion, und es gibt keinen nativen Code, daher ist es keine gute Wahl, es in ein NMP-Paket zu schreiben. Schreiben Sie es in die internen Komponenten des Projekts, es ist eine bequemere und flexiblere Lösung, es selbst zu konfigurieren.
Deshalb haben wir uns entschieden, die Verpackungsbibliothek Echarts eines Drittanbieters nicht zu verwenden und selbst ein universelles Komponenten-WebChart zu schreiben. Um die Verwendung während der Entwicklung zu erleichtern, verfügt diese Komponente über die folgenden Eigenschaften:
-
Sie ist auf Reaktionsfähigkeit ausgelegt. Sie müssen lediglich die Datenquelle in der Option und das Diagramm konfigurieren Wird automatisch aktualisiert, wenn sich die Daten entsprechend dem Stil von React ändern.
Unsere Lösung besteht darin, bei jeder Aktualisierung der Komponente festzustellen, ob sich der Parameter der eingehenden Option geändert hat. Wenn die Änderung auftritt, übergeben Sie webView.postMessage und übergeben Sie die neue Option in Form von JSON, um Echarts erneut an setOption zu benachrichtigen .
Obwohl Echarts selbst Optionen vergleicht, kann eine Vorabbeurteilung die durch Aktualisierungen verursachte häufige Kommunikation mit WebView reduzieren. Dies ist immer noch offensichtlich, wenn in der übergeordneten Containerkomponente eine große Anzahl von Aktualisierungen vorliegt nutzt die setOption von Echarts selbst, ohne das gesamte WebView neu zu laden
Mithilfe der postMessage- und onMessage-Schnittstellen von WebView kann die Ereigniskommunikation zwischen Diagrammen und anderen React Native-Komponenten realisiert werden
Sie können WebView jedes Skript über den exScript-Parameter der Komponente hinzufügen, der flexibel zu verwenden ist
Da es sich um eine selbst geschriebene Komponente handelt, ist die Echarts-Version Erweiterungspaket, SVG/Canvas, Daten Inkrementelles Laden kann selbst eingestellt werden
Demo und Verwendung
Nutzung und Beispiele finden Sie unter: React-Native-Echarts- Demo, wenn Sie es direkt verwenden müssen, können Sie es gemäß den folgenden Schritten transplantieren:
Kopieren Sie den WebChart-Komponentenordner im Stammverzeichnis an einen geeigneten Ort in Ihrem Projekt
Ändern Sie /android. Kopieren Sie den Ordner /app/src/main/assets/web an denselben Speicherort wie Ihr Projekt. Es gibt keinen Assets-Ordner, der manuell erstellt werden muss.
Sie benötigen nur die beiden oben genannten Schritte, um die WebChart-Komponente in Ihrem Projekt zu verwenden.
Wenn Sie weitere Anpassungen benötigen, befindet sich der Echarts-Code im -Tag in den beiden oben genannten Ordnern. Derzeit ist es die 4.0-Vollversion ohne Erweiterungspaket Um die erforderlichen Versionen und Erweiterungspakete von der offiziellen Website herunterzuladen und zu ersetzen, können SVG/Canvas, inkrementelles Laden von Daten usw. direkt in WebChart/index.js geändert werden. Auf der mobilen Seite verwenden wir aus Leistungsgründen grundsätzlich den SVG-Rendering-Modus.
Informationen zur spezifischen Verwendung von WebChart finden Sie in App.js. Die Stileinstellung ist die gleiche wie bei normalen React Native-Komponenten. Sie können Flex verwenden oder einen festen Wert festlegen. Drei zusätzliche Parameter:
option(object): Das setOption zugewiesene Parameterobjekt. Nach Änderungen ruft WebChart automatisch setOption intern auf, um eine reaktionsfähige Aktualisierung zu erreichen. Achten Sie besonders darauf, dass Funktionen während der JSON-Analyse nicht verarbeitet werden. Daher müssen Sie die Verwendung von Funktionsformatierern und klassenbasierten LinearGradienten vermeiden. Verwenden Sie einfach Vorlagen und gewöhnliche Objekte wie die Demo
exScript (Zeichenfolge): Jeder Code, den Sie beim Laden von WebView ausführen möchten, normalerweise Ereignisregistrierung und dergleichen. Es wird empfohlen, Vorlagenliterale zu verwenden
onMessage(function): WebView löst intern postMessage aus Für nachfolgende Rückrufe muss postMessage zunächst in exScript für die Kommunikation zwischen Diagrammen und anderen React Native-Komponenten eingerichtet werden
Natürlich sind dies Parameter, die auf unseren Geschäftsanforderungen basieren. Sie können es tun Frei zum Zurücksetzen.
Kommunikation zwischen Echarts und React Native-Komponenten
In der WebView-Komponente von React Native werden onMessage und postMessage für die bidirektionale Kommunikation zwischen HTML und Komponenten bereitgestellt. Informationen zur spezifischen Verwendung finden Sie in der Dokumentation .
Mit webView.postMessage benachrichtigt WebChart Echarts, setOption in exScript auszuführen. window.postMessage kann verwendet werden, um Echarts-Ereignisse an React Native-Komponenten zu kommunizieren.
Im Allgemeinen sind wir uns einig, dass die Kommunikationsdaten ein Objekt in diesem Format sind:
{
type: 'someType',
payload: {
value: 111,
},
}
Da onMessage und postMessage nur Zeichenfolgen übertragen können, ist in exScript eine JSON-Serialisierung erforderlich, ähnlich wie folgt:
exScript={`
chart.on('click', (params) => {
if(params.componentType === 'series') {
window.postMessage(JSON.stringify({
type: 'select',
payload: {
index: params.dataIndex,
},
}));
}
});
`}
Das Obige ist die von uns gekapselte responsive WebChart-Komponente und ihre Verwendung. Den vollständigen Code finden Sie unter: React-Native-Echarts-Demo.
Im Einsatz gibt es noch einige ungelöste Fallstricke, die derzeit nur umgangen werden können. Studierende, die sich damit auskennen, können diese gerne beheben:
Unter IOS scheint Echarts zu rendern. Es gibt keinen transparenten Effekt und die mit RGBA eingestellte Farbe kann nicht richtig funktionieren
Die style.height-Eigenschaft von React Natives WebView scheint ungültig zu sein Ich muss eine Ansicht außerhalb festlegen
Gemäß der aktuellen Methode zum Laden von Ressourcen gibt es auf Android zwei Kopien von index.html. Da die Plattform zur Laufzeit beurteilt wird, müssen Assets manuell hinzugefügt werden, auch wenn index.anroid.js und index.ios.js separat festgelegt sind Der Code von Echarts muss inline in index.html eingefügt werden. Der externe Verweis auf eine separate js-Datei scheint ungültig zu sein.
Das Obige ist der gesamte Inhalt dieses Artikels Seien Sie hilfreich für das Lernen aller. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!
Verwandte Empfehlungen:
Das obige ist der detaillierte Inhalt vonEinführung in responsive React Native Echarts-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!