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

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

echarts version 4.2.0-rc.2node

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

安裝步驟

  1. 安裝依賴
  • react-native >= 0.56linux

  • yarn add react-native-secharts

或者android

npm install react-native-secharts --saveios

react-native < 0.56git

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

  1. 修復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/web

  • 如下是 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/npm

  1. 引用組件

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

  • 大寫開頭的Echarts是組件
  • 小寫開頭的echarts是echarts對像
  1. 使用組件

<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

相關文章
相關標籤/搜索