RN集成echarts4圖表組件react-native-secharts(轉載)

一個webview封裝的圖表組件。基於百度echarts4，相比native-echarts有echarts自帶對象支持，例如漸變色等，用法與官網相同用法。

echarts version 4.2.0-rc.2

注：react-native 0.56 版本以上，webview改版， https://reactnative.cn/docs/webview/ 本組件分爲0.56以上（包含）， 0.56如下, 請閱讀如下安裝步驟。

安裝步驟

1. 安裝依賴

• react-native >= 0.56

• yarn add react-native-secharts

或者

npm install react-native-secharts --save

react-native < 0.56

yarn add react-native-secharts@1.4.5或者npm install react-native-secharts@1.4.5 --save

2. 修復android release bug

• 在你的項目建立此路徑的文件夾 $yourProject/android/app/src/main/assets/echarts，
• 建立完成後請在你的項目根目錄（`$yourProject/） 文件夾下使用命令
• 如下是 mac && linux

• 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/

• 如下是 windows

• 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. 引用組件

import {Echarts, echarts} from 'react-native-secharts';

• 大寫開頭的Echarts是組件
• 小寫開頭的echarts是echarts對像

4. 使用組件

<Echarts option={{}} height={400}/>

請看example文件夾中示例代碼

連接：https://github.com/shifeng1993/react-native-secharts/tree/master/example

運行示例

$ 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/

setOption

(option: Object, notMerge?: boolean, lazyUpdate?: boolean)

參數參考：http://echarts.baidu.com/api.html#echartsInstance.setOption

 

轉載自 https://blog.csdn.net/sf542674656/article/details/80109884