摘要:額外的三個(gè)參數(shù)賦給的參數(shù)對(duì)象,發(fā)生變化后內(nèi)部會(huì)自動(dòng)調(diào)用,實(shí)現(xiàn)響應(yīng)式刷新。利用,實(shí)現(xiàn)了通知執(zhí)行在中,可利用實(shí)現(xiàn)的事件向組件的通信。
一種在 React Native 中封裝的響應(yīng)式 Echarts 組件,使用與示例請(qǐng)參見:react-native-echarts-demo
近年來(lái),隨著移動(dòng)端對(duì)數(shù)據(jù)可視化的要求越來(lái)越高,類似 MPAndroidChart 這樣的傳統(tǒng)圖表庫(kù)已經(jīng)不能滿足產(chǎn)品經(jīng)理日益{{BANNED}}的需求。前端領(lǐng)域數(shù)據(jù)可視化的發(fā)展相對(duì)繁榮一些,通過(guò) WebView 在移動(dòng)端使用 Echarts 這樣功能強(qiáng)大的前端數(shù)據(jù)可視化庫(kù),是解決問題的好辦法。
React Native 開發(fā)中,由于使用的是與前端相同的 JavaScript 語(yǔ)言,銜接 Echarts 的工作相對(duì)順暢些,不過(guò)一些必要的組件封裝還是能夠大大提高開發(fā)效率的。
Echarts 官方推薦過(guò)一個(gè)第三方封裝庫(kù):react-native-echarts(注:它對(duì)應(yīng)的 nmp package 名字為 native-echarts ),目前有 400+ stars 和 100+ 的周下載量,可見還是被廣泛使用的。但是我們經(jīng)過(guò)調(diào)研,發(fā)現(xiàn) react-native-echarts 存在以下一些問題:
該庫(kù)已半年多未更新,Echarts 版本停留在 3.0 ,Android 端打包需手動(dòng)添加 assets 的問題也一直未處理
庫(kù)的接口靈活度較低,比如只能通過(guò) width、height 設(shè)置大小;無(wú)法使用 Echarts 擴(kuò)展包;無(wú)法進(jìn)行事件注冊(cè)、WebView 通信等
由于用 WebView 封裝 Echarts 涉及到本地 html,不是純 JavaScript 語(yǔ)言層面的功能,又沒有 native 代碼,所以做成 nmp package 并不是一個(gè)很好的選擇,寫成項(xiàng)目里的內(nèi)部組件,自己進(jìn)行配置反而是更方便更靈活的方案。
因此我們決定不使用第三方的 Echarts 封裝庫(kù),自己寫一個(gè)通用組件 WebChart 。為方便開發(fā)中使用,該組件具有以下特點(diǎn):
按照響應(yīng)式進(jìn)行設(shè)計(jì),只需在 option 中配置好數(shù)據(jù)源,數(shù)據(jù)變化后圖表就會(huì)自動(dòng)刷新,更符合 React 的風(fēng)格。
我們的方案是在組件每次 update 時(shí)判斷傳入的 option 參數(shù)是否發(fā)生變化,如果變化通過(guò) webView.postMessage ,以 JSON 的形式傳入新的 option ,通知 Echarts 重新 setOption 。
雖然 Echarts 本身會(huì)對(duì) option 進(jìn)行對(duì)比,但事先判斷可以減少 update 導(dǎo)致的與 WebView 頻繁通信,這一點(diǎn)在容器父組件中有大量異步請(qǐng)求時(shí)還是很明顯的;在 WebView 內(nèi)部,更新則是采用 Echarts 本身的 setOption 而無(wú)需 reload 整個(gè) WebView
利用 WebView 的 postMessage 和 onMessage 接口,可實(shí)現(xiàn)圖表與其它 React Native 組件的事件通信
通過(guò)組件的 exScript 參數(shù),可為 WebView 添加任意腳本,使用靈活
由于是自己寫的組件, echarts 版本、擴(kuò)展包,svg/canvas 、數(shù)據(jù)增量加載都可以自己設(shè)定
Demo 與使用方法使用與示例請(qǐng)參見:react-native-echarts-demo,如果你需要直接使用,可按以下步驟移植:
將根目錄下的 WebChart 組件文件夾拷到你項(xiàng)目中合適的地方
將 /android/app/src/main/assets/web 文件夾拷到你項(xiàng)目同樣位置,沒有 assets 文件夾需手動(dòng)創(chuàng)建。
只需以上兩步就可以在項(xiàng)目中使用 WebChart 組件了。
如果需要進(jìn)一步定制的話,Echarts 代碼在以上兩個(gè)文件夾中的 index.html 里 標(biāo)簽內(nèi),目前是放的是 4.0 完整版,無(wú)擴(kuò)展包,可到官網(wǎng)下載所需的版本和擴(kuò)展包替換;svg/canvas 、數(shù)據(jù)增量加載等可在 WebChart/index.js 中直接進(jìn)行修改。在移動(dòng)端,出于性能的考慮,我們一般使用 svg 的渲染模式。
WebChart 具體使用可參見 App.js ,style 的設(shè)置就和普通的 React Native 組件一樣,可使用 flex ,也可設(shè)為定值。額外的三個(gè)參數(shù):
option(object):賦給 setOption 的參數(shù)對(duì)象,發(fā)生變化后 WebChart 內(nèi)部會(huì)自動(dòng)調(diào)用 setOption ,實(shí)現(xiàn)響應(yīng)式刷新。特別注意,JSON 解析時(shí)未進(jìn)行函數(shù)的處理,所以需避免使用函數(shù)式的 formatter 和類形式的 LinearGradient ,和 demo 一樣使用模板式和普通對(duì)象的吧
exScript(string):任何你想在 WebView 加載時(shí)執(zhí)行的代碼,一般會(huì)是事件注冊(cè)之類的,推薦使用模板字面量
onMessage(function):WebView 內(nèi)部觸發(fā) postMessage 之后的回調(diào),postMessage 需先在 exScript 中進(jìn)行設(shè)置,用于圖表與其它 React Native 組件的通信
當(dāng)然這是根據(jù)我們的業(yè)務(wù)需要設(shè)計(jì)的參數(shù),你完全可以自由重新設(shè)定。
Echarts與React Native組件的通信在 React Native 的 WebView 組件中,提供了 onMessage 和 postMessage 來(lái)進(jìn)行 html 與組件的雙向通信,具體使用可參加文檔。
利用 webView.postMessage ,WebChart 實(shí)現(xiàn)了通知 Echarts 執(zhí)行 setOption ;在 exScript 中,可利用 window.postMessage 實(shí)現(xiàn) Echarts 的事件向 React Native 組件的通信。
一般我們會(huì)約定通信的 data 為這樣格式的對(duì)象:
{ type: "someType", payload: { value: 111, }, }
由于 onMessage 和 postMessage 只能進(jìn)行字符串的傳遞,在 exScript 需進(jìn)行 JSON 序列化,類似這樣:
exScript={` chart.on("click", (params) => { if(params.componentType === "series") { window.postMessage(JSON.stringify({ type: "select", payload: { index: params.dataIndex, }, })); } }); `}
以上就是我們封裝的響應(yīng)式 WebChart 組件及使用,完整代碼請(qǐng)參見:react-native-echarts-demo。
在使用中,還有以下幾個(gè)坑未解決,目前只能繞過(guò),歡迎知道的同學(xué)指正:
在 IOS 中,Echarts 好像渲染不出透明的效果,用 rgba 設(shè)置的顏色不能正常
React Native 的 WebView 好像 style.height 屬性無(wú)效,因此不得不在外面套了個(gè) View
按現(xiàn)在的資源加載方式,index.html 在 Android 上會(huì)有兩份。因?yàn)槠脚_(tái)判斷是運(yùn)行時(shí)進(jìn)行的,哪怕分開設(shè)置 index.anroid.js 和 index.ios.js 打包時(shí)也會(huì)都打包進(jìn)去,而 Android 中又必須手動(dòng)添加 assets
index.html 中必須內(nèi)聯(lián)引入 Echarts 的代碼,外部引用多帶帶的 js 文件好像無(wú)效
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/96082.html
摘要:數(shù)據(jù)可視化庫(kù)超過(guò)的的可能是最流行和最廣泛的數(shù)據(jù)可視化庫(kù)。是一組組件,用于高效地渲染大型列表和表格數(shù)據(jù)。一種優(yōu)雅而靈活的方式,可以利用組件來(lái)支持實(shí)際的數(shù)據(jù)可視化。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你! React Native 組件庫(kù) 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...
摘要:今天我就來(lái)介紹下在中如何使用來(lái)顯示各種圖表。首先需要在我們的項(xiàng)目中安裝組件,該組件是兼容和安卓雙平臺(tái)的。組件主要有三個(gè)屬性圖表的相關(guān)配置和數(shù)據(jù)。圖表的高度,默認(rèn)值是。解決方法將中的代碼修改為同時(shí)將文件拷貝到安卓項(xiàng)目下面的文件夾中。 本文原創(chuàng)首發(fā)于公眾號(hào):ReactNative開發(fā)圈 Echarts是百度推出的免費(fèi)開源的圖表組件,功能豐富,涵蓋各行業(yè)圖表。相信很多同學(xué)在網(wǎng)頁(yè)端都使用過(guò)。今...
摘要:五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨,水面清圓,一一風(fēng)荷舉。家住吳門,久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟,夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源;定時(shí)更新,歡迎 Star 一下。 蘇...
摘要:五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨,水面清圓,一一風(fēng)荷舉。家住吳門,久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟,夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源;定時(shí)更新,歡迎 Star 一下。 蘇...
閱讀 576·2023-04-26 01:42
閱讀 3222·2021-11-22 11:56
閱讀 2392·2021-10-08 10:04
閱讀 836·2021-09-24 10:37
閱讀 3125·2019-08-30 15:52
閱讀 1732·2019-08-29 13:44
閱讀 472·2019-08-28 17:51
閱讀 2141·2019-08-26 18:26