一種在 React Native 中封裝的響應式 Echarts 組件,使用與示例請參見:react-native-echarts-demohtml
近年來,隨着移動端對數據可視化的要求愈來愈高,相似 MPAndroidChart 這樣的傳統圖表庫已經不能知足產品經理日益變態的需求。前端領域數據可視化的發展相對繁榮一些,經過 WebView 在移動端使用 Echarts 這樣功能強大的前端數據可視化庫,是解決問題的好辦法。前端
React Native 開發中,因爲使用的是與前端相同的 JavaScript 語言,銜接 Echarts 的工做相對順暢些,不過一些必要的組件封裝仍是可以大大提升開發效率的。react
Echarts 官方推薦過一個第三方封裝庫:react-native-echarts(注:它對應的 nmp package 名字爲 native-echarts ),目前有 400+ stars 和 100+ 的周下載量,可見仍是被普遍使用的。可是咱們通過調研,發現 react-native-echarts 存在如下一些問題:android
因爲用 WebView 封裝 Echarts 涉及到本地 html,不是純 JavaScript 語言層面的功能,又沒有 native 代碼,因此作成 nmp package 並非一個很好的選擇,寫成項目裏的內部組件,本身進行配置反而是更方便更靈活的方案。ios
所以咱們決定不使用第三方的 Echarts 封裝庫,本身寫一個通用組件 WebChart 。爲方便開發中使用,該組件具備如下特色:git
按照響應式進行設計,只需在 option 中配置好數據源,數據變化後圖表就會自動刷新,更符合 React 的風格。github
咱們的方案是在組件每次 update 時判斷傳入的 option 參數是否發生變化,若是變化經過 webView.postMessage ,以 JSON 的形式傳入新的 option ,通知 Echarts 從新 setOption 。web
雖然 Echarts 自己會對 option 進行對比,但事先判斷能夠減小 update 致使的與 WebView 頻繁通訊,這一點在容器父組件中有大量異步請求時仍是很明顯的;在 WebView 內部,更新則是採用 Echarts 自己的 setOption 而無需 reload 整個 WebViewnpm
利用 WebView 的 postMessage 和 onMessage 接口,可實現圖表與其它 React Native 組件的事件通訊canvas
經過組件的 exScript 參數,可爲 WebView 添加任意腳本,使用靈活
因爲是本身寫的組件, echarts 版本、擴展包,svg/canvas 、數據增量加載均可以本身設定
使用與示例請參見:react-native-echarts-demo,若是你須要直接使用,可按如下步驟移植:
只需以上兩步就能夠在項目中使用 WebChart 組件了。
若是須要進一步定製的話,Echarts 代碼在以上兩個文件夾中的 index.html 裏 <script /> 標籤內,目前是放的是 4.0 完整版,無擴展包,可到官網下載所需的版本和擴展包替換;svg/canvas 、數據增量加載等可在 WebChart/index.js 中直接進行修改。在移動端,出於性能的考慮,咱們通常使用 svg 的渲染模式。
WebChart 具體使用可參見 App.js ,style 的設置就和普通的 React Native 組件同樣,可以使用 flex ,也可設爲定值。額外的三個參數:
固然這是根據咱們的業務須要設計的參數,你徹底能夠自由從新設定。
在 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。
在使用中,還有如下幾個坑未解決,目前只能繞過,歡迎知道的同窗指正: