一个webview封装的图表组件。基于百度echarts4，相比native-echarts有echarts自带对象支持，例如渐变色等，用法与官网相同用法。
echarts version 4.2.1
注：react-native 最近几个版本 webview 包改动频繁，安装时请注意需要固定webview的版本，要不然会出现web与react-native通信的问题，导致api无反应，请仔细阅读安装步骤。
-
react-native >= 0.60.2
yarn add react-native-secharts react-native-webview@androidx
或者
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
yarn add [email protected] [email protected] react-native link react-native-webview
或者
npm install [email protected] [email protected] --save react-native link react-native-webview
-
react-native = 0.56
yarn add [email protected]
或者
npm install [email protected] --save
-
react-native < 0.56
yarn add [email protected]
或者
npm install [email protected] --save
- 组件版本
1.7.0以上（包含），不需要此步骤，请跳至步骤3. 引用组件 - 在你的项目创建此路径的文件夹
$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/import {Echarts, echarts} from 'react-native-secharts';- 大写开头的
Echarts是组件 - 小写开头的
echarts是echarts对象
<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/
| 属性 | 类型 | 默认值 | 备注 |
|---|---|---|---|
| option | obj | null | echarts配置项，请参考echarts官网 |
| backgroundColor | string | 'rgba(0,0,0,0)' | 图表画布背景色 |
| width | number | 'auto' | 画布宽度 |
| height | number | 400 | 画布高度 |
| renderLoading | func | ()=><View style={{backgroundColor: 'rgba(0,0,0,0)'}}/> | 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画布 |
- 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，不推荐而已。
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 (
<View style={styles.container}>
<View><Echarts ref={this.echart1} option={this.state.option1} onPress={this.onPress} height={300} /></View>
<View style={{padding: 20, alignItems: "center"}}><Text>{`当前state内状态: falg = ${this.state.flag.toString()}`}</Text></View>
<TouchableOpacity onPress={this.editOption}>
<Text>点我改变echarts option</Text>
</TouchableOpacity>
<Text numberOfLines={1}>{!this.state.image ? '这里显示base64格式的img字符串' : this.state.image}</Text>
<TouchableOpacity onPress={this.getImage}>
<Text>点我获取echarts image</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.setState({flag: !this.state.flag})}>
<Text>点我测试option 改变后进行setState</Text>
</TouchableOpacity>
</View>
);
}
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]
}
]
}
})
}
