響應式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，如果你需要直接使用，可依下列步驟移植：
將根目錄下的WebChart 元件資料夾拷到你專案中適當的地方
- ##將/android /app/src/main/assets/web 資料夾拷到你專案同樣位置，沒有assets 資料夾需要手動建立。
- option(object)：賦給 setOption 的參數對象，變更後 WebChart 內部會自動呼叫 setOption ，實現響應式刷新。特別注意，JSON 解析時未進行函數的處理，所以需避免使用函數式的formatter 和類別形式的LinearGradient ，和demo 一樣使用模板式和普通對象的吧
- #exScript (string)：任何你想在WebView 載入時執行的程式碼，通常會是事件註冊之類的，建議使用模板字面量
- onMessage(function)：WebView 內部觸發postMessage之後的回調，postMessage 需先在exScript 中進行設置，用於圖表與其它React Native 組件的通信
利用 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中文網！
相關推薦：
以上是響應式React Native Echarts元件的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何利用php介面和ECharts產生可視化的統計圖表
Dec 18, 2023 am 11:39 AM
在今天數據視覺化變得越來越重要的背景下，許多開發者都希望能夠利用各種工具，快速產生各種圖表與報表，以便能夠更好的展示數據，幫助決策者快速做出判斷。而在此背景下，利用Php介面和ECharts函式庫可以幫助許多開發者快速產生可視化的統計圖表。本文將詳細介紹如何利用Php介面和ECharts庫產生視覺化的統計圖表。在具體實作時，我們將使用MySQL
使用ECharts和Python介面繪製儀錶板的步驟
Dec 18, 2023 am 08:40 AM
使用ECharts和Python介面繪製儀錶板的步驟，需要具體程式碼範例摘要：ECharts是一款優秀的資料視覺化工具，透過Python介面可以方便地進行資料處理和圖形繪製。本文將介紹使用ECharts和Python介面繪製儀錶板的具體步驟，並提供範例程式碼。關鍵字：ECharts、Python介面、儀錶板、資料視覺化簡介儀錶板是一種常用的資料視覺化形式，它透過
如何在ECharts中使用地圖熱力圖展示城市熱度
Dec 18, 2023 pm 04:00 PM
如何在ECharts中使用地圖熱力圖展示城市熱度ECharts是一款功能強大的視覺化圖表庫，它提供了各種圖表類型供開發人員使用，包括地圖熱力圖。地圖熱力圖可以用來展示城市或地區的熱度，幫助我們快速了解不同地方的熱門程度或密集程度。本文將介紹如何使用ECharts中的地圖熱力圖來展示城市熱度，並提供程式碼範例供參考。首先，我們需要一個包含地理資訊的地圖文件，EC
如何在ECharts中使用日曆圖展示時間數據
Dec 18, 2023 am 08:52 AM
如何在ECharts中使用日曆圖展示時間資料ECharts（百度開源的JavaScript圖表庫）是一種強大且易於使用的資料視覺化工具。它提供了各種圖表類型，包括折線圖、長條圖、餅圖等。而日曆圖是ECharts中一個很有特色且實用的圖表類型，它可以用來展示與時間相關的數據。本文將介紹如何在ECharts中使用日曆圖，並提供具體的程式碼範例。首先，你需要使用
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
如何使用ECharts和php介面產生統計圖
Dec 18, 2023 pm 01:47 PM
如何使用ECharts和PHP介面產生統計圖引言：在現代web應用開發中，資料視覺化是一個非常重要的環節，它能夠幫助我們直觀地展示和分析資料。 ECharts是一款強大的開源JavaScript圖表庫，它提供了多種圖表類型和豐富的互動功能，能夠輕鬆產生各種統計圖表。本文將介紹如何使用ECharts和PHP介面產生統計圖，並給出具體的程式碼範例。一、概述ECha
ECharts是否依賴jQuery？深入分析
Feb 27, 2024 am 08:39 AM
ECharts是否需要依賴jQuery？詳細解讀，需要具體程式碼範例ECharts是一個優秀的資料視覺化函式庫，提供了豐富的圖表類型和互動功能，廣泛應用於Web開發。在使用ECharts時，很多人會有一個疑問：ECharts是否需要依賴jQuery呢？本文將對此進行詳細解讀，並給出具體的程式碼範例。首先，要明確的是，ECharts本身並不依賴jQuery，它是一個
如何在ECharts中使用長條圖展示數據
Dec 18, 2023 pm 02:21 PM
如何在ECharts中使用長條圖展示資料ECharts是一款基於JavaScript的資料視覺化函式庫，在資料視覺化的領域非常流行且使用廣泛。其中，長條圖是最常見和常用的圖表類型，可以用來顯示各種數值資料的大小、比較和趨勢分析。本文將介紹如何使用ECharts來繪製長條圖，並提供程式碼範例。首先，我們需要在HTML檔案中引入ECharts庫，可以透過以下方式引
