Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shifeng1993/react-native-secharts
一个webview封装的图表组件。基于百度echarts4
https://github.com/shifeng1993/react-native-secharts
react-native react-native-echarts react-native-secharts
Last synced: 1 day ago
JSON representation
一个webview封装的图表组件。基于百度echarts4
- Host: GitHub
- URL: https://github.com/shifeng1993/react-native-secharts
- Owner: shifeng1993
- License: mit
- Created: 2018-02-07T05:38:37.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T18:23:26.000Z (about 2 years ago)
- Last Synced: 2024-12-29T17:15:20.413Z (8 days ago)
- Topics: react-native, react-native-echarts, react-native-secharts
- Language: JavaScript
- Homepage:
- Size: 7.8 MB
- Stars: 219
- Watchers: 7
- Forks: 57
- Open Issues: 54
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-secharts
[](https://www.npmjs.com/package/react-native-secharts)
[](https://github.com/shifeng1993/react-native-echarts/blob/master/LICENSE)
一个webview封装的图表组件。基于百度echarts4，相比native-echarts有echarts自带对象支持，例如渐变色等，用法与官网相同用法。
echarts version 4.2.1
注：react-native 最近几个版本 webview 包改动频繁，安装时请注意需要固定webview的版本，要不然会出现web与react-native通信的问题，导致api无反应，请仔细阅读安装步骤。
## 安装步骤
### 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
```
安装完成后在`android/gradle.properties`文件添加2行配置，确保在项目中启用AndroidX
注：0.60+采用自动link 安装后不需要进行link
```
android.useAndroidX=true
android.enableJetifier=true
```
- react-native >= 0.57 && react-native < 0.60.2
```bash
yarn add [email protected] [email protected]
react-native link react-native-webview
```
或者
```bash
npm install [email protected] [email protected] --save
react-native link react-native-webview
```
- react-native = 0.56
```bash
yarn add [email protected]
```
或者
```bash
npm install [email protected] --save
```
- react-native < 0.56
```bash
yarn add [email protected]
```
或者
```bash
npm install [email protected] --save
```
### 2. 修复android release bug
- 组件版本`1.7.0`以上（包含），不需要此步骤，请跳至`步骤3. 引用组件`
- 在你的项目创建此路径的文件夹 `$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/
```
- 以下是 windows
```bash
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`是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/
## props
| 属性 | 类型 | 默认值 | 备注 |
| ------------- | ------- | ------------- | ------------- |
| option | obj | null | echarts配置项，请参考echarts官网 |
| backgroundColor | string | 'rgba(0,0,0,0)' | 图表画布背景色 |
| width | number | 'auto' | 画布宽度 |
| height | number | 400 | 画布高度 |
| renderLoading | func | ()=> | loading时遮罩 |
| onPress | func | (e)=>{} | 点击事件 |
## 实例方法
| 方法名称 | 参数 | 备注 |
| ------------- | ------- | ------------- |
| setOption | (option: Object, notMerge?: boolean, lazyUpdate?: boolean) | 参数参考：http://echarts.baidu.com/api.html#echartsInstance.setOption |
| getImage | (base64)=>{} | 返回函数的参数base64，可结合RNFS写入相册 |
| clear | 无 | 清空echarts画布 |
## 历史版本特性
#### 1.7.0 修复已知未知bug，增加适配androidx，更新echarts版本到4.2.1，去掉isMap属性
#### 1.6.1 修复文档错误部分
#### 1.6.0 修复0.57版本出现的本地不能渲染的bug。
#### 1.5.3 修复1.5.2版本出现的不能渲染的bug，使用最新版本rn重写示例。
#### 1.5.2 新增了必要的props使用canvas或者svg渲染
#### 1.5.1 修复组件在重绘过程中会刷新webview的闪烁,更新echarts版本到4.2.0-rc.2
#### 1.5.0 更新组件到支持rn0.56版本，修复ios release出现的不能渲染的bug。
#### 1.4.5 更新echarts版本到4.1.0
#### 1.4.4 增加echart实例方法setOption的附加参数调用，增加clear实例方法调用
#### 1.4.3 修复设置了echarts地图，其余图表只能显示一个的问题
#### 1.4.2 修复echarts地图不能显示的问题，目前只支持echarts最新的bmap形式。
#### 1.4.0 更新echarts版本到4.1.0.rc2，修复图表点击事件。
#### 1.3.9 修复formatter属性function被屏蔽的问题。
#### 1.3.7 修复了flex：1不能显示的问题
#### 1.3.6 修复了formatter属性不能使用clang系的转译字符，以及被误转为string的问题
#### 1.3.3 新增获取图片getImage方法 ，使用refs获取组件实例进行使用
#### 1.3.0 新增echarts对象，可以使用对象内对应方法，例如渐变等
#### 1.2.0 主分支更新至echarts4
#### 1.1.0 新增刷新option方法 ，使用refs获取组件实例进行使用
#### 1.0.0 上传基础组件，基于echarts3封装，修复了ios android闪白，ios默认移动适配，以及android release路径问题
## 已知bug 和 需要注意的点
### bug
- 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，不推荐而已。
```jsx
constructor(props) {
super(props);
this.state = {
image: '',
option1: {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
color: l1,
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}]
},
flag: false // 这个布尔值是为了测试option1在setstate操作后不会被重置成初始状态。
}
this.echart1 = React.createRef();
}
render() {
return (
{`当前state内状态: falg = ${this.state.flag.toString()}`}
点我改变echarts option
{!this.state.image ? '这里显示base64格式的img字符串' : this.state.image}
点我获取echarts image
this.setState({flag: !this.state.flag})}>
点我测试option 改变后进行setState
);
}
editOption = () => {
- this.echart1.current.setOption({
+ this.setState({
option1: {
...this.state.option1,
series: [
{
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}
]
}
})
}
```
## 以下是示例图
#### 柱状图
#### 折线图
#### 饼状图
