An Echarts wrapper component for react

npm i echarts-wrapper

or

yarn add echarts-wrapper

First import into the project:

import Echarts from 'echarts-wrapper';

Used is JSX:

 <Echarts
      options={this.state.option}
      loading={this.state.loading}
      onChartsReady={this.getInstance}
    />

When you change the value of option by setState, it is equivalent to executing 'echarts.setOption',you can display dynamic data by constantly changing the option and causing redrawing.'loading' is the same way.

You can get the object instance of echarts by 'onChartsReady',then

getInstance(instance){
    console.log('instance',instance);
  }

opts:

Additional parameters. There are several options below:

devicePixelRatio

Device pixel ratio, the browser value of window.devicePixelRatio is taken by default.

Renderer

Renderer that supports 'canvas' or 'svg'. See Rendering with Canvas or SVG.

Width

The instance width can be explicitly specified in pixels. If the value passed in is null/undefined/'auto', it means that the width of the dom (instance container) is automatically taken.

Height

The instance height can be explicitly specified in pixels. If the value passed in is null/undefined/'auto', it means that the height of the dom (instance container) is automatically taken.