響應式ReactNativeEcharts組件的示例分析

小編給大家分享一下響應式React Native Echarts組件的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)主營旌德網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,APP應用開發(fā),旌德h5成都小程序開發(fā)搭建,旌德網(wǎng)站營銷推廣歡迎旌德等地區(qū)企業(yè)咨詢

前言

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

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

Echarts 官方推薦過一個第三方封裝庫：react-native-echarts（注：它對應的 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è)置大??；無法使用 Echarts 擴展包；無法進行事件注冊、WebView 通信等

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

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

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

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

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

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

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

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

Demo 與使用方法

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

將根目錄下的 WebChart 組件文件夾拷到你項目中合適的地方
將 /android/app/src/main/assets/web 文件夾拷到你項目同樣位置，沒有 assets 文件夾需手動創(chuàng)建。
只需以上兩步就可以在項目中使用 WebChart 組件了。

如果需要進一步定制的話，Echarts 代碼在以上兩個文件夾中的 index.html 里 <script /> 標簽內(nèi)，目前是放的是 4.0 完整版，無擴展包，可到官網(wǎng)下載所需的版本和擴展包替換；svg/canvas 、數(shù)據(jù)增量加載等可在 WebChart/index.js 中直接進行修改。在移動端，出于性能的考慮，我們一般使用 svg 的渲染模式。

WebChart 具體使用可參見 App.js ，style 的設(shè)置就和普通的 React Native 組件一樣，可使用 flex ，也可設(shè)為定值。額外的三個參數(shù)：

  • option(object)：賦給 setOption 的參數(shù)對象，發(fā)生變化后 WebChart 內(nèi)部會自動調(diào)用 setOption ，實現(xiàn)響應式刷新。特別注意，JSON 解析時未進行函數(shù)的處理，所以需避免使用函數(shù)式的 formatter 和類形式的 LinearGradient ，和 demo 一樣使用模板式和普通對象的吧

  • exScript(string)：任何你想在 WebView 加載時執(zhí)行的代碼，一般會是事件注冊之類的，推薦使用模板字面量

  • onMessage(function)：WebView 內(nèi)部觸發(fā) postMessage 之后的回調(diào)，postMessage 需先在 exScript 中進行設(shè)置，用于圖表與其它 React Native 組件的通信

當然這是根據(jù)我們的業(yè)務需要設(shè)計的參數(shù)，你完全可以自由重新設(shè)定。

Echarts與React Native組件的通信

在 React Native 的 WebView 組件中，提供了 onMessage 和 postMessage 來進行 html 與組件的雙向通信，具體使用可參加文檔。

利用 webView.postMessage ，WebChart 實現(xiàn)了通知 Echarts 執(zhí)行 setOption ；在 exScript 中，可利用 window.postMessage 實現(xiàn) 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 設(shè)置的顏色不能正常

  • React Native 的 WebView 好像 style.height 屬性無效，因此不得不在外面套了個 View

  • 按現(xiàn)在的資源加載方式，index.html 在 Android 上會有兩份。因為平臺判斷是運行時進行的，哪怕分開設(shè)置 index.anroid.js 和 index.ios.js 打包時也會都打包進去，而 Android 中又必須手動添加 assets

  • index.html 中必須內(nèi)聯(lián)引入 Echarts 的代碼，外部引用單獨的 js 文件好像無效

以上是“響應式React Native Echarts組件的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：響應式ReactNativeEcharts組件的示例分析
分享地址：http://bm7419.com/article48/jdohhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、軟件開發(fā)、企業(yè)建站、品牌網(wǎng)站制作、服務器托管、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運營