応答式React Native Echartsコンポーネントを深く理解する

前言
React Nativeにパッケージされた応答式Echartsコンポーネントの使用例はreact-native-echarts-demoを参照してください。
近年、モバイル端末のデータ可視化に対する要求がますます高くなり、MPAndroid Chartのような従来のグラフライブラリは、製品マネージャの日増しに変態するニーズを満たすことができなくなりました。先端領域のデータ可視化の発展は比較的繁栄しています。WebViewを通じてモバイル端末にEchartsを使用するという機能が強いフロントエンドデータ可視化ライブラリがあり、問題を解決する良い方法です。
React Native開発では、先端と同じJavaScript言語を使っていますので、Echartsに接続する作業は比較的スムーズですが、必要なパッケージは開発効率を大幅に向上させます。
Echarts公式推薦されたサードパーティパッケージ：react-native-echarts（注：それに対応するnmp packageの名前はnative-echarts）は、現在400+starsと100+の週間ダウンロード量がありますが、まだ広く使われています。しかし、私達は調査を通して、react-native-echardには以下の問題があることを発見しました。

このライブラリは半年以上更新されていません。Echartsバージョンは3.0にとどまっています。Android端末のパッケージはマニュアルでassetsを追加する必要があります。

ライブラリのインターフェースの柔軟性が低いです。例えば、width、heightでサイズを設定するしかないです。Echarts拡張パッケージを使用できませんでした。イベント登録、WebView通信などができませんでした。

WebViewでEchartsをカプセル化することで、JavaScriptの言語レベルの機能ではなく、nativeコードもないので、nmp packageを作るのはいい選択ではないです。プロジェクトの内部構成要素を作成して、自分で配置するのはむしろより便利で、より柔軟な方案です。
そこで、我々は第三者のEchartsパッケージを使わずに、自分で共通のコンポーネントWebChartを書くことにしました。開発に便利なように、このコンポーネントは以下の特徴があります。

は応答式に従って設計して、optionの中でデータソースを配置するだけで、データが変化した後に図表は自動的に更新して、Reactの風格にもっと合います。

私達の方案はコンポーネントがudateごとに入ってくるオプトパラメータが変化するかどうかを判断するので、もし変化がwebView.postMessageを通じて(通って)、JSONの形式で新しいoptionに入ったら、Echartsに新しいsetOptionを通知します。

Echarts自身がoptionを比較しますが、udateによるWebViewとの頻繁な通信を減らすことができると事前に判断しています。この点は、容器父のコンポーネントに多くの非同期要求がある場合にも明らかです。WebViewの内部では、更新はEcharts自身のsetOptionを採用し、reload全体WebView

を必要としない。

は、WebViewのpostMessageおよびonMessageインターフェースを利用して、他のReact Nativeコンポーネントとのグラフのイベント通信

を実現することができる。

コンポーネントのexScriptパラメータにより、WebViewに任意のスクリプトを追加でき、フレキシブルな

を使用します。

は自分で書いたコンポーネントですので、echartsバージョン、拡張パッケージ、svg/canvas、データの増分ロードは自分で設定できます。
デモと使用方法
使用例としては、react-native-echarts-demoを参照してください。直接使用する必要があれば、以下の手順で移植できます。
ルートディレクトリ下のWebChartコンポーネントフォルダをあなたのプロジェクトの適切なところに拷問します。
android/ap/src/main/assites/ウェブフォルダをあなたのプロジェクトと同じ位置に拷問します。asetsフォルダがない場合は手動で作成します。
以上の2ステップだけでプロジェクトにWebChartのコンポーネントを使用できます。
さらに注文する必要があるなら、Echartsコードは以上の二つのフォルダの中のindex.の中ラベル内にあります。現在は4.0の完全版を入れています。拡張パッケージがないので、ウェブサイトで必要なバージョンと拡張パッケージをダウンロードして換えられます。svg/canvas、データの増分ロードなどはWebChart/index.jsで直接修正できます。モバイル端末では、性能を考慮してsvgのレンダリングモードを一般的に使用しています。
WebChartの具体的な使用はApp.jsを参照してください。styleの設定は普通のReact Nativeコンポーネントと同じです。flexを使ってもいいし、定値にしてもいいです。追加の3つのパラメータ:

option：setOptionに割り当てられたパラメータオブジェクトは、変化した後にWebChart内部で自動的にset Optionを呼び出し、応答式のリフレッシュを実現します。特に、JSON解析では関数の処理が行われていませんので、関数式のformaterやクラス形式のLinearGradentを使わないようにします。demoと同じようにテンプレート式と普通のオブジェクトを使うようにしましょう。

exScript：WebViewでロードしたい時に実行するコードは、イベント登録などで、テンプレートの字面量は

を推奨します。

onMessage：WebView内部でpostMessageをトリガした後のコールバックは、まずexScriptで設定し、グラフと他のReact Nativeコンポーネントとの通信

のために必要です。
もちろんこれは私達の業務によって設計されたパラメータです。完全に自由に再設定できます。
EchartsとReact Nativeコンポーネントの通信
React NativeのWebViewコンポーネントでは、onMessageとpostMessageを提供してコンポーネントとの双方向通信を行い、具体的にはドキュメントに参加することができます。
webView.postMessageを利用して、WebChartはEchartsにsetOptionを実行するように通知しました。exScriptでは、window.postMessageを利用してEchartsのイベントをReact Nativeコンポーネントに通信することができます。
一般的に通信の約束をするdataはこのようなフォーマットの対象となります。

{
type: 'someType',
payload: {
value: 111,
},
}

onMessageとpostMessageは文字列の伝達しかできないので、exScriptではJSONのプログレッシブ化が必要です。このように：

exScript={`
chart.on('click', (params) => {
if(params.componentType === 'series') {
window.postMessage(JSON.stringify({
type: 'select',
payload: {
index: params.dataIndex,
},
}));
}
});
`}

以上が私たちのパッケージの応答式WebChartコンポーネントと使用です。完全コードはreact-native-echarts-demoを参照してください。
使用中、まだ以下のいくつかのピットが解決されていません。現在は遠回りしかできません。知っている学生の指摘を歓迎します。

はIOSの中で、Echartsは透明な効果が出ないようです。rgbaで設定した色は正常ではありません。

React NativeのWebViewはstyle.height属性が無効のようですので、外にView

をセットしなければなりません。

は現在のリソースローディング方式で、index.はAndroidに2つあります。プラットフォームは運行時に行われると判断していますので、index.anroid.jsとindex.ios.jsを分けてセットしてもパッケージ化されます。Androidの中には手動でasts

を追加しなければなりません。

index.ではインラインでEchartsのコードを導入しなければなりません。外部参照の個別のjsファイルは有効ではないようです。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。