2016-10-21 07:54:29 +00:00
|
|
|
|
# native-echarts
|
|
|
|
|
|
|
2016-11-18 08:04:16 +00:00
|
|
|
|
[](https://www.npmjs.org/package/native-echarts)
|
|
|
|
|
|
[](https://www.npmjs.org/package/native-echarts)
|
|
|
|
|
|
[](https://raw.githubusercontent.com/somonus/native-echarts/master/LICENSE)
|
|
|
|
|
|
|
2016-10-21 07:54:29 +00:00
|
|
|
|
## install
|
|
|
|
|
|
|
|
|
|
|
|
$ npm install native-echarts --save
|
|
|
|
|
|
|
|
|
|
|
|
## Usage
|
|
|
|
|
|
|
2016-11-11 02:34:30 +00:00
|
|
|
|
The Usage is complete consistent with Echarts
|
2016-10-21 07:54:29 +00:00
|
|
|
|
|
2016-11-11 02:34:30 +00:00
|
|
|
|
component props:
|
2016-10-21 07:54:29 +00:00
|
|
|
|
|
2016-11-11 02:34:30 +00:00
|
|
|
|
* *option* (object): The option for echarts: [Documentation](http://echarts.baidu.com/option.html#title)。
|
|
|
|
|
|
* *width* (number): The width of the chart. The default value is the outer container width.
|
|
|
|
|
|
* *height* (number): The height of the chart. The default value is 400.
|
2016-10-21 07:54:29 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
import React, { Component } from 'react';
|
|
|
|
|
|
import {
|
|
|
|
|
|
AppRegistry,
|
|
|
|
|
|
StyleSheet,
|
|
|
|
|
|
Text,
|
|
|
|
|
|
View
|
|
|
|
|
|
} from 'react-native';
|
|
|
|
|
|
import Echarts from 'native-echarts';
|
|
|
|
|
|
|
|
|
|
|
|
export default class app extends Component {
|
|
|
|
|
|
render() {
|
|
|
|
|
|
const option = {
|
|
|
|
|
|
title: {
|
2016-11-11 02:34:30 +00:00
|
|
|
|
text: 'ECharts demo'
|
2016-10-21 07:54:29 +00:00
|
|
|
|
},
|
|
|
|
|
|
tooltip: {},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
data:['销量']
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {},
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
name: '销量',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
data: [5, 20, 36, 10, 10, 20]
|
|
|
|
|
|
}]
|
|
|
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
|
|
|
<Echarts option={option} height={300} />
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
AppRegistry.registerComponent('app', () => app);
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
##Example
|
|
|
|
|
|
|
|
|
|
|
|
*run demo*
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
cd example
|
|
|
|
|
|
npm install
|
|
|
|
|
|
npm start
|
|
|
|
|
|
```
|
2016-10-24 05:41:55 +00:00
|
|
|
|
|
|
|
|
|
|
### IOS
|
|
|
|
|
|
|
2016-11-11 02:34:30 +00:00
|
|
|
|
Open the xcode project in the ios directory and click run
|
2016-10-21 07:54:29 +00:00
|
|
|
|
|
2016-11-11 02:34:30 +00:00
|
|
|
|
screenshots:
|
2016-10-21 08:43:02 +00:00
|
|
|
|
|
2016-11-03 02:55:11 +00:00
|
|
|
|

|
2016-10-21 08:43:02 +00:00
|
|
|
|
|
2016-10-24 05:41:55 +00:00
|
|
|
|
### Android
|
|
|
|
|
|
|
2016-11-11 02:34:30 +00:00
|
|
|
|
Open the Android project in the android directory with Android Studio and click run.
|
2016-10-24 05:41:55 +00:00
|
|
|
|
|
2016-11-11 02:34:30 +00:00
|
|
|
|
screenshots:
|
2016-11-03 02:55:11 +00:00
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
2016-10-21 07:54:29 +00:00
|
|
|
|
## License
|
|
|
|
|
|
|
|
|
|
|
|
native-echarts is released under the MIT license.
|