一种在 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 存在以下一些问题:
由于用 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 、数据增量加载都可以自己设定
使用与示例请参见: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。
在使用中,还有以下几个坑未解决,目前只能绕过,欢迎知道的同学指正: