当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 深入了解响应式React Native Echarts组件

深入了解响应式React Native Echarts组件

2019年07月19日  | 移动技术网IT编程  | 我要评论

感同身受造句,环山小学,只怪我的爱不够勇敢

前言

一种在 react native 中封装的响应式 echarts 组件，使用与示例请参见：

近年来，随着移动端对数据可视化的要求越来越高，类似 mpandroidchart 这样的传统图表库已经不能满足产品经理日益变态的需求。前端领域数据可视化的发展相对繁荣一些，通过 webview 在移动端使用 这样功能强大的前端数据可视化库，是解决问题的好办法。

react native 开发中，由于使用的是与前端相同的 javascript 语言，衔接 echarts 的工作相对顺畅些，不过一些必要的组件封装还是能够大大提高开发效率的。

echarts 官方推荐过一个第三方封装库：（注：它对应的 nmp package 名字为），目前有 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 与使用方法

使用与示例请参见：，如果你需要直接使用，可按以下步骤移植：

将根目录下的 webchart 组件文件夹拷到你项目中合适的地方
将 /android/app/src/main/assets/web 文件夹拷到你项目同样位置，没有 assets 文件夹需手动创建。
只需以上两步就可以在项目中使用 webchart 组件了。

如果需要进一步定制的话，echarts 代码在以上两个文件夹中的 里 <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 组件及使用，完整代码请参见：。

在使用中，还有以下几个坑未解决，目前只能绕过，欢迎知道的同学指正：

  • 在 ios 中，echarts 好像渲染不出透明的效果，用 rgba 设置的颜色不能正常
  • react native 的 webview 好像 style.height 属性无效，因此不得不在外面套了个 view
  • 按现在的资源加载方式， 在 android 上会有两份。因为平台判断是运行时进行的，哪怕分开设置 index.anroid.js 和 index.ios.js 打包时也会都打包进去，而 android 中又必须手动添加 assets
  • 中必须内联引入 echarts 的代码，外部引用单独的 js 文件好像无效

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网