响应式ReactNativeEcharts组件的介绍

近年来，随着移动端对数据可视化的要求越来越高，类似 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 。为方便开发中使用，该组件具有以下特点：

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 ，也可设为定值。额外的三个参数：

当然这是根据我们的业务需要设计的参数，你完全可以自由重新设定。

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,
 },
 }));
 }
 });
`}