Home

Awesome

react-echarts-v3 npm react echarts3

React.js v16.x+ component wrap for ECharts.js 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

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

Usage

  1. Change webpack config

    For webpack 1.x:

          {
            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+:

          {
            test: /\.jsx?$/,
            loader: 'babel-loader',
    -       include: [resolve('src'), resolve('test')]
    +       include: [resolve('src'), resolve('test'), resolve('node_modules/react-echarts-v3/src')]
          }
    
  2. Import all charts and components

    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} />
    );
    
  3. Import ECharts.js modules manually to reduce bundle size

    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');
    
    
    const option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };
    
    return (
      <IEcharts option={option} />
    );
    

propTypes

    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

defaultProps

    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

License

MIT