KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#typescript #ai-agents #developer-tools #cli #codex #claude-code #react #mcp #open-source #deepseek-harness #dsh-plugin #ai

react-echarts-v3

★ 51 Open GitHub ↗

React.js(v16.x+) component wrap for ECharts.js(v3.x+)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-echarts-v3 [![npm](https://img.shields.io/npm/v/react-echarts-v3.svg)](https://www.npmjs.com/package/react-echarts-v3) [![react](https://img.shields.io/badge/react-16.x-brightgreen.svg)](https://reactjs.org/) [![echarts3](https://img.shields.io/badge/echarts-3.x-brightgreen.svg)](http://echarts.baidu.com/)

> [React.js](https://reactjs.org/) `v16.x+` component wrap for [ECharts.js](http://echarts.baidu.com/) `v3.x+`

## Feature

1. Lightweight, efficient, on-demand binding events;
2. Support for importing ECharts.js charts and components on demand;
3. Support component resize event auto update view;

## Installation

```bash
$ npm install --save echarts react-echarts-v3
```

## Usage

0. Change webpack config

For webpack 1.x:

```diff
          {
            test: /\.jsx?$/,
            loader: 'babel',
            include: [
    -          path.join(prjRoot, 'src')
    +          path.join(prjRoot, 'src'),
    +          path.join(prjRoot, 'node_modules/react-echarts-v3/src')
            ],
    -        exclude: /node_modules/
    +        exclude: /node_modules(?![\\/]react-echarts-v3[\\/]src[\\/])/
          },
    ```

For webpack 2.x+:

```diff
          {
            test: /\.jsx?$/,
            loader: 'babel-loader',
    -       include: [resolve('src'), resolve('test')]
    +       include: [resolve('src'), resolve('test'), resolve('node_modules/react-echarts-v3/src')]
          }
    ```

1. Import all charts and components

```javascript
    import IEcharts from 'react-echarts-v3/src/full.js';

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

const onEvents = {
      'click': function(params) {
        // the 'this' variable can get echarts instance
        console.log(params);
      }
    };

return (
      <IEcharts option={option} onEvents={onEvents} />
    );
    ```

2. Import ECharts.js modules manually to reduce bundle size

```javascript
    import IEcharts from 'react-echarts-v3/src/lite.js';

// Import all charts and components
    // require('echarts/lib/chart/line');
    require('echarts/lib/chart/bar');
    // require('echarts/lib/chart/pie');
    // require('echarts/lib/chart/scatter');
    // require('echarts/lib/chart/radar');

// require('echarts/lib/chart/map');
    // require('echarts/lib/chart/treemap');
    // require('echarts/lib/chart/graph');
    // require('echarts/lib/chart/gauge');
    // require('echarts/lib/chart/funnel');
    // require('echarts/lib/chart/parallel');
    // require('echarts/lib/chart/sankey');
    // require('echarts/lib/chart/boxplot');
    // require('echarts/lib/chart/candlestick');
    // require('echarts/lib/chart/effectScatter');
    // require('echarts/lib/chart/lines');
    // require('echarts/lib/chart/heatmap');

// require('echarts/lib/component/graphic');
    // require('echarts/lib/component/grid');
    // require('echarts/lib/component/legend');
    // require('echarts/lib/component/tooltip');
    // require('echarts/lib/component/polar');
    // require('echarts/lib/component/geo');
    // require('echarts/lib/component/parallel');
    // require('echarts/lib/component/singleAxis');
    // require('echarts/lib/component/brush');

// require('echarts/lib/component/title');

// require('echarts/lib/component/dataZoom');
    // require('echarts/lib/component/visualMap');

// require('echarts/lib/component/markPoint');
    // require('echarts/lib/component/markLine');
    // require('echarts/lib/component/markArea');

// require('echarts/lib/component/timeline');
    // require('echarts/lib/component/toolbox');

// require('zrender/lib/vml/vml');

return (
      <IEcharts option={option} />
    );
    ```

## propTypes

```javascript
    className:    PropTypes.string,
    style:        PropTypes.object,
    group:        PropTypes.string,
    theme:        PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
    initOpts:     PropTypes.object,
    option:       PropTypes.object.isRequired,
    notMerge:     PropTypes.bool,
    lazyUpdate:   PropTypes.bool,
    onReady:      PropTypes.func,
    onResize:     PropTypes.func,
    loading:      PropTypes.bool,
    resizable:    PropTypes.bool,
    optsLoading:  PropTypes.object,
    onEvents:     PropTypes.object
```

[Read More](http://echarts.baidu.com/option.html)

## defaultProps

```javascript
    className: 'react-echarts',
    style: { width: '100%', height: '100%' },
    notMerge: false,
    lazyUpdate: false,
    onReady: function(instance, ECharts) {},
    onResize: function(width, height) {},
    loading: false,
    resizable: false,
    optsLoading: {
        text: 'loading',
        color: '#c23531',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)',
        zlevel: 0
    },
    onEvents: {}
```

## Demo

[react-echarts-v3-demo](https://github.com/xlsdg/react-echarts-v3-demo)

# License

MIT

react-echarts-v3

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README