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