前言
一種在 React Native 中封裝的響應式 Echarts 組件，使用與示例請參見：react-native-echarts-demo
近年來，隨著移動端對數據可視化的要求越來越高，類似 MPAndroidChart 這樣的傳統圖表庫已經不能滿足產品經理日益變態的需求。前端領域數據可視化的發展相對繁榮一些，通過 WebView 在移動端使用 Echarts 這樣功能強大的前端數據可視化庫，是解決問題的好辦法。
React Native 開發中，由于使用的是與前端相同的 JavaScript 語言，銜接 Echarts 的工作相對順暢些，不過一些必要的組件封裝還是能夠大大提高開發效率的。
Echarts 官方推薦過一個第三方封裝庫：react-native-echarts（注：它對應的 nmp package 名字為native-echarts ），目前有 400+ stars 和 100+ 的周下載量，可見還是被廣泛使用的。但是我們經過調研，發現 react-native-echarts 存在以下一些問題：
該庫已半年多未更新，Echarts 版本停留在 3.0 ，Android 端打包需手動添加 assets 的問題也一直未處理 庫的接口靈活度較低，比如只能通過 width、height 設置大?。粺o法使用 Echarts 擴展包；無法進行事件注冊、WebView 通信等由于用WebView 封裝 Echarts 涉及到本地 html，不是純 JavaScript 語言層面的功能，又沒有 native 代碼，所以做成 nmp package 并不是一個很好的選擇，寫成項目里的內部組件，自己進行配置反而是更方便更靈活的方案。
因此我們決定不使用第三方的 Echarts 封裝庫，自己寫一個通用組件 WebChart 。為方便開發中使用，該組件具有以下特點：
按照響應式進行設計，只需在 option 中配置好數據源，數據變化后圖表就會自動刷新，更符合 React 的風格。 我們的方案是在組件每次 update 時判斷傳入的 option 參數是否發生變化，如果變化通過 webView.postMessage ，以 JSON 的形式傳入新的 option ，通知 Echarts 重新 setOption 。 雖然 Echarts 本身會對 option 進行對比，但事先判斷可以減少 update 導致的與 WebView 頻繁通信，這一點在容器父組件中有大量異步請求時還是很明顯的；在 WebView 內部，更新則是采用 Echarts 本身的 setOption 而無需 reload 整個 WebView 利用 WebView 的 postMessage 和 onMessage 接口，可實現圖表與其它 React Native 組件的事件通信 通過組件的 exScript 參數，可為 WebView 添加任意腳本，使用靈活 由于是自己寫的組件， echarts 版本、擴展包，svg/canvas 、數據增量加載都可以自己設定Demo 與使用方法
使用與示例請參見：react-native-echarts-demo，如果你需要直接使用，可按以下步驟移植：
將根目錄下的 WebChart 組件文件夾拷到你項目中合適的地方
將 /android/app/src/main/assets/web 文件夾拷到你項目同樣位置，沒有 assets 文件夾需手動創建。
新聞熱點
疑難解答
圖片精選
