# echarts-on-react

> A flexible echarts wrapper for react.

Latest version **1.0.3** (published 2017-12-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install echarts-on-react
pnpm add echarts-on-react
yarn add echarts-on-react
bun add echarts-on-react
```

## 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.3 |
| Published | 2017-12-07 |
| First published | 2017-11-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | houbin |

## Links

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

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^16.2.0

## Recent versions

- 1.0.3 (latest) — 2017-12-07
- 1.0.2 — 2017-12-07
- 1.0.1 — 2017-12-05
- 1.0.0 — 2017-11-26

## README

# echarts-on-react
A flexible echarts wrapper for react.
# 1. install
```sh
npm install --save echarts-on-react
```
# 2. use
```javascript
import EchartsOnReact from 'echarts-on-react/lib/EchartsOnReact';
import echarts from 'echarts';
...
<EchartsOnReact
  ref={(chartRef) => {
    this.echartsReact = chartRef;
  }}
  echarts={echarts}
  options={options}
  updateData={this.state.data}
  notMerge={true}
  lazyUpdate={true}
  silent={true} />
```
# 3. full example
``` javascript
import React from 'react';
import ReactDOM from 'react-dom';
import EchartsOnReact from 'echarts-on-react/lib/EchartsOnReact'
import echarts from 'echarts';

const options = {
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5,20,36,10,10,20]
    }
  ]
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [[1, 2, 3, 4, 5]]
    }
  }
  componentDidMount() {
    // echarts container
    console.log(this.echartsReact.chartRef);
    // echarts instance
    console.log(this.echartsReact.echarts.getInstanceByDom(this.echartsReact.chartRef));
    setInterval(() => {
      this.setState({
        data: [[
          parseInt(Math.random() * 100, 10),
          parseInt(Math.random() * 100, 10),
          parseInt(Math.random() * 100, 10),
          parseInt(Math.random() * 100, 10),
          parseInt(Math.random() * 100, 10)
        ]]
      })
    }, 5000)
  }
  render() {
    return (
      <div style={{
        width: '300px',
        height: '300px'
      }}>
        <EchartsOnReact
          ref={(chartRef) => {
            this.echartsReact = chartRef;
          }}
          echarts={echarts}
          options={options}
          updateData={this.state.data}
          notMerge={true}
          lazyUpdate={true}
          silent={true} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));
```

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