響應式React Native Echarts元件的介紹

這篇文章主要介紹了關於響應式React Native Echarts組件的介紹，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

近年來，隨著移動端對資料視覺化的要求越來越高，類似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 設定大小；無法使用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，如果你需要直接使用，可依下列步驟移植：

1. 將根目錄下的WebChart 元件資料夾拷到你專案中適當的地方

2. ##將/android /app/src/main/assets/web 資料夾拷到你專案同樣位置，沒有assets 資料夾需要手動建立。

只需以上兩步驟就可以在專案中使用 WebChart 元件了。

如果需要進一步自訂的話，Echarts 程式碼在以上兩個資料夾中的index.html 裡<script></script> 標籤內，目前是放的是4.0 完整版，無擴充包，可到官網下載所需的版本和擴充包替換；svg/canvas 、資料增量載入等可在WebChart/index.js 中直接進行修改。在行動端，出於效能的考慮，我們一般使用 svg 的渲染模式。

WebChart 具體使用可參考 App.js ，style 的設定就和普通的 React Native 元件一樣，可使用 flex ，也可設為定值。額外的三個參數：

• option(object)：賦給 setOption 的參數對象，變更後 WebChart 內部會自動呼叫 setOption ，實現響應式刷新。特別注意，JSON 解析時未進行函數的處理，所以需避免使用函數式的formatter 和類別形式的LinearGradient ，和demo 一樣使用模板式和普通對象的吧

• #exScript (string)：任何你想在WebView  載入時執行的程式碼，通常會是事件註冊之類的，建議使用模板字面量

• onMessage(function)：WebView 內部觸發postMessage之後的回調，postMessage 需先在exScript 中進行設置，用於圖表與其它React Native 組件的通信

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

Echarts與React Native元件的通訊

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

利用 webView.postMessage ，WebChart 實作了通知 Echarts 執行 setOption ；在 exScript 中，可利用 window.postMessage 實作 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 設定的顏色不能正常

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

• #以現在的資源載入方式，index.html 在Android 上會有兩份。因為平台判斷是運行時進行的，即使分開設定index.anroid.js 和index.ios.js 打包時也會都打包進去，而Android 中又必須手動加入assets

• index.html 中必須內嵌引入Echarts 的程式碼，外部引用單獨的js 檔案好像無效

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

如何使用NodeJS Lighthouse Gulp建構自動化網站效能測試的工具

React mongodb的使用與配置

以上是響應式React Native Echarts元件的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！