这是我参与8月更文挑战的第9，活动详情查看：8月更文挑战

前言

众所周知react native echarts这个库已经很久都没人维护了。他的实现原理就是借助webView来来呈现html代码，所以只要webView的组件还能用我们都能继续使用。我们只需要拷贝这个库的代码对其进行少量的修改就可以直接使用了。只是目前，笔者这边通过修改只能使用到echarts 4.7的版本，不过也是够用了。我们需要用到哪个图标，直接echarts官方复制完事。

引入native-echarts时的简要说明

my_modules\native-echarts\src\index.js my_modules\native-echarts\src\components\Echarts\index.js

import { WebView } from "react-native-webview";


source={Platform.OS === 'ios' ? require('./tpl.html') : {uri:'file:///android_asset/tpl.html'}}

• 在node_modules\native-echarts\src\components\Echarts找到tpl.html 这个文件路径
• 将tpl.html拷贝这个文件到android的assets这个目录下,没有这个目录就新建一个

我的小demo

gitee.com/weijintao/r…

参考文档

native-echarts引入时的注意事项

native-echarts引入时的注意事项

react native中使用echarts native-echarts填坑记录 WebView封装Echarts经验

native-echarts 注意

目前并支持5.0以后的echarts，应该是最新的5.1.2 引入会提示语法错误。 如果不考虑交互可使用victory-native，性能会更加优秀。 当前使用的echarts版本为4.7

需要更换echarts版本的方法

native-echarts内部使用了react native中的webview进行图表的展示，本质上只是传入数据，通过echarts渲染出静态的HTML文档，然后通过webview展示出来而已。

netive-echarts内部使用的echarts版本为v3.2.3"版本，如果需要更高级的echarts版本，只需要更换src/components/Echarts/echarts.min.js文件以及tpl.html文件里的内容即可。