响应式ReactNativeEcharts组件的示例分析

小编给大家分享一下响应式React Native Echarts组件的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

成都创新互联主营旌德网站建设的网络公司,主营网站建设方案,APP应用开发,旌德h5成都小程序开发搭建,旌德网站营销推广欢迎旌德等地区企业咨询

前言

近年来,随着移动端对数据可视化的要求越来越高,类似 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 文件夹需手动创建。
只需以上两步就可以在项目中使用 WebChart 组件了。

如果需要进一步定制的话,Echarts 代码在以上两个文件夹中的 index.html 里