reactnative的echarts组件 基于react-native-secharts
npm install kcos-rn-sechartsecharts version 4.2.1
注：react-native 最近几个版本 webview 改动频繁，请仔细阅读安装步骤。
- echarts配置项内所有的函数均无法被new function() 或者 eval()重新还原为函数, 这个bug只能找到echarts源码内的方法进行修改，后续找到地方会进行修复，请不要在提类似的bug。
- 实例方法setOption不会保存修改后的option，这意味着在react 执行setState操作后重新render，当前state的状态会重新覆盖webview内setOption的状态，所以不推荐使用。
- 目前已经修复组件因为onload发生的闪烁，这意味着可以不用组件setOption的实例方法，直接通过修改当容器组件的绑定的state值，setState操作，然后secharts组件会监听 state中option的改变，来进行option修改。当然组件实例方法setOption还是可以使用的，只是有bug，不推荐而已。
1. 安装依赖
- react-native >= 0.60.2
``bash`
yarn add react-native-secharts react-native-webview@androidx
或者
bash`
npm install react-native-secharts react-native-webview@androidx --save
安装完成后在文件添加2行配置，确保在项目中启用AndroidX
注：0.60+采用自动link 安装后不需要进行link
`
android.useAndroidX=true
android.enableJetifier=true
- react-native >= 0.57 && react-native > 0.60.2
bash`
yarn add react-native-secharts react-native-webview
react-native link react-native-webview
或者
bash`
npm install react-native-secharts@1.6.1 react-native-webview --save
react-native link react-native-webview
- react-native = 0.56
`bash`
yarn add react-native-secharts@1.5.3
或者
bash`
npm install react-native-secharts@1.5.3 --save
- react-native < 0.56
`bash`
yarn add react-native-secharts@1.4.5
或者
bash`
npm install react-native-secharts@1.4.5 --save
2. 修复android release bug
- 组件版本1.7.0以上（包含），不需要此步骤，请跳过$yourProject/android/app/src/main/assets/echarts
- 在你的项目创建此路径的文件夹 ，$yourProject/） 文件夹下使用命令
- 创建完成后请在你的项目根目录（
- 以下是 mac && linux
``bash`
cp node_modules/react-native-secharts/main/dist/index.html android/app/src/main/assets/echarts/ && cp node_modules/react-native-secharts/main/dist/Bmap.html android/app/src/main/assets/echarts/
- 以下是 windowsbash`
copy node_modules/react-native-secharts/main/dist/index.html android/app/src/main/assets/echarts/ && copy node_modules/react-native-secharts/main/dist/Bmap.html android/app/src/main/assets/echarts/
3. 引用组件
`javascript`
import {Echarts, echarts} from 'react-native-secharts';
- 大写开头的是组件echarts
- 小写开头的是echarts对象
4. 使用组件
`javascript`
请看example文件夹中示例代码
链接：https://github.com/shifeng1993/react-native-secharts/tree/master/example
运行示例
`bash``
$ cd example
$ yarn
$ react-native run-ios 或者 $ react-native run-android
option具体配置请参考echarts官网api http://echarts.baidu.com/api.html#echarts
官方示例 http://echarts.baidu.com/examples/
| 属性 | 类型 | 默认值 | 备注 |
| ------------- | ------- | ------------- | ------------- |
| option | obj | null | echarts配置项，请参考echarts官网 |
| backgroundColor | string | 'rgba(0,0,0,0)' | 图表画布背景色 |
| width | number | 'auto' | 画布宽度 |
| height | number | 400 | 画布高度 |
| renderLoading | func | ()=>
| onPress | func | (e)=>{} | 点击事件 |
#### 柱状图
!image
#### 折线图
!image
#### 饼状图
!image