Einführung in responsive React Native Echarts-Komponenten
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
So verwenden Sie die PHP-Schnittstelle und ECharts, um visuelle statistische Diagramme zu erstellen
Dec 18, 2023 am 11:39 AM
In der heutigen Zeit, in der die Datenvisualisierung immer wichtiger wird, hoffen viele Entwickler, mithilfe verschiedener Tools schnell verschiedene Diagramme und Berichte erstellen zu können, damit sie Daten besser anzeigen und Entscheidungsträgern helfen können, schnelle Urteile zu fällen. In diesem Zusammenhang kann die Verwendung der PHP-Schnittstelle und der ECharts-Bibliothek vielen Entwicklern dabei helfen, schnell visuelle statistische Diagramme zu erstellen. In diesem Artikel wird detailliert beschrieben, wie Sie mithilfe der PHP-Schnittstelle und der ECharts-Bibliothek visuelle statistische Diagramme erstellen. In der spezifischen Implementierung werden wir MySQL verwenden
Schritte zum Zeichnen eines Dashboards mithilfe der ECharts- und Python-Schnittstelle
Dec 18, 2023 am 08:40 AM
Für die Schritte zum Zeichnen eines Dashboards mit ECharts und der Python-Schnittstelle sind spezifische Codebeispiele erforderlich. Zusammenfassung: ECharts ist ein hervorragendes Datenvisualisierungstool, das problemlos Datenverarbeitung und Grafikzeichnung über die Python-Schnittstelle durchführen kann. In diesem Artikel werden die spezifischen Schritte zum Zeichnen eines Dashboards mithilfe der ECharts- und Python-Schnittstelle vorgestellt und Beispielcode bereitgestellt. Schlüsselwörter: ECharts, Python-Schnittstelle, Dashboard, Datenvisualisierung Einführung Dashboard ist eine häufig verwendete Form der Datenvisualisierung
So verwenden Sie die Karten-Heatmap, um die Stadtwärme in ECharts anzuzeigen
Dec 18, 2023 pm 04:00 PM
So verwenden Sie eine Karten-Heatmap zur Anzeige der Stadtwärme in ECharts ECharts ist eine leistungsstarke visuelle Diagrammbibliothek, die Entwicklern verschiedene Diagrammtypen zur Verwendung bereitstellt, einschließlich Karten-Heatmaps. Karten-Heatmaps können verwendet werden, um die Beliebtheit von Städten oder Regionen anzuzeigen und uns dabei zu helfen, die Beliebtheit oder Dichte verschiedener Orte schnell zu verstehen. In diesem Artikel wird erläutert, wie Sie die Kartenwärmekarte in ECharts zur Anzeige der Stadtwärme verwenden, und es werden Codebeispiele als Referenz bereitgestellt. Zuerst benötigen wir eine Kartendatei mit geografischen Informationen, EC
So verwenden Sie Kalenderdiagramme zur Anzeige von Zeitdaten in ECharts
Dec 18, 2023 am 08:52 AM
So verwenden Sie Kalenderdiagramme zur Anzeige von Zeitdaten in ECharts ECharts (Baidus Open-Source-JavaScript-Diagrammbibliothek) ist ein leistungsstarkes und benutzerfreundliches Datenvisualisierungstool. Es bietet eine Vielzahl von Diagrammtypen, darunter Liniendiagramme, Balkendiagramme, Kreisdiagramme und mehr. Das Kalenderdiagramm ist ein sehr markanter und praktischer Diagrammtyp in ECharts, der zur Darstellung zeitbezogener Daten verwendet werden kann. In diesem Artikel wird die Verwendung von Kalenderdiagrammen in ECharts vorgestellt und spezifische Codebeispiele bereitgestellt. Zuerst müssen Sie verwenden
Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode
Jan 05, 2024 pm 06:08 PM
JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest
So verwenden Sie ECharts und die PHP-Schnittstelle zum Erstellen statistischer Diagramme
Dec 18, 2023 pm 01:47 PM
So verwenden Sie ECharts- und PHP-Schnittstellen zum Erstellen statistischer Diagramme. Einführung: In der modernen Webanwendungsentwicklung ist die Datenvisualisierung ein sehr wichtiger Link, der uns dabei helfen kann, Daten intuitiv anzuzeigen und zu analysieren. ECharts ist eine leistungsstarke Open-Source-JavaScript-Diagrammbibliothek. Sie bietet eine Vielzahl von Diagrammtypen und umfangreiche interaktive Funktionen und kann problemlos verschiedene statistische Diagramme erstellen. In diesem Artikel wird die Verwendung von ECharts und PHP-Schnittstellen zum Generieren statistischer Diagramme vorgestellt und spezifische Codebeispiele gegeben. 1. Überblick über ECha
Ist ECharts von jQuery abhängig? Tiefenanalyse
Feb 27, 2024 am 08:39 AM
Muss sich ECharts auf jQuery verlassen? Eine detaillierte Interpretation erfordert spezifische Codebeispiele. ECharts ist eine hervorragende Datenvisualisierungsbibliothek, die eine große Auswahl an Diagrammtypen und interaktiven Funktionen bietet und in der Webentwicklung häufig verwendet wird. Bei der Verwendung von ECharts werden viele Menschen eine Frage haben: Muss ECharts auf jQuery angewiesen sein? In diesem Artikel wird dies ausführlich erläutert und konkrete Codebeispiele gegeben. Um es klarzustellen: ECharts selbst verlässt sich nicht auf jQuery;
So verwenden Sie ein Histogramm, um Daten in ECharts anzuzeigen
Dec 18, 2023 pm 02:21 PM
Verwendung von Histogrammen zur Anzeige von Daten in ECharts ECharts ist eine JavaScript-basierte Datenvisualisierungsbibliothek, die im Bereich der Datenvisualisierung sehr beliebt und weit verbreitet ist. Unter diesen ist das Histogramm der gebräuchlichste und am häufigsten verwendete Diagrammtyp, mit dem die Größe, der Vergleich und die Trendanalyse verschiedener numerischer Daten angezeigt werden können. In diesem Artikel wird die Verwendung von ECharts zum Zeichnen von Histogrammen vorgestellt und Codebeispiele bereitgestellt. Zuerst müssen wir die ECharts-Bibliothek in die HTML-Datei einführen, die wie folgt eingeführt werden kann
