https://github.com/kaixinfu/react-native-echarts
react-native-echarts
https://github.com/kaixinfu/react-native-echarts
native-echarts react-native react-navigation
Last synced: 20 days ago
JSON representation
react-native-echarts
- Host: GitHub
- URL: https://github.com/kaixinfu/react-native-echarts
- Owner: kaixinfu
- Created: 2017-10-24T06:59:04.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-28T16:23:31.000Z (over 8 years ago)
- Last Synced: 2025-08-12T09:31:52.053Z (11 months ago)
- Topics: native-echarts, react-native, react-navigation
- Language: JavaScript
- Size: 182 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-echarts
## Contains
- [x] [react-native](http://reactnative.cn/)
- [x] [native-echarts](https://www.npmjs.com/package/native-echarts)
- [x] native-echarts Demo
## Warning
> `@remobile/react-native-echarts` 存在react class版本问题，需修改依赖，建议慎用
### 推荐使用native-echarts
> npm install native-echarts --save
| 参数 | 描述 |
| ------------- | ------------- |
| option (object) | echarts图表的配置项 |
| width (number) | 图表的宽度 |
| height (number)| 图表的高度
```
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Platform,
Image
} from 'react-native';
import {Container, Content, Button} from 'native-base';
import Echarts from 'native-echarts';
constructor(props) {
super(props);
this.state = {
apple:[2, 4, 7, 2, 2, 7, 13, 16],
organ: [6, 9, 9, 2, 8, 7, 17, 18],
}
}
render() {
const option = {
//点击某一个点的数据的时候，显示出悬浮窗
tooltip : {
trigger: 'axis'
},
//可以手动选择现实几个图标
legend: {
data:['苹果','橘子']
},
//各种表格
toolbox: {
//改变icon的布局朝向
//orient: 'vertical',
show : true,
showTitle:true,
feature : {
//show是否显示表格，readOnly是否只读
dataView : {show: true, readOnly: false},
magicType : {
//折线图 柱形图 总数统计 分开平铺
type: ['line', 'bar','stack','tiled'],
},
}
},
xAxis : [
{
//就是一月份这个显示为一个线段，而不是数轴那种一个点点
boundaryGap:true,
type : 'category',
name : '时间',
data : ['1月','2月','3月','4月','5月','6月','7月','8月']
}
],
yAxis : [
{
type : 'value',
name : '销量(kg)'
}
],
//图形的颜色组
color:['rgb(249,159,94)','rgb(67,205,126)'],
//需要显示的图形名称，类型，以及数据设置
series : [
{
name:'苹果',
//默认显
type:'bar',
data:this.state.apple
},
{
name:'橘子',
type:'bar',
data:this.state.organ
}
]
};
const { navigate } = this.props.navigation;
return (
navigate('Item', {callback: (data)=>{
console.log('..........go'); // 打印值为：'回调参数'
} ,user: 'Lucy' })}>
Click Me to scence1!
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
},
icon: {
width: 26,
height: 26,
},
titleView:{
height:Platform.OS=='ios'?64:44,
paddingTop:Platform.OS=='ios'?14:0,
backgroundColor:'#ff6400',
justifyContent: 'center',
alignItems: 'center',
},
title:{
color:'white',
fontSize:30,
textAlign:'center',
},
});
```
##example
> 柱形图
> 分析图
> 波形图
## Install
> `git clone git@github.com:liukaixin01/react-native-echarts.git`
> `npm install`
## Dev
> ios `react-native run-ios`
> android `react-native run-android`