react-echarts-v3

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

Feature

轻量，更高的效率，支持按需引入 ECharts 的图表和组件，配合react-grid-layout支持拖拽布局。

Installation

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

Usage

0. Change webpack config

   For webpack 1.x:

   1      {
   2        test: /\.jsx?$/,
   3        loader: 'babel',
   4        include: [
   5-          path.join(prjRoot, 'src')
   6+          path.join(prjRoot, 'src'),
   7+          path.join(prjRoot, 'node_modules/react-echarts-v3/src')
   8        ],
   9-        exclude: /node_modules/
   10+        exclude: /node_modules(?![\\/]react-echarts-v3[\\/]src[\\/])/
   11      },

   For webpack 2.x+:

   1      {
   2        test: /\.jsx?$/,
   3        loader: 'babel-loader',
   4-       include: [resolve('src'), resolve('test')]
   5+       include: [resolve('src'), resolve('test'), resolve('node_modules/react-echarts-v3/src')]
   6      }

1. Import all charts and components

   1import IEcharts from 'react-echarts-v3/src/full.js';
   2
   3const option = {
   4  title: {
   5    text: 'ECharts 入门示例'
   6  },
   7  tooltip: {},
   8  xAxis: {
   9    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
   10  },
   11  yAxis: {},
   12  series: [{
   13    name: '销量',
   14    type: 'bar',
   15    data: [5, 20, 36, 10, 10, 20]
   16  }]
   17};
   18
   19const onEvents = {
   20  'click': function(params) {
   21    // the 'this' variable can get echarts instance
   22    console.log(params);
   23  }
   24};
   25
   26return (
   27  <IEcharts option={option} onEvents={onEvents} />
   28);

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

   1import IEcharts from 'react-echarts-v3/src/lite.js';
   2
   3// Import all charts and components
   4// require('echarts/lib/chart/line');
   5require('echarts/lib/chart/bar');
   6// require('echarts/lib/chart/pie');
   7// require('echarts/lib/chart/scatter');
   8// require('echarts/lib/chart/radar');
   9
   10// require('echarts/lib/chart/map');
   11// require('echarts/lib/chart/treemap');
   12// require('echarts/lib/chart/graph');
   13// require('echarts/lib/chart/gauge');
   14// require('echarts/lib/chart/funnel');
   15// require('echarts/lib/chart/parallel');
   16// require('echarts/lib/chart/sankey');
   17// require('echarts/lib/chart/boxplot');
   18// require('echarts/lib/chart/candlestick');
   19// require('echarts/lib/chart/effectScatter');
   20// require('echarts/lib/chart/lines');
   21// require('echarts/lib/chart/heatmap');
   22
   23// require('echarts/lib/component/graphic');
   24// require('echarts/lib/component/grid');
   25// require('echarts/lib/component/legend');
   26// require('echarts/lib/component/tooltip');
   27// require('echarts/lib/component/polar');
   28// require('echarts/lib/component/geo');
   29// require('echarts/lib/component/parallel');
   30// require('echarts/lib/component/singleAxis');
   31// require('echarts/lib/component/brush');
   32
   33// require('echarts/lib/component/title');
   34
   35// require('echarts/lib/component/dataZoom');
   36// require('echarts/lib/component/visualMap');
   37
   38// require('echarts/lib/component/markPoint');
   39// require('echarts/lib/component/markLine');
   40// require('echarts/lib/component/markArea');
   41
   42// require('echarts/lib/component/timeline');
   43// require('echarts/lib/component/toolbox');
   44
   45// require('zrender/lib/vml/vml');
   46
   47
   48const option = {
   49  title: {
   50    text: 'ECharts 入门示例'
   51  },
   52  tooltip: {},
   53  xAxis: {
   54    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
   55  },
   56  yAxis: {},
   57  series: [{
   58    name: '销量',
   59    type: 'bar',
   60    data: [5, 20, 36, 10, 10, 20]
   61  }]
   62};
   63
   64return (
   65  <IEcharts option={option} />
   66);

propTypes

1    className:    PropTypes.string,
2    style:        PropTypes.object,
3    group:        PropTypes.string,
4    theme:        PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
5    initOpts:     PropTypes.object,
6    option:       PropTypes.object.isRequired,
7    notMerge:     PropTypes.bool,
8    lazyUpdate:   PropTypes.bool,
9    onReady:      PropTypes.func,
10    onResize:     PropTypes.func,
11    loading:      PropTypes.bool,
12    resizable:    PropTypes.bool,
13    optsLoading:  PropTypes.object,
14    onEvents:     PropTypes.object

Read More

defaultProps

1    className: 'react-echarts',
2    style: { width: '100%', height: '100%' },
3    notMerge: false,
4    lazyUpdate: false,
5    onReady: function(instance) {},
6    onResize: function(width, height) {},
7    loading: false,
8    resizable: false,
9    optsLoading: {
10        text: 'loading',
11        color: '#c23531',
12        textColor: '#000',
13        maskColor: 'rgba(255, 255, 255, 0.8)',
14        zlevel: 0
15    },
16    onEvents: {}

Demo

react-echarts-v3-demo

License

MIT