# xn-rn-echarts

> 犀牛RN echarts

Latest version **1.3.2** (published 2021-01-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install xn-rn-echarts
pnpm add xn-rn-echarts
yarn add xn-rn-echarts
bun add xn-rn-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.3.2 |
| Published | 2021-01-14 |
| First published | 2017-11-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 450.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | yijiu986 |

## Links

- npm: https://www.npmjs.com/package/xn-rn-echarts
- npm.io page: https://npm.io/package/xn-rn-echarts

## Recent versions

- 1.3.2 (latest) — 2021-01-14
- 1.3.1 — 2021-01-14
- 1.3.0 — 2018-08-17
- 1.2.0 — 2018-08-06
- 1.0.8 — 2017-12-29
- 1.0.7 — 2017-12-29
- 1.0.6 — 2017-12-28
- 1.0.5 — 2017-12-21
- 1.0.4 — 2017-12-08
- 1.0.3 — 2017-12-04
- 1.0.2 — 2017-11-27
- 1.0.1 — 2017-11-27
- 1.0.0 — 2017-11-27

## README

# xn-rn-echarts

## install

$ npm install xn-rn-echarts --save


1.3.0  echarts  采用4.0版本

## Usage

###用法

用法完全和echarts一致，将echarts的option传给组件。option详细属性详见[文档](http://echarts.baidu.com/option.html#title)

xn-rn-echarts 共暴露了三个属性:

* *option* (object): echarts图表的配置项，无默认值。 
* *width* (number): 图表的宽度，默认值为其外层容器的宽度。 
* *height* (number): 图表的高度，默认值为400。 
* *clickCallBack* fun: 可选 点击图表回调方法。 
* *onRef* fun: 可选  用于导出图。     this.echart.getImg(this.getImgBack); getImg内部方法，用于获取图

```js
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  DeviceEventEmitter
} from 'react-native';
import Echarts from 'xn-rn-echarts';

export default class app extends Component {
  render() {
    const option = {
      title: {
          text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
          data:['销量']
      },
      xAxis: {
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
      }]
    };
    return (
      <Echarts option={option} height={300}  clickCallBack={this.clickCallBack}  onRef={this.onRef} />
    );
    //方法可选
    clickCallBack=(dataIndex)=>{
        console.log(dataIndex)
    }
    
     onRef = (ref) => {
        this.echart= ref
    };
    
    //方法可选
    getImgBack=(img)=>{
        console.log(img)
    }
   
    //点击下载图
    click = (e) => {
        this.echart.getImg(this.getImgBack);
    }
   


  }
}

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

```

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