摘要：額外的三個參數(shù)賦給的參數(shù)對象，發(fā)生變化后內(nèi)部會自動調(diào)用，實現(xiàn)響應(yīng)式刷新。利用，實現(xiàn)了通知執(zhí)行在中，可利用實現(xiàn)的事件向組件的通信。

一種在 React Native 中封裝的響應(yīng)式 Echarts 組件，使用與示例請參見：react-native-echarts-demo

近年來，隨著移動端對數(shù)據(jù)可視化的要求越來越高，類似 MPAndroidChart 這樣的傳統(tǒng)圖表庫已經(jīng)不能滿足產(chǎn)品經(jīng)理日益{{BANNED}}的需求。前端領(lǐng)域數(shù)據(jù)可視化的發(fā)展相對繁榮一些，通過 WebView 在移動端使用 Echarts 這樣功能強大的前端數(shù)據(jù)可視化庫，是解決問題的好辦法。

React Native 開發(fā)中，由于使用的是與前端相同的 JavaScript 語言，銜接 Echarts 的工作相對順暢些，不過一些必要的組件封裝還是能夠大大提高開發(fā)效率的。

Echarts 官方推薦過一個第三方封裝庫：react-native-echarts（注：它對應(yīng)的 nmp package 名字為 native-echarts ），目前有 400+ stars 和 100+ 的周下載量，可見還是被廣泛使用的。但是我們經(jīng)過調(diào)研，發(fā)現(xiàn) react-native-echarts 存在以下一些問題：

該庫已半年多未更新，Echarts 版本停留在 3.0 ，Android 端打包需手動添加 assets 的問題也一直未處理

庫的接口靈活度較低，比如只能通過 width、height 設(shè)置大?。粺o法使用 Echarts 擴展包；無法進行事件注冊、WebView 通信等

由于用 WebView 封裝 Echarts 涉及到本地 html，不是純 JavaScript 語言層面的功能，又沒有 native 代碼，所以做成 nmp package 并不是一個很好的選擇，寫成項目里的內(nèi)部組件，自己進行配置反而是更方便更靈活的方案。

因此我們決定不使用第三方的 Echarts 封裝庫，自己寫一個通用組件 WebChart 。為方便開發(fā)中使用，該組件具有以下特點：

按照響應(yīng)式進行設(shè)計，只需在 option 中配置好數(shù)據(jù)源，數(shù)據(jù)變化后圖表就會自動刷新，更符合 React 的風(fēng)格。

我們的方案是在組件每次 update 時判斷傳入的 option 參數(shù)是否發(fā)生變化，如果變化通過 webView.postMessage ，以 JSON 的形式傳入新的 option ，通知 Echarts 重新 setOption 。

雖然 Echarts 本身會對 option 進行對比，但事先判斷可以減少 update 導(dǎo)致的與 WebView 頻繁通信，這一點在容器父組件中有大量異步請求時還是很明顯的；在 WebView 內(nèi)部，更新則是采用 Echarts 本身的 setOption 而無需 reload 整個 WebView

利用 WebView 的 postMessage 和 onMessage 接口，可實現(xiàn)圖表與其它 React Native 組件的事件通信

通過組件的 exScript 參數(shù)，可為 WebView 添加任意腳本，使用靈活

由于是自己寫的組件， echarts 版本、擴展包，svg/canvas 、數(shù)據(jù)增量加載都可以自己設(shè)定

使用與示例請參見：react-native-echarts-demo，如果你需要直接使用，可按以下步驟移植：

將根目錄下的 WebChart 組件文件夾拷到你項目中合適的地方

將 /android/app/src/main/assets/web 文件夾拷到你項目同樣位置，沒有 assets 文件夾需手動創(chuàng)建。

只需以上兩步就可以在項目中使用 WebChart 組件了。

如果需要進一步定制的話，Echarts 代碼在以上兩個文件夾中的 index.html 里