前言

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

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

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

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

• 該庫(kù)已半年多未更新，Echarts 版本停留在 3.0 ，Android 端打包需手動(dòng)添加 assets 的問(wèn)題也一直未處理
• 庫(kù)的接口靈活度較低，比如只能通過(guò) width、height 設(shè)置大小；無(wú)法使用 Echarts 擴(kuò)展包；無(wú)法進(jìn)行事件注冊(cè)、WebView 通信等

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

因此我們決定不使用第三方的 Echarts 封裝庫(kù)，自己寫(xiě)一個(gè)通用組件 WebChart 。為方便開(kāi)發(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 添加任意腳本，使用靈活
• 由于是自己寫(xiě)的組件， echarts 版本、擴(kuò)展包，svg/canvas 、數(shù)據(jù)增量加載都可以自己設(shè)定

Demo 與使用方法

使用與示例請(qǐng)參見(jiàn)：react-native-echarts-demo，如果你需要直接使用，可按以下步驟移植：

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

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

WebChart 具體使用可參見(jiàn) 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 和類(lèi)形式的 LinearGradient ，和 demo 一樣使用模板式和普通對(duì)象的吧
• exScript(string)：任何你想在 WebView 加載時(shí)執(zhí)行的代碼，一般會(huì)是事件注冊(cè)之類(lèi)的，推薦使用模板字面量
• 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 序列化，類(lèi)似這樣：

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

以上就是我們封裝的響應(yīng)式 WebChart 組件及使用，完整代碼請(qǐng)參見(jiàn)：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)行的，哪怕分開(kāi)設(shè)置 index.anroid.js 和 index.ios.js 打包時(shí)也會(huì)都打包進(jìn)去，而 Android 中又必須手動(dòng)添加 assets
• index.html 中必須內(nèi)聯(lián)引入 Echarts 的代碼，外部引用單獨(dú)的 js 文件好像無(wú)效

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。