时间：2022-06-11 10:09:34 | 栏目：JavaScript代码 | 点击：次
前言
一种在 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 。为方便开发中使用，该组件具有以下特点：
Demo 与使用方法
使用与示例请参见：react-native-echarts-demo，如果你需要直接使用，可按以下步骤移植：
将根目录下的 WebChart 组件文件夹拷到你项目中合适的地方
将 /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,
},
}));
}
});
`}
以上就是我们封装的响应式 WebChart 组件及使用，完整代码请参见：react-native-echarts-demo。
在使用中，还有以下几个坑未解决，目前只能绕过，欢迎知道的同学指正：