响应式 React Native Echarts 组件

摘要：额外的三个参数赋给的参数对象，发生变化后内部会自动调用，实现响应式刷新。利用，实现了通知执行在中，可利用实现的事件向组件的通信。

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

近年来，随着移动端对数据可视化的要求越来越高，类似 MPAndroidChart 这样的传统图表库已经不能满足产品经理日益{{BANNED}}的需求。前端领域数据可视化的发展相对繁荣一些，通过 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 、数据增量加载都可以自己设定

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

将根目录下的 WebChart 组件文件夹拷到你项目中合适的地方

将 /android/app/src/main/assets/web 文件夹拷到你项目同样位置，没有 assets 文件夹需手动创建。

只需以上两步就可以在项目中使用 WebChart 组件了。

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