相应式 React Native Echarts 组件

2023年3月5日 246次阅读 来源: Entronad

一种在 React Native 中封装的相应式 Echarts 组件，运用与示例请拜见：
react-native-echarts-demo

近年来，跟着挪动端对数据可视化的要求越来越高，相似 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 /> 标签内，如今是放的是 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 文件彷佛无效
    原文作者：Entronad
    原文地址: https://segmentfault.com/a/1190000015621519
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞