# @iwubida/native-echarts

> echarts for react-native

Latest version **1.0.0** (published 2019-01-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @iwubida/native-echarts
pnpm add @iwubida/native-echarts
yarn add @iwubida/native-echarts
bun add @iwubida/native-echarts
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-01-16 |
| First published | 2019-01-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 12 |
| Author | iwubida |
| Maintainers | wangdanting, zkzhao |
| Keywords | react-native, echarts, chart, charts, iwubida |

## Links

- npm: https://www.npmjs.com/package/@iwubida/native-echarts
- Repository: https://github.com/iwubida/react-native-echarts
- Homepage: https://github.com/iwubida/react-native-echarts#readme
- Issues: https://github.com/iwubida/react-native-echarts/issues
- npm.io page: https://npm.io/package/@iwubida/native-echarts

## Dependencies (1)

- [echarts](https://npm.io/package/echarts.md) 4.2.0-rc.2

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2019-01-16
- 0.5.3 — 2019-01-10
- 0.5.1 — 2019-01-09
- 0.5.0 — 2019-01-09

## README

# native-echarts

[![NPM Version](https://img.shields.io/npm/v/native-echarts.svg?style=flat)](https://www.npmjs.org/package/native-echarts)
  [![npm](https://img.shields.io/npm/dm/native-echarts.svg?style=flat)](https://www.npmjs.org/package/native-echarts)
  [![License](http://img.shields.io/npm/l/native-echarts.svg?style=flat)](https://raw.githubusercontent.com/somonus/react-native-echarts/master/LICENSE.md)
  
## install

$ npm install @iwubida/native-echarts --save

## Android 打包

在项目根目录文件夹下使用命令：

打包 Android 需要先把 tpl.html（路径： node_modules\native-echarts\src\components\Echarts）拷贝到 android\app\src\main\assets目录下

## Usage

The Usage is complete consistent with Echarts

component props:

* *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. 


```js
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import Echarts from '@iwubida/native-echarts';

export default class app extends Component {
  render() {
    const option = {
      xAxis: {
        name: `入店人数趋势图`,
        nameTextStyle: {
          color: '#121212',
          fontSize: 13
        },
        nameLocation: 'middle',
        nameGap: 40,
        type: 'category',
        boundaryGap: false,
        data: ['01/03', '01/04', '01/05', '01/06', '01/07', '01/08', '01/09'],
        splitLine: {
          lineStyle: {
            color: '#f8f8f8'
          },
          show: true
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#999'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#e5e5e5'
          }
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            color: '#f8f8f8'
          },
          show: true
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#999'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#f8f8f8'
          }
        }
      },
      series: [
        {
          data: [200, 500, 300, 400, 599, 200, 100],
          type: 'line',
          itemStyle: {
            normal: {
              color: '#0BA5F0',
              lineStyle: {
                color: '#0BA5F0',
                opacity: 0.8
              }
            }
          },
          areaStyle: {
            normal: {
              color: 'rgba(11, 165, 240, .1)'
            }
          }
        }
      ]
    }
    return (
      <Echarts option={option} height={300} />
    );
  }
}

AppRegistry.registerComponent('app', () => app);

```



##Example

*run demo*

```
cd example
npm install
npm start
```

### IOS

Open the xcode project in the ios directory and click run

screenshots：

![image](https://github.com/iwubida/react-native-echarts/blob/master/example/demoIOS.jpg)

### Android

Open the Android project in the android directory with Android Studio and click run.

screenshots：

![image](https://github.com/iwubida/react-native-echarts/blob/master/example/demoAndroid.jpg)

## License

native-echarts is released under the MIT license.

---
_Source: https://npm.io/package/@iwubida/native-echarts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._